Style Guides | Brad Frost
The differences between style guides, pattern libraries, code guidelines, etc. explained by Brad Frost.
patterns  styleguide 
The State Of Animation 2014 | Smashing Magazine
Interesting post that discusses the state of Web animation in 2014.
animation  webdesign 
3 days ago
Website Style Guide Resources
Lovely collection of resources on front-end style guides.
css  design  styleguide 
3 days ago
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 
4 days ago
Haven’t used it yet but looks interesting. CSS Dig: Analyze your CSS in a new way.
browser  css  plugin 
4 days ago
Responsive Images | Brad Frost
How Brad Frost handles 95% of his responsive images.
responsive  images 
7 days ago
The iOS Design Guidelines - Ivo Mynttinen / User Interface Designer
Well put together resource page with the iOS Design Guidelines.
design  resource  iOS 
7 days ago
Stag - CodePen
An experiment resizing and restaging SVG at different aspect ratios.
SVG  parallax 
8 days ago
SVG Animations
Tutorial on how to create SVG animations.
animation  svg 
15 days ago
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 
18 days ago
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 
18 days ago
Masking SVG Animations — Medium
Lovely post on masking SVG animations.
svg  tutorial  animation 
18 days ago
romashamin/Size-Marks-PS · GitHub
Handy Photoshop script called 'Size Marks'
photoshop  design 
18 days ago
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 
22 days ago
Blend if
Great Photoshop technique by @bjango. Although I’ll have to re-read it before using it.
photoshop  transparency  blend 
22 days ago
Coolors Tutorial - The super fast color palettes generator!
Always love to play with colors. ‘Coolors’, a super fast color schemes generator.
colors  tools 
22 days ago
A Guide to SVG Animations (SMIL) | CSS-Tricks
Great extended guide to create SVG Animations by Sara Soueidan over at CSS Tricks.
svg  animation 
22 days ago
Spacing elements
"Let's say we want those items to be spaced evenly with CSS…”
22 days ago
SVG pattern generator
What a great tool to play with! Great for inspiration. A SVG pattern generator
patterns  tools 
22 days ago
Pure CSS off-canvas menu with flexbox
Very cool! Pure CSS off-canvas menu with flexbox created by Zoe Gillenwater
css3  flexbox 
22 days ago
Making Responsive HTML Emails | Benjy Stanton
Run down of the process for designing, building and testing responsive HTML emails.
email  responsive 
22 days ago
SVG Icons - Ready to use SVG Icons for the web.
One for the bookmarks. Ready to use SVG icons, just copy and paste the HTML.
svg  icons  from delicious
8 weeks ago
Great visualization of the new iPhone 6 screens.
iphone  from delicious
9 weeks ago
How we designed and coded an animated banner ad with no images - Campaign Monitor
How @CampaignMonitor designed and coded an animated banner ad with no images.
animation  from delicious
9 weeks ago
Introducing AM - Attribute Modules for CSS - Glen Maddern: Internet Pro
Interesting approach to CSS, using custom element attributes and the ~= selector.
css3  from delicious
10 weeks ago
uiGradients - Beautiful coloured gradients
uiGradients, an inspiration source to create some beautiful CSS gradients.
css3  gradients  from delicious
10 weeks ago
Grid by Example
Site by Rachel Andrew that hosts CSS Grid Layout examples.
css  grid  layout  from delicious
11 weeks ago
CSS Shapes Editor for Chrome
Handy CSS Shapes Editor extension for Chrome. How to use it explained.
css  shapes  from delicious
11 weeks ago
Plain Pattern
Lovely SVG based seamless pattern maker.
svg  patterns  from delicious
11 weeks ago
Progressive Enhancement
Great thought process on choosing the appropriate HTML tags. Progressive Enhancement.
css  accessibility  webdesign  webstandards  from delicious
12 weeks ago
Pure CSS parallax scrolling websites | Keith Clark
Understanding how pure CSS parallax scrolling websites work. Clever stuff in there.
css  parallax  from delicious
august 2014
Creating color palettes with adjustment layers
Nice technique from @bjango. Creating color palettes using adjustment layers.
photoshop  color  from delicious
august 2014
Responsive Email Patterns
A collection of patterns & modules for responsive emails.
email  responsive  patterns  from delicious
august 2014
CSS at Groupon
I always like to read how organizations use CSS. Four cases in total if you read the links in the beginning too.
css  from delicious
august 2014
Matt Stow : Instant, responsive print stylesheets
Very cool tip indeed. Instant, responsive print stylesheets.
responsive  print  from delicious
august 2014
Understanding SVG Coordinate Systems & Transformations (Part 3) – Establishing New Viewports
Understanding SVG Coordinate Systems & Transformations (Part 3) – Establishing New Viewports. Excellent series by Sara Soueidan.
svg  animation  from delicious
august 2014
Improve Your Email Workflow With Modular Design | Smashing Magazine
Speaking about email…Improve your email workflow with modular design
email  design  from delicious
august 2014
Creating a centered, responsive design without media queries - Campaign Monitor
Get responsive emails to look nice in Gmail. Creating a centered, responsive design without media queries.
responsive  email  campaignmonitor  from delicious
august 2014
Understanding SVG Coordinate Systems & Transformations (Part 2) – The transform Attribute
Understanding SVG Coordinate Systems & Transformations (Part 2) – The transform Attribute.
svg  animation  webdesign  from delicious
july 2014
Understanding SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio
Understanding SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio.
svg  animation  from delicious
july 2014
Full-width pinned layouts with flexbox
Staying on the topic of flexbox with this tutorial: Full-width pinned layouts with Flexbox.
flexbox  layout  webdesign  from delicious
july 2014 – A Designer’s Guide To Flexbox: Understanding Visual Weight
A Designer’s Guide To Flexbox: Understanding Visual Weight by Dudley Storey. The start of a nice series of useful tutorials.
flexbox  layout  webdesign  from delicious
july 2014
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started
Good read about Responsive Images: Use cases and documented Code Snippets to get you started.
responsive  images  webdesign  from delicious
july 2014
PatternBolt, a selection of SVG pattern backgrounds, packed in a single CSS or SASS (scss) file, just include the css file in your project and add a class to your element to insert a pattern.
svg  patterns  from delicious
july 2014
Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback — Osvaldas Valutis
Flexbox based Responsive Equal Height Blocks with JavaScript fallback. Great follow-up post by Osvaldas Valutis.
flexbox  responsive  webdesign  from delicious
july 2014
Pure CSS One Div Weather Animated Icons - CodePen
Love these animated weather icons done purely in CSS.
animation  icons  css3  from delicious
july 2014
Introducing Normalize-OpenType.css
Introducing Normalize-OpenType.css. A very solid boilerplate for OpenType features.
opentype  typography  from delicious
july 2014
Bounce.js lets you create tasty CSS3 powered animations in no time.
css3  animation  webdesign  from delicious
july 2014
CSS play | Responsive image map
Speaking responsive…here’s a responsive image map(s) with CSS only.
responsive  webdesign  from delicious
july 2014
Responsive Images using and srcset/sizes on Vimeo
A great short video on how responsive images with and srcset/sizes work.
responsive  images  webdesign  from delicious
july 2014
Google Design
The newly released Google design guidelines are well documented I must say. Bookmarked for future reference.
design  styleguide  from delicious
june 2014
Multi-Device Layouts — Web Fundamentals
Haven’t checked it out in detail but this seems a good resource on the fundamentals of responsive design.
responsive  webdesign  from delicious
june 2014
CSS Gradients with background-blend-mode
Pretty amazing! New CSS gradient possibilities with the background-blend-mode property.
css3  gradients  from delicious
june 2014
Card — make your credit card better in one line of code
Lovely proof of concept that guides users with CSS3 credit cards.
creditcard  css3  forms  webdesign  from delicious
june 2014
Web Design Field Manual
collection of useful resources & best practice cases - Web Design Field Manual.
from delicious
may 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 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 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 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 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 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: