Understanding CSS’s vertical-align Property “Vertical-align isn’t working!” cried the web developer. The vertical-align property is one of those features of CSS that sounds pretty self-explanatory, but can cause problems for CSS beginners. I think even many CSS veterans have had problems figuring this one out at times. In this post, I’ll try to cover it in an understandable manner. What it Does Not Do The common misconception about vertical-align is that, when it’s applied to an element, it will make all the elements inside that element change their vertical position. This reminds me of something we used to do back in the days of table-based layouts: <td valign="top"> Whatever... <td valign="top"> Whatever... In the case of this table cell example, the “valign” property (now obsolete in HTML5) would cause the elements inside of it to get pushed to the top of the table cell. But this is not how vertical-align works. What it Actually Does The vertical-align property can be broken down into three easy-to-understand steps: Why? Some Visuals
Developer Network Tridiv | CSS 3D Editor CSS Layers - CSS tutorial With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the regular page with pixel precision. The advantages of this are obvious - but once again Netscape has very limited support of CSS layers - and to top it off: the limited support it offers is quite often executed with failures. So the real challenge when working with layers is to make them work on Netscape browsers as well. First look at this example: Second look at the code: To create a layer all you need to do is assign the position attribute to your style. The position itself is defined with the top and left properties. Finally, which layer is on top is defined with the z-index attribute. You can either position your layer calculated from the upper left corner(absolute) or calculated from the position where the layer itself is inserted (relative). While the position property indicates the out spring of our coordinate system, the left and top properties defines the exact position of our layer.
Chrome Vous devez être connecté à Google+ pour effectuer cette opération. Le site Google pour les développeurs a besoin de votre autorisation pour effectuer cette opération. Get Into LESS: the Programmable Stylesheet Language I don't like CSS. Plain and simple. It makes the World go round on the web, yet the language is restrictive and hard to manage. It's time to spruce up the language and make it more helpful by using dynamic CSS with the help of LESS. Let me illustrate my point with an example right away. Instead of using #FF9F94 to get a dark peach color, wouldn't it be easier to store that color value inside a variable and just use that variable? In other words: it would be awfully nice if we could use some programming and logic inside CSS to make it a more powerful tool. What Is LESS? LESS is a superset of CSS. LESS adds much needed dynamic properties to CSS. How To Use LESS There are two ways to use LESS. Using The LESS Javascript File First of all head down to the LESS website and grab the Javascript file. Next, create a file with the .less extension and link it to your page with the code below: Make sure that you link your LESS file before the Javascript file. Compiling The LESS File Variables
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do It's pretty amazing what you can do with the pseudo elements :before and :after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will1. Give you multiple background canvases Because you can absolutely position pseudo elements relative to their parent element, you can think of them as two extra layers to play with for every element. Expand the number of shapes you can make with a single element All of the shapes above any many more can be created with a single element, which makes them actually practical. Here's an example of a six-pointed star: Show URL's of links in printed web pages Clear floats Rather than insert extra non-semantic markup to clear the float on container elements, we can use a pseudo element to do that for us.
CSS Content CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page. This is what it looks like: With this CSS in place, we could have this HTML: <ul><li class="email-address">chriscoyier@gmail.com</li></ul> And the output would be like: • Email address: chriscoyier@gmail.com Maybe that example doesn't get you drooling, but pseduo element content can be quite useful and do cool things. Hey! The first concern might be that of a separation-between-content-and-design purist. I think it's awesome and perfectly suited for CSS. I'm going to publish an article tomorrow with this kind of idea. Using Special Characters If you need to use a special character in the CSS content, it's kinda weird. Here's some random useful ones: Example Trick: Checkmark visited links Using Attributes