Is it possible to draw lines/shapes (see example) within a :before pseudo-element?
I was thinking about the canvas uses in CSS, but after some research, I came to the conclusion that canvas within pseudo elements is just not possible.
Is there another way?
Related
The CSS transformations spec says transforms only work on block-level or atomic inline-level elements (e.g. inline-block). But why don't they work on inline elements? What is the reasoning behind this limitation?
This test by Microsoft shows it's possible. It passes in IE9, but not in Chrome. So it's possible, just not by the spec.
As #Shikkediel mentioned, inline elements do not have strong boundary like block elements do. They don't influence the flow of the document in the same way, if at all, and are tightly bound to their neighboring text or elements. CSS transforms operate on the bounding box (which inline elements do technically have) in a way that wouldn't really make sense for inline elements.
Consider a <strong> within a <span> (or div). The bold text is defined only by the change in style, but can flow across multiple lines and does not have a predictable rectangular bounding area. If you were to apply a CSS rotation, where would it rotate from? How would it reflow, if at all, while rotating?
On the other hand, the containing <span> does have rectangular bounds, so finding the center and corners, rotating and scaling, are all predictable and well-defined.
As an example, take this fiddle. The background of the inline element is:
but the bounds shown by the editor are:
You can clearly see that the background and the element's bounds do not match at all. Without clear bounds, transforms because difficult and not very useful.
<pseudo> </pseudo> ?
The pseudo-elements of CSS are not in the DOM. But internally they must be equivalent to some kind of generic HTML element, since they can be styled, can be visible, and they affect the page flow.
What is the element type of a pseudo element?
And can we programmatically create them, without using CSS?
Pseudo-elements have no element type as far as the document language is concerned because, as you state, they don't exist in the DOM, and as can be inferred from the "pseudo-" prefix, they're not "real" elements. CSS just calls them pseudo-elements, however you have different pseudo-elements for different purposes or different parts of element structures, such as the self-explanatory ::first-letter and ::first-line, and ::before and ::after for generating content before and after an element's actual content.
That pseudo-elements affect the page flow has nothing to do with the DOM. A browser uses CSS to lay out and format DOM elements into objects that can be rendered to the screen, and in the process of doing so creates pseudo-elements as descendants of boxes that are made for real elements. Although you typically attach a pseudo-element to an element, you're not altering the DOM in any way; instead, you're simply altering how the browser lays out a page.
Because pseudo-elements are a concept unique to CSS (defined in the Selectors module), you cannot create them using anything other than CSS. The implementation of pseudo-elements as a CSS concept is defined in CSSOM instead, which is the CSS equivalent of the DOM (and where methods like window.getComputedStyle() are defined). However I'm not very familiar with the CSSOM, so I can't comment further than that they're implemented very similarly to real elements in terms of CSS.
I'm developing a website using bootstrap and my header is a navbar-inner class.
In some pages I need to put another div of a different class right under navbar-inner and I want it to seamlessly continue to use the same gradient so that the user feels like it is a continuation of the header.
Probably I can find a way to calculate the gradient of the navbar-inner and make another one starting with the ending color of that, but this won't look nice since the height both of the navbar and of the other div change dynamically.
Can anyone suggest a good approach for combining the gradient styling across a dynamic number of div elements?
Thank you
Along the same lines as what #Ana suggested, I think the easiest way is to wrap them together in one element. Rather than nest them, I would wrap them both as siblings in a parent div, which would have the desired styling. That way the gradient and height adjusts automatically, whether or not you include the second div on a given page.
Is it possible to have an iframe in the shape of a hexagon or diamond or anything other than a rectangle or square?
Or possibly even a div?
You could fake it with a CSS mask.
But portions of it will be obscured by it. You can't make the iframe render its contents inside of one of these shapes.
You could set an iframe shape (or, rather, an iframe container shape) to something oval farily easy, however the problem with a diamond/hex shape is that you can't set any html element to render in that shape in the first place.
You could try using a mask as alex suggested.
I think you have to use an image as a mask and then absolute position it
Depending on what browsers you want to support, you can use border radius, transparency, and other tricks to create many shapes in css.
No, it is not. There is no posibilites in HTML standard to do this. You can wrap iframe with DIV and get some effects like rounded corners only
I'm following a tutorial on how to make a CSS ribbon. However the end result only shows a ribbon on one side of a given element. I'm wondering: given the code in the tutorial, is there a way to get it to appear on both sides? Maybe I'm confused by the meaning of :before and :after. Do I need to add a <div> on either side and target both?
You can only have one :before and :after pseudo element per element, so you need to add another wrapper and style that one with opposing characteristics. I've put one together for you here, based on the tutorial you referenced.
To understand better pseudo elements, viewing a previous answer of mine might be helpful.