The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, analyzed, curated and feature latest useful resources for your convenience, so you can use them right away or save them for future reference.
CSS Techniques Link
Generating Organic Randomness with Prime Numbers and CSS3
At first, you may be wondering why the heck is Alex Walker talking about cicada’s and Web design. Once taking a closer look, a sort of connection between the two evolves and a ‘cicada principle’ is born.
CSS3 3D Hologram5
Being inspired by holographic effects that can be achieved with HTML/CSS, Hakim El Hattab has developed his own 3D box which alters perspective depending on device orientation. Note that this requires a webkit browser and has only been tested on iPhone. Also make sure to visit more of Hakim’s CSS/HTML5 experiments6.
Checkerboard, striped & other background patterns with CSS3 gradients8
You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more. Also, check out Lea’s CSS3 Patterns Gallery</a.
Click in the box and start typing on your computer’s keyboard. Cleverly developed by Dustin Cartwright and Dustin Hoffman. You’ve got to respect the amount of time and effort which went into producing this demo.
Hover on “Everything But”14
A tutorial by Chris Coyier which shows us how easy adding a hover state to an element can be. In this case, the hover state is applied to everything but the element actually being hovered over.
Creating a Sphere With 3D CSS16
With CSS3’s 3D transforms it’s possible to create a sphere-like object, albeit with many elements. Paul Hayes shares his version of a 3D CSS sphere (works in the latest Safari and iOS) and provides us with the coding needed.
Natural Object-Rotation with CSS3 3D20
Incrementable Length Values in Text Fields24
Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it.
Beveled Corners & Negative Border-Radius with CSS3 Gradients26
Beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10.
Flexible Height Vertical Centering With CSS, Beyond IE728
Roger Johansson shares his thoughts on how to improve centering an element both horizontally and vertically with the
CSS Border Tricks with Collapsed Boxes32
These border tricks tricks will help you to display content outside of the content box, over borders, without the use of images, CSS3 gradients or extraneous markup.
Quick Tip: Nonintrusive CSS Text Gradients34
Jeffrey Way shows some ways for creating pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.
Different Transitions for Hover On / Hover Off38
Rotating Feature Boxes44
The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation.
When and How to Visually Hide Content46
Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). Other exaples about using the Visually Hide Content are shown in this article.
Introduction to CSS Escape Sequences50
Escape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules. In this article Mert Tol shows how to use these sequences.
CSS Generated Content
Trevor Davis shows on some examples what you can do with the CSS generated content.
Controlling width with CSS3 box-sizing54
An incredibly useful CSS3 feature when you’re creating columns with floats is
box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not. It makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.
Revisit Hardboiled CSS3 Media Queries
Shi Chuan takes a close look at boilerplates and helps us understand the math we need to tweak the width required for a good resolution to any particular device.
iPad Orientation CSS56
Keith Chu revises Cloud Four’s work and finds a way to alleviate extra HTTP requests, not iPad-specific as well as lack of reusability. In this post, he shares with us his proposed revision to the iPad orientation CSS.
CSS Tools Link
320 and up58
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.
CSS Pattern Generator62
Patternify is a simple pattern generator that enables you to not only build your patterns online, but export them with the base64 code, so you don’t even need an image file anymore. Just include the code in your CSS and you’re ready to go. Created by Sacha Greif.
Griddle.it – Web page alignment made easy64
A clean and simple way to help align your layouts. No complex grid frameworks necessary.Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.
Animatable: Create CSS3 animations and advertising for Webkit browsers81
Animatable is the easy way to create CSS3 animations and advertising for Webkit browsers on any platform or device — including Android, BlackBerry, iOS and WebOS.
This is provided without warranty, guarantee, or much in the way of explanation.
Roots WordPress Theme87
Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.
You hate writing vendor prefixes for all browsers? The CSSPrefixer does it for you.
This tool will give your Web typography a head start. Type-a-file is essentially a small collection of CSS stylesheets with heavy focus on rich and beautiful typography. The tool uses Typekit to preview the stylesheets, so if you have a Typekit-account, you could purchase the font license and have exact the same typography on your website.
A Best Practice Baseline for Your Mobile Web App93
Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.
Last Click Link
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.
- 1 http://meyerweb.com/eric/css/tests/css3-trans-an/transform-sliders.html
- 2 http://meyerweb.com/eric/css/tests/css3-trans-an/transform-sliders.html
- 3 http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/
- 4 http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/
- 5 http://hakim.se/experiments/css3-hologram
- 6 http://hakim.se/experiments
- 7 http://hakim.se/experiments/css3-hologram
- 8 http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
- 9 http://leaverou.me/css3patterns/
- 10 http://dl.dropbox.com/u/921159/Keyboard/page.html#
- 11 http://dl.dropbox.com/u/921159/Keyboard/page.html#
- 12 http://css-tricks.com/css3-progress-bars/
- 13 http://css-tricks.com/css3-progress-bars/
- 14 http://css-tricks.com/hover-on-everything-but/
- 15 http://css-tricks.com/hover-on-everything-but/
- 16 http://www.paulrhayes.com/2011-02/creating-a-sphere-with-3d-css/
- 17 http://www.paulrhayes.com/2011-02/creating-a-sphere-with-3d-css/
- 18 http://hacks.mozilla.org/2011/03/css3-planetarium/
- 19 http://hacks.mozilla.org/2011/03/css3-planetarium/
- 20 http://www.eleqtriq.com/2010/11/natural-object-rotation-with-css3-3d/
- 21 http://www.eleqtriq.com/2010/11/natural-object-rotation-with-css3-3d/
- 22 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
- 23 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
- 24 http://leaverou.me/2011/02/incrementable-length-values-in-text-fields/
- 25 http://leaverou.me/2011/02/incrementable-length-values-in-text-fields/
- 26 http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
- 27 http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
- 28 http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/
- 29 http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/
- 30 http://csswizardry.com/2011/03/coding-up-a-semantic-lean-timeline/
- 31 http://csswizardry.com/2011/03/coding-up-a-semantic-lean-timeline/
- 32 http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes
- 33 http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes
- 34 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-nonintrusive-css-text-gradients/
- 35 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-nonintrusive-css-text-gradients/
- 36 http://nimbupani.com/bokeh-with-css3-gradients.html
- 37 http://nimbupani.com/bokeh-with-css3-gradients.html
- 38 http://css-tricks.com/different-transitions-for-hover-on-hover-off/
- 39 http://css-tricks.com/different-transitions-for-hover-on-hover-off/
- 40 http://leaverou.me/2011/01/styling-children-based-on-their-number-with-css3/
- 41 http://leaverou.me/2011/01/styling-children-based-on-their-number-with-css3/
- 42 http://www.paulrhayes.com/2011-03/css-modal/
- 43 http://www.paulrhayes.com/2011-03/css-modal/
- 44 http://css-tricks.com/rotating-feature-boxes/
- 45 http://css-tricks.com/rotating-feature-boxes/
- 46 http://designfestival.com/when-and-how-to-visually-hide-content/
- 47 http://designfestival.com/when-and-how-to-visually-hide-content/
- 48 http://www.netmagazine.com/features/how-avoid-common-css3-mistakes
- 49 http://www.netmagazine.com/features/how-avoid-common-css3-mistakes
- 50 http://www.merttol.com/articles/web/code/introduction-to-css-escape-sequences.html
- 51 http://www.merttol.com/articles/web/code/introduction-to-css-escape-sequences.html
- 52 http://perishablepress.com/press/2010/06/01/wrapping-content/
- 53 http://perishablepress.com/press/2010/06/01/wrapping-content/
- 54 http://www.456bereastreet.com/archive/201104/controlling_width_with_css3_box-sizing/
- 55 http://www.456bereastreet.com/archive/201104/controlling_width_with_css3_box-sizing/
- 56 http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised
- 57 http://www.standardista.com/css3/css-values-lengths-times-frequenc-angles
- 58 http://stuffandnonsense.co.uk/projects/320andup/
- 59 http://stuffandnonsense.co.uk/projects/320andup/
- 60 http://www.css3.me/
- 61 http://www.css3.me/
- 62 http://www.patternify.com/
- 63 http://www.patternify.com/
- 64 http://griddle.it/
- 65 http://griddle.it/
- 66 http://cssgrid.net/
- 67 http://cssgrid.net/
- 68 http://paulirish.com/2009/fighting-the-font-face-fout/#update2011
- 69 http://www.extensis.com/en/WebINK/fout-b-gone/
- 70 http://www.extensis.com/en/WebINK/fout-b-gone/
- 71 http://css3buttons.michaelhenriksen.dk/
- 72 http://css3buttons.michaelhenriksen.dk/
- 73 http://nicolasgallagher.com/lab/css3-facebook-buttons/
- 74 http://nicolasgallagher.com/lab/css3-facebook-buttons/
- 75 http://johndwells.com/software/minimee
- 76 http://johndwells.com/software/minimee
- 77 http://livejs.com/
- 78 http://livejs.com/
- 79 http://markdotto.com/bootstrap/
- 80 http://markdotto.com/bootstrap/
- 81 http://animatable.com/
- 82 http://animatable.com/
- 83 http://matthewlein.com/ceaser/
- 84 http://matthewlein.com/ceaser/
- 85 http://www.csspivot.com/
- 86 http://www.csspivot.com/
- 87 http://www.rootstheme.com/
- 88 http://www.rootstheme.com/
- 89 http://www.sciweavers.org/i2style
- 90 http://www.sciweavers.org/i2style
- 91 http://type-a-file.com/
- 92 http://type-a-file.com/
- 93 http://html5boilerplate.com/mobile/
- 94 http://html5boilerplate.com/mobile/
- 95 http://codebeautifier.com/
- 96 http://codebeautifier.com/
- 97 http://lab.xms.pl/markup-generator/
- 98 http://lab.xms.pl/markup-generator/
- 99 http://spritegen.website-performance.org/
- 100 http://spritegen.website-performance.org/
- 101 https://github.com/scottjehl/Respond
- 102 http://adapt.960.gs/
- 103 http://extralogical.net/projects/firmin/
- 104 http://www.phpied.com/command-line-css-spriting/
- 105 http://stackoverflow.com/questions/2253110/how-to-manage-css-explosion
- 106 http://stackoverflow.com/questions/2253110/how-to-manage-css-explosion
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.