12 Little-Known CSS Facts. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post.
Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file some of these away for later use. 1. The color Property Isn’t Just for Text Let’s start with the easier stuff. The color property is used extensively by every CSS developer. Take a look at the demo below: Notice in the CSS, only one color property is used, on the body element, setting it to yellow.
The alt text displayed on a missing imageThe border on the list elementThe bullet (or marker) on the unordered listThe number marker on the ordered listThe hr element All of this is verified by the spec: 2. From my observations: 3. Client-side full-text search in CSS. Using data- attributes for indexation, and a dynamic stylesheet with a CSS3 selector for search, it is straightforward to implement a client-side full-text search in CSS rather than JavaScript. Here is an example. The Searchable List The Search Code The search is very straightforward: it relies on two well-supported CSS3 selectors (:not() and [attr*=]) and the rewriting of a style rule each time the search input is modified: The advantage of using CSS selectors rather than JavaScript indexOf() for search is speed: you only change one element at each keystroke (the <style> tag) instead of changing all the elements matching the query.
Demo. Single-direction margin declarations. 12 June, 2012 This morning I awoke to find Smashing Magazine had retweeted a tweet I made two months ago about how you should always try and apply margins in one direction only. This, like most rules in web development, is a very general (and breakable) rule. It’s even a rule you can opt not to follow at all, but after receiving a slew of Tweets asking why, I thought I’d write up why it’s a rule I live by, and one I’d recommend to anyone… I’m not sure how I arrived at this rule, but I’m really glad I did and I would likely never ever change it. The basic premise is that you should try and define all your margins in one direction. This means always use margin-bottom to push items down the page, and margin-left to push them across the page.
I’m going to focus mainly on margin-bottom throughout this article as it’s the most obvious to explain, but this can be applied to both directions (top/bottom, right/left). The benefits are, as I see them: Defining vertical rhythm Bosh. Less to think about. A Harder-Working Class. Class is only becoming more important. Focusing on its original definition as an attribute for grouping (or classifying) as well as linking HTML to CSS, recent front-end development practices are emphasizing class as a vessel for structured, modularized style packages. These patterns reduce the need for repetitive declarations that can seriously bloat file sizes, and instil human-readable understanding of how the interface, layout, and aesthetics are constructed.
In the next handful of paragraphs, we will look at how these emerging practices – such as object-oriented CSS and SMACSS – are pushing the relevance of class. We will also explore how HTML and CSS architecture can be further simplified, performance can be boosted, and CSS utility sharpened by combining class with the attribute selector. A primer on attribute selectors While attribute selectors were introduced in the CSS 2 spec, they are still considered rather exotic.
[href=index.html] { } [href^=http] { } Classes are ubiquitous.
CSS Ribbon Menu. Use CSS3 transitions and CSS2 pseudo-elements to create an animated navigation ribbon with minimal markup. February 1, 2012 Browser Support IE8 and IE9 do not support CSS3 transitions, so the hover state will not be animated for those browsers. Otherwise it looks and functions the same, which I think is a very acceptable fallback. The HTML <div class='ribbon'><a href='#'><span>Home</span></a><a href='#'><span>About</span></a><a href='#'><span>Services</span></a><a href='#'><span>Contact</span></a></div> The forked ends and folds are created with CSS pseudo-elements, allowing for very clean HTML. The CSS Forked ends Here the :before and :after pseudo-elements are used to create empty elements with a thick border.
Links The links and the forked ends are all floated left so that they fit flush against each other. Animated Folds A nifty trick for vertically centering text inside of an element is to set the line-height to be the desired height of the element, and remove any vertical padding. Hey, Powerful New CSS- and JavaScript-Techniques (2012 Edition) Advertisement Since our last round-up of useful CSS techniques1, we’ve seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage. Since the release of the previous post, we’ve been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques.
Today we finally present some of these techniques. Please note that many techniques are not only CSS-based, but also use HTML5 and JavaScript. Table of Contents CSS Transitions And Animations CSS transitions and animations are often used to make the user experience a bit more smooth and interesting, especially when it comes to interactive effects on hover or on click. CSS3 dodecahedron9 A fancy dodecahedron experiment, created using CSS Transforms and a tiny JavaScript snippet. Beercamp: An Experiment With CSS 3D21 A CSS 3D popup book á la Dr. Simpler CSS typing animation, with the ch unit. A while ago, I posted about how to use steps() as an easing function to create a typing animation that degrades gracefully.
Today I decided to simplify it a bit and make it more flexible, at the cost of browser support. The new version fully works in Firefox 1+ and IE10, since Opera and WebKit don’t support the ch unit and even though IE9 supports it, it doesn’t support CSS animations. To put it simply, one ch unit is equivalent to the width of the zero (0) character of the font. So, in monospace fonts, it’s equivalent to the width of every character, since every character has the same width. In the new version, we don’t need an obscuring span, so no extra HTML and it will work with non-solid backgrounds too. In browsers that support CSS animations, but not the ch unit (such as WebKit based browsers), the animation will still occur, since we included a fallback in ems, but it won’t be 100% perfect. Enjoy: How to adjust an iframe element’s height to fit its content.
In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options. Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Adjust the iframe’s height with JavaScript By using the following piece of JavaScript you can adjust the height of the iframe element to match the height of its content: function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; } } }; The iframe parameter is a reference to the iframe element you want to set the height of.
CSS Lifted corner Drop Shadow. Create an adaptable website layout with CSS3 media queries. Getting started Creating the default layout The first step of this tutorial is obviously to create a HTML page. I chose to make a simple HTML5 page with only a header image, a title, and some text. Copy the following code and paste it into a file named index.html. <! Once done, we have to add a stylesheet to our index.html page. Right now, if you look to your index.html page through your web browser, you’ll see something like the screenshot below. Using CSS3 media queries to make our layout fit in all screen resolutions If you had a look to your index.html page with a screen resolution bigger than 800*600, you might find the layout is really small.
This is what CSS3 media queries can do for you. Now, have a look at index.html again: The layout is indeed bigger. As you can see, there’s nothing complicated at all in implementing this technique. Now that we created a bigger version for bigger screens, what about a very small version for mobiles? Dealing with images Limitations Guess what? Make a Footer Stick to the Bottom of the Page. This CSS footer stylesheet will make a footer stick to the bottom of the page.
CSS Sticky Footer This CSS sticky footer code pushes a website's footer to the bottom of a browser window. It is valid CSS and HTML with no unsavory hacks, so it works in all of the major browsers (even the now defunct IE5 and IE6). View the example CSS Sticky Footer or the HTML5 Sticky Footer. How to use the CSS Sticky Footer on your website Add the following lines of CSS to your stylesheet. Follow this HTML structure. <html> <head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="wrapper"> <p>Your website content here. Multicolumn layout with Sticky Footer Add clear to the .push div Adding margins to elements is messing up the footer. Simply use padding instead, and all your worries will go away. I put this on my site and it doesn't work right in browser X. Check to see if the example CSS Sticky Footer page works in that browser. Having trouble with the Sticky Footer and ASP.NET?
CSS Lint. Galen Gidman. Just over a week ago I announced my CSS3 sticky note experiment and the response was amazing. A huge thanks to everyone that shared them! Today I have a new project to share — CSS progress bars. One of my big goals was to use as little markup as possible — my target was just one element. Although it took some creativity, I was able to pull it off by making extensive use of CSS’s :before and :after psuedo selectors.
I started off with a <div> with a class of progress-bar as my base. I rounded the corners and gave it a partially transparent, black background. To this added a few subtle box-shadows to give it some depth. Next, I set up a few global styles for my :before and :after selectors, setting the content: ''; and giving them the size and position I wanted.
Demo / Download I’d like to shoot a big thank you to Martin Staněk and his CSS3 striped buttons experiment for showing me how to stripe the bars — they wouldn’t have looked nearly as good without them. 30 Exceptional CSS Navigation Techniques. We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS. In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface. 1. The Menu menu This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. 2. View Demo In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on. 3.
View Demo Matte is a simple CSS menu with rounded corners using two small images only from 13styles. 4. View Demo This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item. 5. View Demo 6. View Demo 7. View Demo 8. View Demo Update: this no longer exists. 9. 10. The 30 CSS Selectors you Must Memorize. Rolling a coke can around with pure CSS.
Wednesday, January 27th, 2010 <p>Román Cortés is having a lot of fun with CSS tricks these days. He just built an example rolling CSS coke can that uses background-attachment, background-position, and a few other tricks to get the effect. No fancy CSS3 needed here! The key pieces used: It helps to see the can and the wrapper that is placed around it. [Edit: Fixed the hotlinking - well played Román - he Rick-rolled us] TrackBack URI.