Do the "::before" and "::after" pseudo elements not work on image elements?
Here's an example I put together...I'm just trying to get a yellow background behind the image here:
http://dabblet.com/gist/3861878
I saw this "answered" (but no other details) in another post, but can't seem to find anything about it elsewhere.
CSS 2.1 spec says:
Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.
http://www.w3.org/TR/CSS21/generate.html
So it it'd be wise to avoid using this. Behavior across the browsers is uncertain and can change in future.
Related
why ::marker pseudo-element not support all CSS properties like other pseudo-elements?
can anyone explain me in brief.
Found out today that ::marker pseudo-element not support all CSS properties like background, display, etc but "font-size", "color", and "content" properties are working like charm.
The CSS Lists specification explains:
NOTE: It is expected that future specifications will extend this list of properties and relax the restriction on which properties can take effect. However at the moment outside marker box layout is not fully defined, so to avoid future compatibility problems only these properties are allowed.
Because this selector selects marker of a list item. Like the buller for example. That means that it allows you only to customize the bullet, not the list itself. Thats why you cant apply properties like display, because you are effecting the marker itself. This can be helpful
As for pseudo-elements :after/:before there are apparently two ways if I want to display image there:
using background-image:url(imgurl.png);
using content:url(imgurl.png);
Are both ways correct and valid? Why should I be using one way over another?
Apparently using the second method you cannot set the picture properties like size. But first method is generaly more taught on internet.
Ideas?
It depends on what your image is, just like the debate between using an <img> tag vs using background-image in your CSS.
If your image is part of your page's content, use content:url(imgurl.png);. Certainly if you want the images to be interactive or to to inform the user's experience while on your page, use content. If your image is just stylistic for your site's visual design, use background-image:url(imgurl.png);
Also, do note that you should use double colons: ::before and ::after. Only IE8 requires the single-colon versions.
In CSS, there are pseudo elements like "before" and "after". That creates virtual elements before or after an element.
Container pseudo element?
Is there a "container" pseudo element?
Problem example 1:
I need to create 15 borders around an element (I know this particular example can be done by using box-shadow).
Problem example 2:
I need to create 15 transparent background colors on top of eachother.
A lot of unnecessary markup
I know that is possible by adding containing divs, but that creates a lot of unnecessary markup.
The old CSS3 Generated and Replaced Content Module had a proposal for an ::outside pseudo-element which seems close to what you describe, but there are no implementations, and the module itself is slated for a rewrite... someday.
In other words, there's currently no way to achieve this using only CSS, and there probably won't be any for a while.
Of course, there are ways to emulate wrapping elements using JavaScript to manipulate the DOM, but that's just about the only way you can achieve this besides hardcoding in the extra markup. Some trivial jQuery methods with respect to the fabled ::outside pseudo-element are described here:
Enable support for CSS3 ::outside pseudoelement
Okay, so this is more of a question that has lots of solutions that are not CSS, but I'm looking for doing this more from a theoretical perspective. I have an application for it, but its not worth coding it out in any other way.
The (Fun) Question
How do you color the text of an element using the text of the element? I have an element, all on it's own, which will contain a hex value for a color, and I want the text to be that color, but I want to do it only using CSS (likely only can be done using CSS 3).
Sample HTML
<div class="color_contents">#0000FF</div>
So, I've tried to use the attr() with no success, but I'm not sure I'm using the right contents (I've tried text, textContent, and innerText to no avail). Doesn't need to be cross-browser, but just a way to accomplish it.
Currently, there is no way to use CSS to access an element's text content, not even with the CSS3 modules available today.
Regarding this:
So, I've tried to use the attr() with no success, but I'm not sure I'm using the right contents (I've tried text, textContent, and innerText to no avail). Doesn't need to be cross-browser, but just a way to accomplish it.
attr() only looks at element attributes (foo="bar"). Since text content isn't an attribute of an HTML element (despite being a member of the corresponding DOM object), you can't query for it using that function.
There isn't a similar function for accessing an element's text content.
You could do something like this. It's a bit hacky, but all CSS
div.color_0000FF:before{
color:#0000FF;
content: "#0000FF";
}
HTML
<div class="color_0000FF"></div>
Example: http://jsfiddle.net/s8vLy/
The content/attr CSS properties can only be used with :before and :after pseudo-elements.
CSS3 will support attr access from other properties, see https://developer.mozilla.org/en/CSS/attr.
However when/if CSS3 attr goes live, you will still not be able to acces the "contents" of a element from CSS, simply because thats not what CSS is designed for.
Bottom line, use javascript :)
What's the best practice to create a checkout (tracking) menu like below in CSS.
How to create this menu without images? e.g. With CSS triangles?
You can use the CSS triangles, as described on CSS-Tricks. Then, apply CSS-gradient to your background. Oh, and there is a slight border-radius needs to be applied on the first (and, probably, last) element.
Unfortunately, as far as I know, you cannot apply CSS-gradients to the triangular part, since its background is actually the color of the border.
And, well, the gradients don't work well across all browsers, so you will have to fallback to a plain image for older versions thereof.
UPDATE:
An, of course, as #BoltClock suggests you could use a single sprite image, accompanied by :before or :after pseudo-elements.
Sample sprite image: