background preloader


Facebook Twitter

12 Little-Known CSS Facts. CSS is not an overly complex language.

12 Little-Known CSS Facts

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. 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. 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.

Client-side full-text search in CSS

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. 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.

Single-direction margin declarations

This, like most rules in web development, is a very general (and breakable) rule. 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] { }


CSS Ribbon Menu. Use CSS3 transitions and CSS2 pseudo-elements to create an animated navigation ribbon with minimal markup.

CSS Ribbon Menu

February 1, 2012 Browser Support IE8 and IE9 do not support CSS3 transitions, so the hover state will not be animated for those browsers. Powerful New CSS- and JavaScript-Techniques (2012 Edition) Advertisement.

Powerful New CSS- and JavaScript-Techniques (2012 Edition)

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.

Simpler CSS typing animation, with the ch unit

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. 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.

How to adjust an iframe element’s height to fit its content

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.

Create an adaptable website layout with CSS3 media queries

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. 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.

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. 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. 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. 30 Exceptional CSS Navigation Techniques. We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings.

30 Exceptional CSS Navigation Techniques

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. The 30 CSS Selectors you Must Memorize. Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. This tutorial was first published in November, 2010. So you learned the base id, class, and descendant selectors - and then called it a day? If so, you're missing out on an enormous level of flexibility.

While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory. Let's knock the obvious ones out, for the beginners, before we move onto the more advanced selectors. The star symbol will target every single element on the page. The * can also be used with child selectors. This will target every single element that is a child of the #container div. IE6+ Firefox Chrome Safari Opera. 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!