Powerful New CSS- and JavaScript Techniques

by guestblogger

Since our last round-up of useful CSS techniques, we’ve seen a large amount of truly remarkable CSS geekery out there. With CSS3, a few of the older techniques now have become obsolete, others have established themselves as standards, and lots of techniques are still in the “crazy experimentation” stage.

Since the relieve the previous post, we’ve been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques.

Today we finally present a few of these techniques. Use them right away or save them for future reference.

Please note that lots of techniques usually are not only CSS-based, but additionally use HTML5 and JavaScript. We are going to present useful CSS tools and responsive design methods of separate posts. Please don’t hesitate to comment on this post and let us know how exactly you’re with them inside your workflow. However, please avoid link dropping; share your insight and experience instead, and feel free to hyperlink to techniques that really helped you recently. Thanks to all of the featured designers and developers for their fantastic work!

Table of Contents

  1. CSS Transitions and Animations
  2. Useful and Practical CSS Techniques
  3. CSS Typography and Text Techniques
  4. CSS Navigation Menus and Hover Effects
  5. Visual Techniques With CSS

CSS Transitions And Animations

CSS transitions and animations in many cases are used to make an individual experience a little more smooth and interesting, especially in the event it comes to interactive effects on hover or on click. Designers are tinkering with technology and make sometimes crazy, sometimes practical—but often innovative techniques which you could use to produce your websites just a little little more engaging.

Interactive CSS3 lighting effects
An interesting effect to generate interactive lighting effects with 3-D transforms, CSS gradients and masks; the cast shadow was created using box shadows and transforms.

Interactive CSS3 Lighting Effects

CSS3 dodecahedron
A fancy dodecahedron experiment, created using CSS Transforms and a tiny JavaScript snippet.

CSS3 Dodecahedron

CSS 3D Lighting Engine Photon
Our editor Tom Giannattasio has established a JavaScript library that adds simple lighting effects to DOM elements in 3D space using the WebKitCSSMatrix object. It will be great to have an implementation for other rendering engines as well.

CSS 3D Lighting Engine Photon

3D Thumbnail Hover Effects With CSS
This technique produces 3D thumbnail hover effects with CSS 3D transforms. The code is quite verbose and probably could be optimized, but the result is quite neat.

3D Thumbnail Hover Effects With CSS

Slide In Image Boxes
A technique for creating a “slide in” effect for boxes on hover to create them a little more interactive.

Slide In Image Boxes

CSS3 bitmap graphics
The bitmap graphics is rendered with CSS: no images, no canvas, no data URIs no extra markup. The pixels are drawn with CSS gradients, sized precisely towards the pixel’s boundaries.

Pure CSS3 Bitmap Graphics

Paperfold CSS
A visual folding effect for hidden comments by Felix Niklas. The plugin requires a DOM element, slices it into parts and arranges them like a folded paper in 3-D space.

Paperfold CSS

Beercamp: An Test Out CSS 3D
A CSS 3D popup book á la Dr. Seuss. The website would be a test to find out how far SVG and CSS 3D transforms could be pushed. This is the article about it.

Beercamp: An Try Out CSS 3D

Covers: A JS / CSS Experiment
Now, that’s quite an experiment: what if we combined a music song, stylesheet and beat detector to create animated… covers? Sure, we can take action with CSS3 and JavaScript! Covers does exactly that. The outcome is interesting, exactly what can you do with this particular approach?

Covers: A JS / CSS Experiment

Animation on Apple’s page
John B. Hall explains the CSS animation on Apple’s Web page for that iPhone 4S.

An explanation of the CSS animation on Apple’s iPhone 4S webpage — John B. Hall

Experimental animations for image transitions
A post about experimental 3-D image transitions that use CSS3 animations and jQuery. Only CSS3 transforms are used.

Experimental CSS3 Animations for Image Transitions

Maintaining CSS style states using “infinite” transition delays
This demo allows you to move the character around using the D-pad, and notice the way it always keeps its position after you stop moving. This demo doesn’t use any JavaScript. The effect is made possible by using a virtually infinite transition delay, so that the CSS rules never return to their default state. The figure will be stuck in a transition and will move only when you own down a button.

Maintaining CSS Style States using “Infinite” Transition Delays

CSS 3-D clouds
An experiment in creating 3-D-like clouds with CSS3 transforms along with a little JavaScript.

CSS3D Clouds

Animated popover of profile box
A technique with an animated profile popover menu, built using CSS transitions.

Animated Profile Popover With CSS

CSS3 scrolling effects
A library of various scrolling effects, such as curl, wave, flip, fly, skew and helix, created with CSS3 and sometimes with JavaScript to spice up the scrolling behavior.

CSS3 Scroll Effects

Spin those icons with CSS3
A simple technique for developing a neat effect that spins social icons using the help of your transform and transition when you hover over them. By Tom Kenny.

Scrolling the Z Axis with CSS 3D Transforms
This article explains how you can produce the z-scroll effect step by step.

Useful and Practical CSS Techniques

CSS3 Family Tree
Display organizational data or perhaps a family tree using just CSS, without Flash or JavaScript. The markup is very basic and uses just nested lists. Pseudo-elements are accustomed to draw the connectors. It also has hover effects: hover over a parent or gaurdian element and also the entire lineage is going to be stylized. Make sure to check on Nicolas Gallagher’s Introduction to CSS Pseudo Element Hacks.

CSS3 Family Tree

iOS-style popover
A simple technique for iOS-style custom checkboxes along with a subtle hover effect. The technique can be a bit buggy but a good starting point in the event you will need it. Also, check an excerpt from Lea Verou’s talk on customized checkboxes and her article on rule filtering according to specific selector(s) support.

iOS-style Popover

Timeline-Style Comments
Nicolas Gallagher developed a simple and clean technique to present comments in the timeline-alike overview.

Timeline-Style Comments

CSS Table Grid
Here is really a nice technique for aligning columns inside a table, building a “table grid system” of sorts. The idea would be to apply classes to col elements inside a table’s colgroup; you generally leave one col without a class to ensure that it remains fluid and can “soak up” the results of any breakages elsewhere in the table.

CSS Table Grid

Confirmation Feedback Buttons
This article explains how you can create buttons that take on different states depending about the user’s interaction. This type of interaction is especially useful on links such as “Purchase” and “Delete” for which it’s wise to confirm that an individual indeed wants to adopt the specific action. It looks a lot of like an iTunes button, though.

A calendar in CSS3 and jQuery
A step-by-step tutorial on how to develop a CSS3 calendar with a few jQuery animation. Also, check out David Bushell’s responsive calendar demo.

A clean calendar in CSS3 & jQuery : Finishing Touch

Outdenting properties for debug CSS
Let’s assume you might be experimenting with CSS or debugging code. You add properties to figure out how things fit together. How often do you forget to remove all of them? A simple technique for this really is to mark a CSS property as a temporary or debugging property by outdenting it and putting it at column 0 in the file. A small trick that can save a great deal of time.

Outdenting properties for debug CSS

Show Markup in CSS Comments
Chris Coyier discusses the idea of including the basic markup which you is planning to be styling as a comment at the top your CSS file.

Show Markup in CSS Comments

Selectively displaying data
This technique shows how you can selectively display content in a table and add responsive breakpoints to produce an responsive, complex multi-column table.

Remove Margins for First/Last Elements
If you ever desired to remove the top or left margin from your first element in the container, or the best or bottom margin from your last element in a container, you can do that by using pseudo-selectors :first-child and :last-child.

CSS Diagnostics Stylesheet
A very beneficial snippet to have nearby when you might be debugging your CSS or want to discover mistakes in HTML.

CSS Diagnostics Stylesheet

Radio Buttons With Two-Way Exclusivity
Learn in regards to the :empty pseudo-class selector and jQuery to make certain that when a radio button is clicked, the region is determined and all other radio buttons for the main reason that column are turned off, and then is turned back on when clicked on.

Radio Buttons with 2-Way Exclusivity

Tabbed Navigation With CSS
An elegant tabbed navigation menu with drop-down menus — no JavaScript, of course. Nothing new, but it’s a quite clean solution.

Tabbed Navigation With CSS

Menu With Notification Badges With CSS
A ready-to-use snippet for a navigation menu with notification badges.

Menu with Notification Badges With CSS

Styling based on sibling count (slides)
A fantastic summary of the number of choices for styling depending on sibling count. Also, make sure to click through the rest of the slide deck — valuable and useful techniques. Make sure to watch Lea Verou’s presentation as well.

Styling depending on sibling count (Slides)

Stuff that can be done with all the “Checkbox Hack”
Wiht the “checkbox hack,” you utilize a connected label and checkbox input and usually some other element that you might be wanting to control. Learn what you can perform with it.

CSS3 Facebook Buttons
Nicolas Gallagher presents a group of CSS buttons for Facebook with different colors and icons. You might want to check on Nicolas’ CSS3 Social Sign-In buttons as well as Free Social CSS3 Buttons that individuals released earlier as well.

YouTube Popup Buttons
This article explores the default state of YouTube buttons, which have a very subtle bevel but pop up on :hover and :focus states, eager being clicked.

YouTube Popup Buttons

Centering within the Unknown
When referring to centering things in Web design, the harder information you’ve in regards to the element being centered and its parent element, the more it is. Chris Coyier shows how to complete it when you are doing not know anything.

Centering in the Unknown

Uncle Dave’s Ol’ Padded Box
What if you combined background-size: cover and Thierry Koblentz’ intrinsic ratios. The result’s images and video than maintain their aspect ratio; however you can also employ background-size: cover to affect the aspect ratio and auto-cropping of images with just a little CSS. And the fantastic news is the actual fact that the property is supported in most modern browsers and matches media-query support exactly.

Micro Clearfix: Force Element To Self-Clear its Children
Chris Coyier presents various technique for forcing elements to self-clear its children, including Nicolas Gallagher’s short code snippet from 2011.

Micro Clearfix: Force Element To Self-Clear its Children

Conditional CSS
A clever technique by Jeremy Keith to load additional content conditionally. The idea is the actual fact that once a media query fires, the content around the body element is generated and can be detected by a JavaScript, prompting extra content to be loaded.

* box-sizing: border-box FTW
Once you commence mixing and matching various units in CSS — such as % for the container width, em for padding and px for border — you then run right to the box-model problem since the width of the container doesn’t include padding and border. We can easily solve this using box-sizing: border-box. And the best part: it is even supported in IE 8.

Multiple Attribute Values
How to treat multiple values in attributes instead of classes.

Multiple Attribute Values

Diagonal CSS Sprites
If you create a sprite on a diagonal, there will probably be no components below or for the right of the component you’re showing. This gives you to make the element using the sprite as wide or as tall because it needs to be, without worrying about exposing the next component. Also, check out David Storey’s article on CSS sprites for your moder era.

Double Click in CSS
Is there a approach to detect whether a hyperlink is tapped or double-clicked on mobile devices? In fact, we can. However, the code requires some hardcore CSS nerdery. Also, check Pure CSS Clickable Events Without :target by Ryan Collins.

Replacing the -9999px hack (new image replacement)
In the start was FIR (Fahrner image replacement). Scott Kellum, design director at Treesaver, has now developed this refactored code for hiding text.

Replacing the -9999px hack (new image replacement)

Fighting the Space Between Inline Block Elements
A number of inline-block elements formatted like you would normally format HTML will have spaces between them. But we often want the elements to butt up against each other, thus avoiding in the case of navigation) those awkward little unclickable gaps. How do you solve it? Chris Coyier has found a couple of solutions.

CSS pointer-events plus a pure CSS3 animating tooltip
The pointer-events property allows one to specifiy how the mouse interacts with all the element it is touching. See everything you can do with it and what to consider when working with them.

Anatomy of the mobile-first responsive Web design
An excellent article by Brad Frost about the different considerations for responsive designs. How do you start? What features could you implement and how? What about advanced optimization such as LocalStorage or AppCache? This article present an excellent guide for getting started with future-friendly responsive designs.

SouthStreet Progressive Enhancement Workflow
A fantastic article by Scott Jehl and Filament Group by which they present a pair of tools that form the core of an advanced responsive design workflow. Definitely useful to help keep in mind for your next responsive design project.

Typography And Text With CSS

Advanced CSS techniques provide us with remarkable options to style text in completely different ways. Not only will we increase the risk for typography look sharper and exquisite on the Web with tools such as Lettering.js, Kerning.js and FitText; we can also play with glyphs, line breaks, font sizing, truncating text and styling lists. The typography can be adjusted and improved with merely a number of practical approaches.

Interactive Typography effects with HTML5
This techniques uses canvas and JavaScript to create ab interactive typography effect. Users can interact using the glyphs so that as designer you can define forms or shapes of the phrase you’d like to present and how you’d like them to change on hover. Fancy!

Interactive Typography Effects with HTML5

Rocking letters with CSS3 and jQuery
A simple animation of letters with CSS3 and jQuery.

With Rocking Letters in to the New Year

CSS 3D Typography
What about integrating stripes into glyphs and adjust the shadow on hover? This technique uses just that, developing a nice, subtle yet engaging visual effect. You can discover more interesting type experiments in CSS3type Showcase.

cssandtype.com, gallery of css text effects

cssandtype.com, gallery of css text effects

CSS3 animation and masking text
Chandler Van De Water had a challenge for Trent Walton after looking at the header animation in his “CSS3 in Transition” post. Noticing he used a PNG image file with knockout transparency, he wished to do exactly the same CSS animation with selectable text. Trent was pleased to oblige! At the moment, this works only in Safari and Chrome.

CSS3 Animations and Masking Text

CSS mask-image and text
Trent Walton uses background-clip: text and mask-image to implement a subtle gray-flecked texture effect over white text. Hover over the box to see the way it degrades in unsupported browsers. Make sure to check on out Lea Verou’s “Text Masking: The Standards Way” as well.

CSS Mask-Image & Text

Fake bolding of Web fonts
Most browsers simulate bold weights for fonts that do not actually have bold weights. For example, Helvetica Neue Light does not possess a bold weight. If you used font-weight: bold with it, browsers would artificially create a bold weight. This article explains how to avoid fake bolding of Web fonts within your designs. By Divya Manian.

Fake Bolding of Web Fonts

Tomorrow’s Web type today: Say it With a Swash
The excellent series “Tomorrow’s Web type today” by Elliot Jay Stocks provides insights into what will be possible with Web typography soon, e.g. swashes. In fact, you can already make use of them today in the event you include a swash subset of the font to achieve the specified effect.

OpenType Swashes

Internationalization Language CSS
A very handy CSS nippet with language-specific quotes. Perfect for international, multilingual projects.

Internationalization Language CSS

Experiments with background-clip: text
With the CSS property background-clip: text, we could add a background image to a text element.

Experiments with background-clip: text

A Call for ::nth-everything
With CSS3, we now have positional pseudo-class selectors to help us decide on a particular element when it has no distinguishing characteristics apart from where it is within the DOM in regards to its siblings.

A Call for ::nth-everything

Smooth font using the text-shadow property
A common problem: will there be an easy method smooth the look off glyphs on older machines, especially Windows XP (standard / ClearType rendering mode)? Yes, perhaps. You can offer a try the text-shadow-property which adds text-shadow around the top-left and the bottom-right to smooth text.

Smooth font using CSS3 text-shadow property

Fluid Type
Trent Walton explains his approach to fluid typography by which he asks himself how we can make certain that browser width and typographic settings such as measure or font-size and the way should we handle panoramic viewports? An interesting article, especially if you work with a typography-out approach in your designs.

Fluid Type

Pragmatic, practical font sizing in CSS
Harry Roberts shares his thoughts on how to size fonts more efficiently, writing your CSS differently within the process.

Automatic line breaks with CSS3 hyphens and word-wrap
Roger Johansson shows the way to solve a common problem: as columns of text become narrower, the risk of the single word being longer than the column’s width increases. When that happens, the writing normally extends beyond the column. Luckily, CSS offers two properties to boost the situation: word-wrap and hyphens.

Molten leading (or fluid line height)
When a responsive composition meets a viewport, you can find different methods to fill space. Adjusting any one element without also adjusting others is a recipe for uncomfortable reading, which can be one reason why designers have this kind of difficult time with fluid Web layouts. Tim Brown started a discussion concerning this issue and provides a couple of techniques for opimization.

Molten leading (or, fluid line-height)

Prevent Long URL’s From Breaking Out of Container
Another snippet by Chris Coyier for keeping long URLs within the container. word-wrap, word-break and hyphens properties in use. Also, learn how to Prevent Superscripts and Subscripts from Affecting Line-Height.

Viewport-sized typography
This technique uses new CSS values for sizing elements relative towards the viewport’s current size: vw, vh and vmin. This allows you to couple the dimensions of, say, a typographic heading for the available screen space. Browser support is quite poor for now, so if you are looking with an alternative, check out FitText.js.

Viewport Sized Typography

Minimum paragraph widths in fluid layouts
This article shows how to solve the problem of paragraphs that are too narrow, by implementing a minimum paragraph width. If the space left a the floating image is under this width, then your whole paragraph moves below the image.

Styling ordered list numbers
Roger Johansson shows how we could style ordered list numbers using the :before pseudo element, which can have a counter as a value through the content property. Also check out Chris Coyier’s post and Louis Lazaris’ CSS Counters: counter-increment and friends.

Styling ordered list numbers

Reverse ordered lists in HTML5
The reverse attribute allows one to write a descending list of numbered items. Louis Lazaris summarizes what it really does and provides a solution to obtain around a insufficient browser support for this attribute.

Reverse Ordered Lists in HTML5

Preserving white space with CSS3 tab size
By default, HTML pages ignore anything a lot more than a single space and collapses them. But there are occasions when you’ll want to preserve this space via one of several possible techniques.

Truncating text using only CSS
This code snippet can be used to shorten a line of text using nothing but CSS.

New CSS3 properties to handle text and word wrapping
Louis Lazaris explains the number of choices and problems of text-wrap, overflow-wrap, line-break and word-break, text-overflow and hyphens. Also worth reading: Kenneth Auchenberg discusses the choices for word wrapping and hyphenation in combination with dynamic width elements.

End Articles with Ivy Leaf
A clever technique for adding an extra touch towards the end of your articles. :last-child, :after and content in use.

We are used to classical navigation patterns such as tabbed navigation or drop-downs, but we could perform a lot more to spice up our navigation menus with pleasant hover effects, often without extra images. Especially if you’d like to add a little more polish to your portfolio, gallery or e-commerce website, these techniques could be very useful. What about “over-the top” hover effect for the links,

Circle Navigation Effect With CSS3
A bubble-like thumbnail preview for your navigation with CSS3.

Circle Navigation Effect with CSS3

Create a CSS3 Image Gallery With a 3D Lightbox Animation
Tom Kenny has extended a CSS lightbox gallery with the addition of several hover effects to the gallery grid itself plus a 3D rotation towards the lightbox content, all with CSS.

Create a CSS3 Image Gallery using a 3D Lightbox Animation – Inspect Element

3D Gallery With CSS3 and jQuery
This article shares an experimental gallery that uses CSS 3D transforms. The idea is always to develop a circular gallery having an image inside the center and a couple about the sides. Because perspective is being used, both lateral images will appear three dimensional when rotated.

3D Gallery with CSS3 and jQuery

Creative CSS3 animation menus
Mary Lou presents a couple of creative navigation menu hover effects. The idea is to possess a simple composition of elements, an icon, a main title plus a secondary title that will be animated on hover using only CSS transitions and animations.

Creative CSS3 Animation Menus

How to spice up your menu with CSS3
Yes, another technique by Tympanus: this tip shows the way to spice up a menu with the addition of a neat hover effect to it. The idea would be to slide an image out to the right if the menu item is hovered over.

How to spice up your menu with CSS3

Create a zoomable user interface
David DeSandro reveals how you can use CSS transforms to create a zoomable user interface much like that relating to Beercamp 2011. In this tutorial, you’ll also learn how to use JavaScript to hijack scrolling to manipulate the zoom.

Create a zoomable user interface with CSS3

Flipboard Navigation
An experimental page layout inspired by Flipboard’s interface.

Flipboard Page Layout

Multi-direction hover
This element shows different hover effects when hovering from different directions.

Multi-direction hover

Experimental Hover Effects
Original and innovative hover effects discovered via Twitter about what appears being a Japanese code sharing website.

Share JavaScript, HTML5 and CSS

Over-the-top hover effect
A CSS and JavaScript technique for creating an “over-the-top” hover effect using the transform-origin transform-style properties as well as 3-D transforms.

Accordion With CSS3
Mary Lou experiments with all the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, she creates an accordion that animates the content areas on opening and closing.

Accordion with CSS3

Expanding Text Areas Made Elegant
An expanding text area can be a sensible choice once you don’t know how much text the consumer will write and you need to keep your layout compact. In this article, Neil Jenkins explains how to accomplish this simply. Also, you may want to take a take a peek at Textarea Auto Resize, another technique by Louis Lazaris, utilizing a hidden clone element.

Filter Functionality With CSS3
Using the typical sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a box or radio button. This tutorial explores those CSS3 properties by developing a experimental portfolio filter that toggles the states of things of the specific type.

Filter Functionality with CSS3

An accessible, keyboard-friendly custom select menu
A new approach for further accessibility by Roger Johansson. He styles just the select element.

Visual Techniques with CSS

We used to heavily on images and visual elements to generate basic visual effects on the Web. With CSS3, we could not only improved the loading speed of the content, but in addition make our visual elements more flexible and adaptive. Let’s take a look on a number of examples of how we can achieve that.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
Tom Kenny shows how to produce a simple “stacked” look to a group of images.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements – Inspect Element

CSS3 Unfold Map with Pins
A handy snippet for placing pins on a map. The code looks a bit verbose, so you might want to remove a handful of visual “nice-to-have” elements.

CSS3 Unfold Map with Pins

Turn Images Into Postage Stamps With CSS3 border-image
Dudley Storey shows a simple method to create a postage stamp from a simple image with border-image.

Turn Images Into Postage Stamps With CSS3 border-image

Slopy elements with CSS3
Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. This tutorial shows some simple examples and ways the way to create slopy, skewed elements with only CSS.

Slopy Elements with CSS3

CSS Flip Clock
A code snippet for displaying a flip clock-alike time display using CSS.

CSS Flip Clock

CSS3 Image Styles
When applying a CSS3 inset box-shadow or border-radius directly to a image element, the browser won’t render the CSS style perfectly. Here’s a simple tutorial on the way to use jQuery to make perfect rounded corner images dynamically. And check out the second part.

CSS3 Image Styles – Part 2

Creating Reusable and Versatile Background Patterns
A simple tutorial on how to create reusable background patterns with Photoshop and CSS.

Creating Reusable & Versatile Background Patterns

Diagonal Graph Paper Gradient
A good CSS technique for creating diagonal graph paper gradients using repeating-linear-gradient property in CSS.

Diagonal Graph Paper Gradient

Tucked Corner Effect
A clean CSS technique for producing tucked corners using the pseudo-elements :after and :before as well as data URI-coded images. Also, check out Corner Ribbon Effect with CSS.

CSS Tucked Corner Effect

Scrolling… shadows!
An original technique by Roman Komarov to create CSS-only shadow-scrolling effect using background-attachment: local. Developed by Lea Verou, inspired by Roman Komarov.

Scrolling shadows

Multi-colored CSS progress bars
A quite verbose yet CSS-only solution for displaying multi-colored progress bars. It’s linear-gradient in action! Also, check out CSS3 progress bars that display data inside localized leaderboards for that new analytics platform at G5. They are lightweight and require no JavaScript or images.

Multi-colored CSS Progress Bars

CSS3 breadcrumbs
Learn how to create your own cool CSS3 breadcrumbs. Also, check the CSS Breadcrumbs Example which uses only CSS linear gradients.

CSS3 breadcrumbs

Adobe-like Arrow Headers
A detailed article in regards to the technique Adobe uses to generate header bars for modules on its website.

Adobe-like Arrow Headers

Adding a Top Shadow to a website
If you ever wanted to add a shadow across the top fringe of the website, you can certainly do it by styling body:before.

Adding a Top Shadow to a website

A flexible shadow with background-size
It’s amazing that which you can achieve once you combine different techniques—even when facing a challenge such as a flexible shadow. If you had to create an adaptive shadow effect, how would you create it?

Star Ratings With very Little CSS
Chris Coyier shows the way to code star ratings done with almost no CSS code and lots of your bit of Unicode madness.

Convert Images to Grayscale With CSS
Filters allow us to visually process a graphic inside the browser without needing to proceed through PhotoShop or use cycle-intensive, script-heavy methods in JavaScript or PHP. CSS3 filters are broadly supported inside the most recent versions of Firefox and Chrome, and we can gain support in older versions and alternative browsers — even IE — by employing a mixture of techniques.

Punching Holes With CSS
A clever and simple technique to create a block inside a container appear transparent and display a background image. Also, have a examine Lea Verou’s accessible star rating widget with CSS.

Simple Styles for Horizontal Rules
With the help of your few contributors, Chris Coyier put together this page of simple styles for horizontal rules.

Simple Styles for Horizontal Rules

Optimizing Graphics With CSS Masks
In this video, Aaron Bushnell shows how CSS masks can help increase the risk for process easier on you together with how to produce sure you have fallbacks in position for non-Webkit browsers.

Browser-Specific CSS Hacks
A useful, comprehensive set of browser-specific CSS hacks for targeting legacy browsers. Unfortunately, most folks will require them quite often.

Last Click

CSS3 Lasers!
Shows a laser shot effect when hovering over an element.

CSS3 Lasers!

The DOM Tree
This DOM tree is generated via JavaScript each and each time you visit the page, so you’ll never start to see the same one twice. All of the forms are filled with holiday greetings in the variety of languages. CSS3 3D transforms are used to position and rotate, via translate3d() and rotate3d() respectively, the elements when the page loads. The infinitely looping rotation on the tree is controlled by an infinitely looping CSS3 animation. Just one word: crazy!

DOM Tree

What’s Your Favourite Technique?

We’d love to know your experience with a number of the featured techniques, or perhaps you’ve stumbled upon another interesting CSS technique recently? Let us know inside the comments to this post!

What kind of techniques can you like to see featured on SmashingMag?

Comments on this entry are closed.

Previous post:

Next post: