Stylesheets is a community-generated collection of the best CSS resources.
3 days ago
Dealing with long words in CSS | justmarkup
A robust solution for dealing with long words using several CSS rules
css  hyphenation  typography 
9 days ago
Creating Cel Animations With SVG – Smashing Magazine
Interesting article on Smashing Magazine about creating cel animations with SVG & Sass.
css  sass  svg 
19 days ago
» Responsive Images 101, Part 9: Image Breakpoints Cloud Four Blog
Interesting article on image breakpoints for responsive images.
images  responsive 
5 weeks ago
MailChimp Content Style Guide
Content is what makes a web site great. MailChimp shares their Content Style Guide and it’s lovely.
content  styleguide 
5 weeks ago
CSS vs. SVG: Graphical Text Effects : Adobe Dreamweaver Team Blog
CSS vs. SVG: Graphical Text Effects, @SaraSoueidan compares them both to see what’s best.
css  svg 
7 weeks ago
Perfecting a CSS 3D animation , by Miguel Palhas of Subvisual
“A nice little tutorial on how to build a 3D animated atom with CSS. Worth reading”.
animation  css  3D 
10 weeks ago
Art-Directing an SVG Embedded Using <object>
A case study by Sara Soueidan on a art-directed SVG graphic with an accessible fallback.
12 weeks ago
Greedy Navigation
Interesting test case for a responsive design navigation
responsive  navigation 
12 weeks ago
Envato Market Styleguide
Envato Market styleguide collection
june 2015
Making a SVG HTML Burger Button - The Raygun Blog
Cool tutorial to create a SVG HTML Burger Button
animation  svg  css3 
june 2015
Vex – Beautiful, functional, modal dialogs in Javascript
Bookmarked! Vex, a modern UI library for creating beautiful and functional dialogs in Javascript.
javascript  modal  webdesign 
april 2015
Internet Explorer Web Platform Status and Roadmap - status.modern.IE
If you ever wonder what’s supported in which browser, have a look at, it has a great overview of all that.
april 2015
Learn How to Code in HTML5 and CSS3
How to code in HTML5 and CSS3, a free book that explains it all in an understandable manner. Good refresher too.
css3  html5 
april 2015
CSS Flexbox
Curated collection of CSS Flexbox related articles, tips and resources.
css3  flexbox 
april 2015
Interesting typographic tool. Adjust kerning pairs, rag, widows, and more in your web typography.
typography  design  css 
april 2015
SVG Animations Using CSS and Snap.svg
Tutorial that shows how to create SVG animations using CSS and Snap.svg.
svg  animation 
march 2015
Typewolf → A Comprehensive Guide to Smart Quotes, Dashes & Other Typographic Characters
A comprehensive guide to using proper typographic characters, including correct grammatical usage.
cheatsheet  typography 
march 2015
The illusion of life by Jeroen on CodePen
Speaking about animation for the web…The same 12 principles & practical examples.
animation  css 
march 2015
Animation Principles for the Web - CSS Animation
Great article on animation principles for the web, complete with live demos.
animation  css3 
march 2015
Enhancing Responsiveness with Flexbox presentation at RWD Summit
Smart! Using Flexbox as a tool for responsive web design but as a progressive enhancement.
responsive  flexbox  css3 
march 2015
Experiment: Using Flexbox Today - Chris Wright
Extended article with tips, and demos to use Flexbox today.
css  flexbox 
march 2015
Quantity Queries for CSS · An A List Apart Article
Useful technique for responsive design. Quantity Queries for CSS.
responsive  webdesign  navigation 
march 2015
Vintage Logos - an album on Flickr
For inspiration. Vintage logos from a mid-70's edition of the World of Logotypes book.
design  logos  inspiration 
february 2015
Font Loading Revisited with Font Events | Filament Group, Inc., Boston, MA
Interesting research on the ‘best way to load web fonts’ by the @filamentgroup.
css  fonts  performance 
february 2015
Why you should be excited about CSS shapes
Well written and researched article about CSS Shapes.
css  shapes 
february 2015
Printing Medium stories — Designing Medium — Medium
How does Medium handle print stylesheets? Great article with link to the technical details too.
css  print  design 
february 2015
Better SVG Fallback and Art Direction With The <picture> Element
Better SVG fallback and art direction with the <picture> Element. Great article by @SaraSoueidan.
svg  css  html 
february 2015
Aerotwist - FLIP Your Animations
Tip to use a delay trick to make animations smoother. FLIP Your Animations:
animation  css3 
february 2015
Animating pseudo-elements
Animating pseudo-elements. Example to create a shiny button.
animation  css3 
february 2015
Mid-Century Modern Graphic Design
Cool for inspiration! A visual catalogue of the Mid-Century Modern graphic aesthetic.
inspiration  midcentury  design 
february 2015
phanan/htaccess · GitHub
If you ever got a headache from .htaccess this collection of useful snippets might come in handy.
htaccess  apache 
february 2015
Interactive gradient explorer called Shade. Playing with those sliders is addictive :)
css  gradients  tools 
february 2015
Twitter's "fave" animation
Learning to create Twitter's "fave" animation using the CSS animation steps timing function.
animation  css 
february 2015
CSS Reference | Codrops
No doubt this is going to be *the go to resource* for CSS.
css3  reference 
february 2015
Useful SVGO[ptimization] Tools
Useful SVGO[ptimization] Tools summed up by Sara Soueidan.
svg  tools 
january 2015
Strategies for Keeping CSS Specificity Low | CSS-Tricks
Great article by Chris Coyier where here shares strategies for keeping CSS specificity low.
css  specificity 
january 2015
iconic/illustrator-svg-exporter · GitHub
A better way to generate SVGs from Illustrator by @useiconic. Looks interesting.
illustrator  svg 
january 2015 – Little, Big: Using CSS fit-content
Learn to use CSS fit-content for precise element containers. Dudley Storey shows how…
css  layout  design 
january 2015
Auto-Hide Sticky Header — Osvaldas Valutis
Good resource if you need to create an auto-hide sticky header.
css  navigation 
january 2015
Designing For Print With CSS - Smashing Magazine
Very useful article about *Designing For Print With #CSS* by Rachel Andrew on Smashing Magazine.
css  design  print 
january 2015
philipwalton/flexbugs · GitHub
Curated list of Flexbox issues and cross-browser workarounds for them.
css  flexbox 
january 2015
CSS you can get excited about in 2015 | Webdesigner Depot
The favorite new things in CSS that you can get excited about this year according to @rachelandrew.
january 2015
Top Pens of 2014 on CodePen
Lovely overview of the most hearted CodePen’s of 2014. Great for experimenting & learning.
january 2015
CSS Gradient Animator
Bookmarked! A CSS gradient animator by @ginyuforcerules
animation  color  css  gradient 
december 2014
Chris Wright - Experiment: Flexbox Adventures
Great tutorial! Calculating space with Flexbox for navigation items.
css3  flexbox  layout  webdesign 
december 2014
Give ’n’ Go
Interesting place for learning! A curated gallery of @dribbble shots reworked as interactive CodePen pens.
december 2014
SVG Loaders - Sam Herbert
Re-sharing this nice collection of SVG loaders inspired by Google’s material design.
icons  loader  svg 
december 2014
CSS Animated Headlines | CodyHouse
How to create Animated Headlines with CSS transitions.
animation  css  tutorial  webdesign 
december 2014
3D Rotating Navigation in CSS and jQuery | CodyHouse
Nice tutorial that shows you how to create a 3D Rotating Navigation.
navigation  css3  3D 
december 2014 – Big, Beautiful Dropcaps with CSS initial-letter
Big, Beautiful Dropcaps with CSS initial-letter, a tutorial by @dudleystorey. Good accessibility tip in comments too.
css3  dropcaps  typography 
december 2014
PhotoSwipe - JavaScript Image Gallery
PhotoSwipe 4.0 is a gorgeously minimal photo gallery.
lightbox  gallery  image 
december 2014
Designer's guide to DPI
Very extended read! A designer's guide to DPI.
Available as an ebook too.
design  dpi  reference 
december 2014
« earlier      
3d @font-face accessibility accordion actions adobe ads ajax akismet alpha ampersand android animation animations annotation apache api apple application architecture audio audioplayer background backup badges battery blend bookmarklet books bootstrap borderimage branding browser brushes bubbles bugs businesscards button buttons campaignmonitor cheatsheet cms code color colormanagement colors comments compass compatibility compression contrast converter css css3 design domscripting dpi dribbble dropbox dummy dynamic ecommerce em email encoding expressionengine extension extensions fallback filter firefox firewall flash flexbox flickr fluid fold font fonts forms foundry framework furniture gallery generator geometric google googlemaps gradient gradient_tool gradients graphicdesign graphics graphs grid gui guide hacks history hover htaccess html html5 hyphenation icons ie ie6 ie7 ie8 illustration illustrator image images infographics informationdesign inspiration interior ios ipad iphone javascript jquery knowhow layermask layout leopard lifestream lifestyle lightbox links loader loading logo logos loremipsum mac macaw macosx maps mask masking mediaqueries menus microformats mobile modal module money monitoring mootools mysql navigation newsletter numerals ornaments osx overlay packaging parallax path pathfinder pattern patterns pen_tool pentool performance photo photography photoshop php pins pixel plugin plugins png posters prefix presentation print progressive prototype quicksilver quirksmode reference reflect_tool resize resources responsive retina retinadisplay retro ribbon rss safari sass screencast screenshots scriptaculous scroll scrollbar selector semantic server shapelayer shapes sharing shopping sifr sketching slider slideshow socialbookmarking socialnetworking software specificity spirograph sprites styleguide svg swiss symbols syntax tables techniques templates testing textures timezones tips tools tooltip toread tourdefrance traffic transform transform_again transitions transparency tumblr tutorial twitter typekit typography ui upload usability ux validation vector verticalrhythm video vintage virtualization visualization w3c wallpaper web webapp webdesign webkit webstandards windows world wysiwyg

Copy this bookmark: