This is a long shot... I'd like to have an svg shape appear before every h3 element, but which changes color with the class of the div it appears in. I understand that I can't do it by referencing a separate svg file through the "content" property.
Is there a way I can do it by referencing an inline svg - through the content property or otherwise?! As the actual text on the site will be written by users who can't use html, I can't simply hard-code it before every h3 element...
Thanks!
Unfortunately it's not possible. You need access to the svg's stroke or fill property to change the colour. Images added to the pseudo-element's content property (e.g. content: url(my.svg) is generated content and as such should just be seen as a flat image. Only the 'box' that is the pseudo-element is able to be modified through css.
Ideally, you would inject the svg inline into the DOM. However, you would still need to edit both the color property for the h3 text and either the stroke or fill property for the svg as well. As mentioned by Paulie_D in his comment, an icon font would get around this and inherit the color from the h3 tag. You can even create a custom icon font with your svg(s) with something like this.
Related
I've a css class with an image url, the path is correct as in inspect mode in Chrome I can see that class has loaded the image, but in the <img /> element the image is not showing up. It works only when I put the Image path in its src property.
In the screenshot, the red marked area is where I tried to use the class but not working, and the green marked area is where I put the image path in src property directly and its working.
I tried both background and background-image properties in CSS and none worked. For now I can settle it by using the src attribute instead of the css class, but my question is why the image is failing to render when passed using a css class?
if I'm correct, you use background-image on img tag. it's not best practice and it's not the purpose of this style rule. you can use div instead of img for background-image.
It seems to me that it is working properly. We can see the calculator image in the background. Your problem is that your <img> has no src attribute (hence the icon with the broken image).
I'm currently using this current HTML markup with Javascript to create text links with a inline image that "rolls over" on the text hover.
<div><a id="link" href="page.html"
onmouseover="rollover(this.id,'over');"
onmouseout="rollover(this.id,'out')"
>Link</a><img id="linkButton" src="image.gif" /></div>
It's important that the image is inline so I can easily create new text links with varying lengths of text.
I want to try and get this done without Javascript, and using a single image containing the over and out states of the rollover, so probably using the background position trick.
You need to use background-image (or just background) in CSS. Here is an example http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
The key is using pseudo classes on the link element. Eg:
a:hover
a:active
a:visited
You can also use inline-block so that the a isn't completely a block element. You may want to set a width and a height to it. Keep in mind display:inline-block doesn't work that great in IE7, if you still need to support that.
Here's some additional tips on using CSS Sprites
I have a div element to which I set opacity: 0.7; in the CSS file because I would like the text inside it to be opaque. I display some images inside this div, but the images appear with the inherited opacity property. The result are opaque images.
Is it possible to give a CSS property to the images not to inherit the opacity of the div that contains them? If not, how can I avoid having the images opaque?
Thanks.
If you're using opacity to allow the text to have partial transparency, then simply set the color of the element:
#elemId {
color: rgba(0,0,0,0.7);
}
This lets you avoid adjusting the opacity property, and should work in all browsers that support the opacity property, too.
Only way is with positioning. Here is a great article from CSS Tricks: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
Use position: relative; and a top value to make elements over one another.
If you are just trying to make a background transparent then you can use the rgba() value in your background.
Edit:
Here is a crazy idea. You could use PHP GD to render a image with a gray backround(making transparent) with white text that you want to display in the correct position. Then use a mask-box-image or mask-image CSS property and set it to the rendered image.
If of course your content is not dynamic then you could make the image in Photoshop/whatever program.
Anti-aliasing would not be the same from the browser to the GD render but is the best hack if you do not want to use positioning.
Add the following code in your css
z-index:111
it works.
I am using ExtJS textarea and trying to remove the border and background image for the textarea. I am able to remove the border for the textarea, but unable to remove the default background-image.
The component in fact is not taking the background I have set in fieldStyle. When I inspect the element in firebug after the textarea is rendered, I don't see the background in the style.
var textArea=Ext.create('Ext.form.field.TextArea', {
width:200,
fieldStyle:'border:none;background:#FFF !important;width:120px;'
}
How do I override the background and width only for the field?
Thanks
Remember that, besides adding the "!important" directive, your stylesheet must be the last one to be loaded, the "cascading concept", so your rule would be the one to be read.
after the CSS rules loaded for extjs, yours must come after.
Hope this helps.
change to background-color:#FFF !important.
I want to use iconography in a web UI, while retaining the context language of what clicking on the link will achieve, but possibly not displaying the text and crowding UI space. For example using CRUD screens, I want to display a plus icon for adding an item, a minus icon for deleting, it, a pencil icon for editing it, and a magnifying glass to search for a different item. There are a couple of ways to achieve this.
Render an img element inside of the anchor. The img alt attribute will describe what the icon represents (alt="pencil icon"), and the title attribute will describe the intended consequence (i.e. "Click here to edit this widget").
Render an anchor tag only, and use css to display the image as a background. In this case, the anchor's content should describe the intended consequence, however it needs to be wrapped in a span element so that its display style can be set to none. The anchor should also contain a title attribute matching the content (without a surrounding span of course).
It seems to me like option #2 is easier to implement in an asp.net mvc app. Since the icon is a design concern and not a markup concern, it makes sense to define the image in CSS. It also makes things easier from a code maintenance perspective... changing the img src location would only necessitate changes in the CSS file and no view files. Removing the CSS would cause the application to fall back to full text accessibility too.
What smells funny to me is the part about nesting the link content into a span so that it can have disply: none; set in the css. Another thing is, if I use the :hover selector to swap the image and provide a rollover / rollout effect, the images seem to take longer to swap out than when done with javascript.
Am I missing anything here?
We frequently use option #2, but in a different fashion. Instead of wrapping the anchor content in a span, use CSS to style the anchor as display: block or inline-block, then set its text-indent to -1000em (or similar, just pick a big value). I think you also have to set overflow to hidden.
If you do the background image as a sprite (a single image with both the non-hover and hover states in it) and use :hover to reposition the background, you should avoid the flicker/delay that you might be seeing now. That also results in one less separate request hitting your web server.
Note that this also requires explicitly setting the width and height of the anchor in your CSS to match your icon size.
If the icon conveys information that does not duplicate information already in the document, then it should be a real <img>.
However, the alt attribute should contain an alternative to the image, not a description of it.
alt="Edit this widget"
The title attribute should only be used to provide advisory information (think "optional extras") and you should avoid using implementation specific terminology (such as "Click here").
What smells funny to me is the part about nesting the link content into a span so that it can have disply: none; set in the css
If you do go down the route of putting content in background images and hiding real text, at least negative text-indent it out of sight instead of display: noneing it and making it invisible to screen readers.