SVG Animations Using CSS and Snap.svg
Tutorial that shows how to create SVG animations using CSS and Snap.svg.
svg  animation 
3 days ago
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 
4 days ago
The illusion of life by Jeroen on CodePen
Speaking about animation for the web…The same 12 principles & practical examples.
animation  css 
6 days ago
Animation Principles for the Web - CSS Animation
Great article on animation principles for the web, complete with live demos.
animation  css3 
6 days ago
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 
11 days ago
Experiment: Using Flexbox Today - Chris Wright
Extended article with tips, and demos to use Flexbox today.
css  flexbox 
16 days ago
Quantity Queries for CSS · An A List Apart Article
Useful technique for responsive design. Quantity Queries for CSS.
responsive  webdesign  navigation 
25 days ago
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 
4 weeks ago
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 
5 weeks ago
Why you should be excited about CSS shapes
Well written and researched article about CSS Shapes.
css  shapes 
5 weeks ago
Printing Medium stories — Designing Medium — Medium
How does Medium handle print stylesheets? Great article with link to the technical details too.
css  print  design 
5 weeks ago
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 
5 weeks ago
Aerotwist - FLIP Your Animations
Tip to use a delay trick to make animations smoother. FLIP Your Animations:
animation  css3 
5 weeks ago
Animating pseudo-elements
Animating pseudo-elements. Example to create a shiny button.
animation  css3 
6 weeks ago
Mid-Century Modern Graphic Design
Cool for inspiration! A visual catalogue of the Mid-Century Modern graphic aesthetic.
inspiration  midcentury  design 
6 weeks ago
phanan/htaccess · GitHub
If you ever got a headache from .htaccess this collection of useful snippets might come in handy.
htaccess  apache 
6 weeks ago
Interactive gradient explorer called Shade. Playing with those sliders is addictive :)
css  gradients  tools 
6 weeks ago
Twitter's "fave" animation
Learning to create Twitter's "fave" animation using the CSS animation steps timing function.
animation  css 
7 weeks ago
CSS Reference | Codrops
No doubt this is going to be *the go to resource* for CSS.
css3  reference 
7 weeks ago
Useful SVGO[ptimization] Tools
Useful SVGO[ptimization] Tools summed up by Sara Soueidan.
svg  tools 
8 weeks ago
Strategies for Keeping CSS Specificity Low | CSS-Tricks
Great article by Chris Coyier where here shares strategies for keeping CSS specificity low.
css  specificity 
8 weeks ago
iconic/illustrator-svg-exporter · GitHub
A better way to generate SVGs from Illustrator by @useiconic. Looks interesting.
illustrator  svg 
9 weeks ago – Little, Big: Using CSS fit-content
Learn to use CSS fit-content for precise element containers. Dudley Storey shows how…
css  layout  design 
9 weeks ago
Auto-Hide Sticky Header — Osvaldas Valutis
Good resource if you need to create an auto-hide sticky header.
css  navigation 
10 weeks ago
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 
11 weeks ago
philipwalton/flexbugs · GitHub
Curated list of Flexbox issues and cross-browser workarounds for them.
css  flexbox 
11 weeks ago
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.
11 weeks ago
Top Pens of 2014 on CodePen
Lovely overview of the most hearted CodePen’s of 2014. Great for experimenting & learning.
12 weeks ago
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
An SVG Web font with 74 icons of all main payment operators and methods.
font  icons  svg 
december 2014
Typekit Practice: Getting the most out of type specimens
How do you get the most out of web type specimens? This lovely article @typekit tells you how…
design  typography  web 
november 2014
Style Guides | Brad Frost
The differences between style guides, pattern libraries, code guidelines, etc. explained by Brad Frost.
patterns  styleguide 
november 2014
The State Of Animation 2014 | Smashing Magazine
Interesting post that discusses the state of Web animation in 2014.
animation  webdesign 
november 2014
Website Style Guide Resources
Lovely collection of resources on front-end style guides.
css  design  styleguide 
november 2014
LukeW | Video: Mobile Navigation, Conversion, Input, & More
Deep dive into mobile design by Luke Wroblewski. 2.5 hours of video on mobile menus, forms, inputs, conversion, layout & more.
design  mobile 
november 2014
Haven’t used it yet but looks interesting. CSS Dig: Analyze your CSS in a new way.
browser  css  plugin 
november 2014
Responsive Images | Brad Frost
How Brad Frost handles 95% of his responsive images.
responsive  images 
november 2014
The iOS Design Guidelines - Ivo Mynttinen / User Interface Designer
Well put together resource page with the iOS Design Guidelines.
design  resource  iOS 
november 2014
Stag - CodePen
An experiment resizing and restaging SVG at different aspect ratios.
SVG  parallax 
november 2014
SVG Animations
Tutorial on how to create SVG animations.
animation  svg 
november 2014
A New Way to Test Internet Explorer on OS X, iOS and Android | Rey Bango
Interesting! Test the latest IE on any platform for free without a big VM download - RemoteIE.
ie  testing 
november 2014
Styling And Animating SVGs With CSS | Smashing Magazine
Speaking about SVG…
Sara Soueidan on styling and animating SVGs With CSS. Lengthy but very good!
animations  css  svg 
november 2014
Masking SVG Animations — Medium
Lovely post on masking SVG animations.
svg  tutorial  animation 
november 2014
romashamin/Size-Marks-PS · GitHub
Handy Photoshop script called 'Size Marks'
photoshop  design 
november 2014
CSSconf EU 2014 | Rachel Andrew: CSS Grid Layout - YouTube
Interesting video/talk where Rachel Andrew shows how the CSS Grid Layout works.
css3  layout  grid 
october 2014
Blend if
Great Photoshop technique by @bjango. Although I’ll have to re-read it before using it.
photoshop  transparency  blend 
october 2014
Coolors Tutorial - The super fast color palettes generator!
Always love to play with colors. ‘Coolors’, a super fast color schemes generator.
colors  tools 
october 2014
A Guide to SVG Animations (SMIL) | CSS-Tricks
Great extended guide to create SVG Animations by Sara Soueidan over at CSS Tricks.
svg  animation 
october 2014
Spacing elements
"Let's say we want those items to be spaced evenly with CSS…”
october 2014
SVG pattern generator
What a great tool to play with! Great for inspiration. A SVG pattern generator
patterns  tools 
october 2014
Pure CSS off-canvas menu with flexbox
Very cool! Pure CSS off-canvas menu with flexbox created by Zoe Gillenwater
css3  flexbox 
october 2014
Making Responsive HTML Emails | Benjy Stanton
Run down of the process for designing, building and testing responsive HTML emails.
email  responsive 
october 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 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 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 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 logos loremipsum mac macaw macosx maps mask masking mediaqueries menus microformats mobile 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 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: