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.
Table of Contents
- CSS Transitions and Animations
- Useful and Practical CSS Techniques
- CSS Typography and Text Techniques
- CSS Navigation Menus and Hover Effects
- 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.
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.
Slide In Image Boxes
A technique for creating a “slide in” effect for boxes on hover to create them a little more interactive.
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.
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.
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.
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.
Experimental animations for image transitions
A post about experimental 3-D image transitions that use CSS3 animations and jQuery. Only CSS3 transforms are used.
Maintaining CSS style states using “infinite” transition delays
CSS 3-D clouds
Animated popover of profile box
A technique with an animated profile popover menu, built using CSS transitions.
CSS3 scrolling 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
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.
Nicolas Gallagher developed a simple and clean technique to present comments in the timeline-alike overview.
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.
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.
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.
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.
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
CSS Diagnostics Stylesheet
A very beneficial snippet to have nearby when you might be debugging your CSS or want to discover mistakes in HTML.
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.
Tabbed Navigation With CSS
Menu With Notification Badges With CSS
A ready-to-use snippet for a navigation menu with notification badges.
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.
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
:focus states, eager being clicked.
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.
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.
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
* 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.
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.
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
Rocking letters with CSS3 and jQuery
A simple animation of letters with CSS3 and jQuery.
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.
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.
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.
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.
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.
Internationalization Language CSS
A very handy CSS nippet with language-specific quotes. Perfect for international, multilingual projects.
With the CSS property
background-clip: text, we could add a background image to a text element.
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.
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.
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.
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:
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.
Prevent Long URL’s From Breaking Out of Container
Another snippet by Chris Coyier for keeping long URLs within the container.
hyphens properties in use. Also, learn how to Prevent Superscripts and Subscripts from Affecting Line-Height.
This technique uses new CSS values for sizing elements relative towards the viewport’s current size:
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.
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.
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.
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.
content in use.
Hover Effects and Navigation Menus with CSS
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.
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.
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.
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.
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.
Create a zoomable user interface
An experimental page layout inspired by Flipboard’s interface.
This element shows different hover effects when hovering from different directions.
Experimental Hover Effects
Original and innovative hover effects discovered via Twitter about what appears being a Japanese code sharing website.
Over-the-top hover effect
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.
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.
An accessible, keyboard-friendly custom select menu
A new approach for further accessibility by Roger Johansson. He styles just the
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.
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.
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
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.
CSS Flip Clock
A code snippet for displaying a flip clock-alike time display using CSS.
CSS3 Image Styles
When applying a CSS3 inset
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.
Creating Reusable and Versatile Background Patterns
A simple tutorial on how to create reusable background patterns with Photoshop and CSS.
Diagonal Graph Paper Gradient
A good CSS technique for creating diagonal graph paper gradients using
repeating-linear-gradient property in CSS.
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.
Multi-colored CSS progress bars
A quite verbose yet CSS-only solution for displaying multi-colored progress bars. It’s
Adobe-like Arrow Headers
A detailed article in regards to the technique Adobe uses to generate header bars for modules on its website.
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
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
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.
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.
Shows a laser shot effect when hovering over an element.
The DOM Tree
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!
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!