Powerful New CSS- and JavaScript Techniques

Since our end round-up of useful CSS techniques, we’ve seen a lot of genuinely remarkable CSS geekery out at hand. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still within the “crazy experimentation” stage.

Since the release of the previous post, we’ve been collecting, operation, filtering and preparing a compact overview of powerful new CSS techniques. Today we finally present some of these techniques. Operation them right away or save them for impending reference.

Please note that many techniques are not only CSS-based, but as well use HTML5 and JavaScript. We’re going to present dexterous CSS tools and responsive design techniques in separate posts. Please don’t hesitate to comment on this post and let us know however exactly you are using them in your workflow. However, please go around link dropping; share your insight and experience instead, and feel free to link to techniques that really helped you recently. Thanks to every of the featured designers and developers for their fantastic work!

Array of Contents

CSS Transitions And Animations

CSS transitions and animations are ofttimes wont to make the user experience a little more smooth and interesting, especially when it comes to interactive effects on hover or on click. Designers are experimenting with technology and create sometimes potty, sometimes practical—but often innovative techniques which you could use to make your websites just a small bit more engaging.

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

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

CSS 3D Lighting Engine PhotonOur editor Tom Giannattasio has created a JavaScript library that adds simple lighting effects to DOM weather in 3D space using the WebKitCSSMatrix object. It would be great to have AN implementation all for other rendering engines As well.

3D Thumbnail Hover Effects With CSSThis technique produces 3D thumbnail hover effects near CSS 3D transforms. The code is quite prolix and probably could Be optimized, but the effect is quite neat.

Slide In Image BoxesA technique for creating a “slide in” event for boxes against hover to make them a bit more interactive.

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

Paperfold CSS
A optical foldable upshot for hidden comments by Felix Niklas. The plugin takes a DOM element, slices it into parts and arranges them like a folded-up newspaper in 3-D space.

Beercamp: An Experiment With CSS 3D
A CSS 3D popup pamphlet á metal Dr. Seuss. The website was a try-out to seat how far SVG and CSS 3D transforms could be short of. This is the article roughly it.

Covers: A JS / CSS ExperimentNow, that’s quite experiment: what if we combined a music song, stylesheet and beat device to create animated… covers? Sure, we can cause it near CSS3 and JavaScript! Covers does precisely that. The result is interesting, what can you do beside this approach?

Maintaining CSS style states using “infinite” transition delays
This demo allows you to move the traits around with the D-pad, and notice how 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 evasion state. The digit will be stuck in a transition and will move only once you keep back a button.

CSS 3-D clouds
AN experiment within creating 3-D-like clouds next to CSS3 transforms and a bit of JavaScript.

Effective and Practical CSS Techniques

CSS3 Family Tree
Display organizational data or a people tree using simply CSS, in need Second or JavaScript. The markup is very simple and uses just nested lists. Pseudo-elements are used to draw the connectors. It too has vibrate effects: hover over a parent element and the entire lineage will be stylized. Warrant to check Nicolas Gallagher’s Introduction to CSS Pseudo Feature Hacks.

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

CSS Table Grid
Here’s a nice technique all for aligning columns in a table, edifice a “table grid system” of sorts. The idea is to apply classes to col elements within a table’s colgroup; you ever leave one notch without a class so that it remains fluid and can “soak up” the effects of any breakages elsewhere in the table.

Confirmation Feedback Buttons
This piece explains however to create buttons that take on different states depending on the user’s interaction. This type of interaction is especially useful on links such as “Purchase” and “Delete” all for which it’s wise to confirm that the mortal so wants to take the specific action. It looks too much like an iTunes button, though.

Outdenting properties for right CSS
Let’s assume you are experimenting near CSS or debugging code. You add properties to figure out how things fit both. How often do you bury to remove all of them? A simple technique for this is to dot a CSS property as a temporary or debugging property by outdenting it and putting it at column 0 within the file. A small trick that can save a lot of time.

Show Markup in CSS Comments
Chris Coyier discusses the idea of including the basic markup that you will be styling element a comment at the topmost of your CSS data file.

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

Remove Margins for First/Last ElementsIf you ever wanted to remove the top OR left margin from the first element within a carrier, OR the right or bottom margin from the end element in a container, you can do this past using pseudo-selectors :first-child and :last-child.

Radio Buttons Next to Two-Way Exclusivity
Learn about the :empty pseudo-class selector and jQuery to ensure that when a radio button is clicked, the area is determined and all other radio buttons within that column are turned off, and after is turned back on when clicked on.

Stuff you can do with the “Checkbox Hack”
Wiht the “checkbox hack,” you use a connected label and checkbox input and usually some other section that you are trying to control. Learn what you can do with it.

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

Centering in the Unknown
When it comes to centering things in Web design, the more information you enjoy about the part being centered and its parent element, the easier it is. Chris Coyier shows however to do it when you act upon not know anything.

Uncle Dave’s Ol’ Padded Box
What if you conjunct background-size: cover and Thierry Koblentz’ intrinsic ratios. The result is similes and video than maintain their aspect ratio; simply you can too use background-size: coat to change the feature ratio and auto-cropping of images with just a little CSS. And the great tidings is that the wealth is supported within all contemporary browsers and matches media-query support exactly.

Conditional CSS
A clever technique by Jeremy Keith to load extra content conditionally. The idea is that once a media query fires, the contented on the body element is generated and can metal detected by a JavaScript, prompting extra smug to metal loaded.

* { box-sizing: border-box } FTW
Once you start mixing and congruent various units within CSS — such as % for the container width, em for padding and px all for border — then you run right into the box-model problem because the width of the container doesn’t include artifact and outside. We can easily solve this using box-sizing: border-box. And the top part: it is even supported in ID EST 8.

Fighting the Space Between Inline Block Elements
A ordering of inline-block weather formatted like you would commonly format HTML will have spaces between them. But we often want the elements to butt up against each separate, so avoiding in the luggage of navigation) those awkward weensy unclickable gaps. How do you lick it? Chris Coyier has found a couple of solutions.

Anatomy of a mobile-first responsive Web design
AN excellent article with Brad Frost active the different considerations for responsive designs. However do you start? What features would you implement and how? What about advanced optimization such LocalStorage or AppCache? This article organize an excellent guide for getting started with future-friendly responsive designs.

SouthStreet Progressive Enhancement WorkflowA fantastic article by Scott Jehl and Strand Circle in which they donation a set of tools that form the heart of an advanced responsive design workflow. Definitely efficient to keep in mind for your next responsive design project.

Typography And Matter With CSS

Advanced CSS techniques provide US with remarkable options to style text within very contrary ways. Not only can we make the typography face sharper and beautiful on the Web with tools as Lettering.js, Kerning.js and FitText; we can also play beside glyphs, dash breaks, font sizing, truncating text and styling lists. The typography can be adjusted and improved with just a couple of practical approaches.

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

CSS 3D Typography
What about integrating stripes into glyphs and adjust the shadiness against hover? This method uses just that, creating a nice, faint up to now engaging visual result. You can insight more interesting brand experiments in CSS3type Showcase.

CSS3 life and masking text
Chandler Van DE Water had a challenge for Trent Walton after seeing the header animation in his “CSS3 within Transition” post. Noticing that he used a PNG emblem file next to knockout transparency, he wanted to do the same CSS animation with selectable essay. Trent was bullish to compel! At the moment, this works only in Campaign and Chromium.

Fake bolding of Pattern fonts
Most browsers simulate bold weights for fonts that dont actually have bold weights. For paradigm, Helvetica Neue Light does not have a bold weight. If you used font-weight: bold with it, browsers would artificially create a reckless cargo. This article explains how to avoid sham bolding of Web fonts in your designs. By Divya Manian.

Tomorrow’s Web type today: Say it With a WaveThe excellent series “Tomorrow’s Web type today” by Elliot Jay Stocks provides insights into what will be realistic beside Web typography soon, e.g. swashes. In certainty, you can already use them present if you include a swash subset of a typeset to achieve the desired result.

A Call for ::nth-everything
Next to CSS3, we have positional pseudo-class selectors to help us select a particular element when it has no distinguishing characteristics other than where it is in the DOM within relation to its siblings.

Smooth font using the text-shadow property
A common problem: is there a way smooth the appearance of glyphs on older machines, particularly Windows XP (standard / ClearType rendering way)? Yes, perhaps. You can give a try the text-shadow-property which adds text-shadow on the top-left and the bottom-right to smooth text.

Fluid TypeRiver Composer explains his approach to fluid typography within which he asks himself how we have the ability to get sure that browser extent and typographic settings such as method or font-size and how should we handle panoramic viewports? An interesting piece, especially if you use a typography-out waylay in your designs.

Planned line breaks beside CSS3 hyphens and word-wrap
Roger Johansson shows however to solve a common problem: as columns of text become narrower, the risk of a single word being longer than the column’s span increases. When that happens, the text usually extends out of the column. Happily, CSS offers two properties to improve the situation: word-wrap and hyphens.

Molten leading (or fluid line height)
When a responsive composition meets a viewport, within are different ways to fill heavens. Adjusting any ane element without as well adjusting the others is a recipe for uncomfortable reading, which is one reason why designers have such as a difficult time with fluid Trellis layouts. Tim Brown started a discussion about this issue and provides a couple of techniques for opimization.

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

Minimum paragraph widths in fluid layouts
This piece shows how to solve the problem of paragraphs that are as well narrow, by implementing a minimum writing width. Provided the space left a the floating image is little than this width, then the together paragraph moves below the image.

Reverse ordered lists within HTML5
The reverse attribute allows you to write a descending catalogue of numbered items. Louis Lazaris summarizes what it does and offers a solution to get circa a lack of browser crutch all for this construct.

Preserving light space with CSS3 bill size
By default, HTML pages ignore anything more than a single space and collapses them. But there are occasions once you’ll want to maintain this space via ane of several possible techniques.

End Articles with Ivy LeafA clever method for adding an excess touch to the stop of your articles. :last-child, :after and content in spend.

Hover Effects and Navigation Menus with CSS

We’re in use to classical navigation patterns such as tabbed navigation or drop-downs, but we can do a lot more to spice up our navigation menus with pleasant hover effects, often without extra images. Particularly provided you’d like to add a bit more polish to your portfolio, audience or e-commerce website, these techniques can be quite useful. What about “over-the top” hover result for your links,

3D Gallery With CSS3 and jQuery
This article shares associate experimental gallery that uses CSS 3D transforms. The idea is to create a circular gallery with associate image in the center and cardinal on the sides. Because perspective is existence used, the two lateral images module appear three dimensional when rotated.

Creative CSS3 animation menus
Mary Lou presents a couple of fictive navigation menu vibrate effects. The idea is to have a simple composition of elements, an icon, a main term and a secondary title that volition be animated by hover using only CSS transitions and animations.

How to spice up your menu with CSS3
Yes, another method by Tympanus: this tip shows how to spice up a carte by adding a neat vibrate effect to it. The idea is to slide an portrait bent the exact when the menu item is hovered over.

Create a zoomable soul interface
David DeSandro reveals how to use CSS transforms to create a zoomable user interface similar to that of Beercamp 2011. In this tutorial, you’ll also larn how to use JavaScript to hijack scrolling to manipulate the zoom.

Experimental Hover Effects
Original and innovative waver effects discovered via Twitter on top of what appears to be a Nipponese code sharing website.

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 also as 3-D transforms.

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

Expanding Text Areas Made Exquisite
AN expanding text area is a good prize when you don’t know how some text the mortal will write and you want to keep the layout serried. Here article, Neil Jenkins explains how to do this simply. Also, you could want to take a facade at Textarea Machine Resize, different technique by Louis Lazaris, using a hidden clone element.

Device Functionality With CSS3
Using the general sibling combinator and the :checked pseudo-class, we have the ability to statement says of other elements by checking a box or energy button. This tutorial explores those CSS3 properties by creating a experimental portfolio filter that toggles the states of items of a specific type.

Optical Techniques with CSS

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

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

CSS3 Dummy Styles
Once applying a CSS3 inset box-shadow or border-radius directly to an image element, the browser won’t render the CSS style perfectly. Here’s a snatched tutorial on how to use jQuery to form perfect rounded corner images dynamically. And check down the second part.

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

Convert Similes to Black And White With CSS
Filters allow us to visually process an image within the browser without needing to go through PhotoShop or use cycle-intensive, script-heavy methods in JavaScript or PHP. CSS3 filters are broadly supported within the most recent versions of Firefox and Chrome, and we can gain support in older versions and alternative browsers — even IE — past using a combination of techniques.

Optimizing Graphics With CSS Masks
In this video, Aaron Bushnell shows how CSS masks can help make the process easier on you you bet to make convinced you have fallbacks in situ for non-Webkit browsers.

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

Last Click

The DOM Tree
This DOM tree is generated via JavaScript every time you visit the page, so you’ll never see the same one twice. All of the forms are filled with holiday greetings in a potpourri of languages. CSS3 3D transforms are wont to posting and rotate, via translate3d() and rotate3d() respectively, the elements once the leaf gobs. The infinitely iteration rotation on the tree is controlled via an infinitely looping CSS3 animation. Just one word: silly!

What’s Your Favourite Technique?

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