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
5 days ago
PatternBolt
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
6 days ago
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
6 days ago
Introducing Normalize-OpenType.css
Introducing Normalize-OpenType.css. A very solid boilerplate for OpenType features.
opentype  typography  from delicious
18 days ago
Bounce.js
Bounce.js lets you create tasty CSS3 powered animations in no time.
css3  animation  webdesign  from delicious
18 days ago
CSS play | Responsive image map
Speaking responsive…here’s a responsive image map(s) with CSS only.
responsive  image.map  webdesign  from delicious
20 days ago
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
25 days ago
Google Design
The newly released Google design guidelines are well documented I must say. Bookmarked for future reference.
design  styleguide  from delicious
4 weeks ago
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
5 weeks ago
CSS Gradients with background-blend-mode
Pretty amazing! New CSS gradient possibilities with the background-blend-mode property.
css3  gradients  from delicious
6 weeks ago
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
7 weeks ago
Web Design Field Manual
collection of useful resources & best practice cases - Web Design Field Manual.
from delicious
8 weeks ago
Single Element CSS Spinners
Small collection of Single element CSS Spinners.
css  animation  loading  from delicious
10 weeks ago
How to dynamically change text color based on a background color
Well explained article on how to dynamically change text color based on a background color with Sass.
sass  background  dynamic  css  from delicious
10 weeks ago
WTF, forms?
If you ever need to style some custom forms input elements. I would also add focus states.
forms  css  webdesign  from delicious
11 weeks ago
The new srcset and sizes explained › Martin Wolf Front End Web Development
If you’re trying to understand the new responsive attributes ‘srcset’ and ‘sizes’ this post explains them well.
responsive  sizes  srcset  from delicious
11 weeks ago
Moving Forward with CSS Shapes ∙ An A List Apart Blog Post
Follow up on the CSS Shapes 101 article with additional resources to start using them today.
css3  shapes  resources  from delicious
11 weeks ago
Readable, Fluid Type With Basic CSS Smarts | Design in the browser with web fonts and real content — Typecast
Creating responsive Web typography. Val Heads’s article shows how; Readable, Fluid Type With Basic CSS Smarts.
typography  responsive  from delicious
12 weeks ago
CSS Shapes 101 · An A List Apart Article
Really cool article that makes you want to experiment! CSS Shapes 101.
css  layout  shapes  webdesign  from delicious
april 2014
Magic of CSS — Adam Schwartz
Lovely online book with code examples on the magic of CSS.
css  tutorial  webdesign  from delicious
april 2014
Aligning type to baseline the right way using SASS — Medium
Interesting read. Aligning type to baseline the right way using SASS.
css  typography  sass  from delicious
april 2014
Typekit Practice
Typekit Practice has the potential to become a great resource for learning about typography.
typography  typekit  design  from delicious
april 2014
Perfect Icons - A social icon creation tool.
If you need resolution independent social sharing buttons, Perfect Icons may just have what you’re looking for.
icons  from delicious
april 2014
CSS and SVG Masks - CodePen
There’s more than 1 way to do masks: clip, clip-path, mask-image… Examples & browser support.
css  mask  webdesign  from delicious
april 2014
Advanced animation path » legomushroom
Tutorial on how to animate along an SVG path, but also adjust the orientation. Clever.
svg  animation  from delicious
april 2014
Advanced web typography: Kerning » Blog » Elliot Jay Stocks
Good article from @elliotjaystocks on Advanced web typography: Kerning.
typography  kerning  webdesign  from delicious
april 2014
Type Scale - A Visual Calculator
Type Scale, a visual calculator with preview and ready to copy CSS code. Bookmarked!
typography  webdesign  from delicious
april 2014
Snap.svg - Home
This seems a like pretty nice library to create SVG animations.
svg  javascript  webdesign  from delicious
april 2014
Getting to Know Macaw's Tools - Tuts Web Design Tutorial
Another good starter resource about Macaw is this one about Macaw's Toolkit and Inspector Panel.
macaw  tutorial  webdesign  from delicious
april 2014
WTF, HTML and CSS?
WTF, HTML and CSS? Highly useful list of tips & gotchas for new (and experienced) front-end developers.
css  html  from delicious
march 2014
CSS Diner - Where we feast on CSS Selectors!
What a fun and clever way to learn how to use CSS selectors. Try it!
css  tutorial  from delicious
march 2014
Flexbox Grid
A new grid system (to me) based on the flex display property.
flexbox  grid  responsive  from delicious
march 2014
Code Guide by @mdo
A nice set of standards for developing flexible and sustainable HTML/CSS, by @mdo.
css  html  guide  from delicious
march 2014
Team-Sass/toolkit · GitHub
Speaking of Sass & Compass, here’s a Toolkit for Responsive Web Design & Progressive Enhancement.
sass  responsive  compass  from delicious
march 2014
Browserhacks
Great collection of browser hacks for front-end devs. Unfortunately still needed on occasion.
hacks  css  javascript  from delicious
march 2014
Typsettings | Home
Speaking about SASS & typography… Here's TypeSettings, a Sass type toolkit to deal with vertical rhythm and apply modular scale.
sass  typography  from delicious
february 2014
iconizr · CSS & Sass icon kit creator · SVG & PNG sprite generator
Tool for the bookmarks: iconizr – CSS & SASS icon kit creator plus SVG & PNG sprite generator.
icons  svg  from delicious
february 2014
Drop-Down Navigation: Responsive and Touch-Friendly — Osvaldas Valutis
Nice tutorial on how to create a Drop-Down Navigation that is #responsive and touch-friendly: 
responsive  navigation  css  mobile  from delicious
february 2014
Make a Flippin’ 3D Countdown with CSS & JavaScript | Viget
Neat little tutorial on creating a flipping 3D countdown with CSS & JavaScript.
css  javascript  from delicious
february 2014
How to use the @supports rule in your CSS | Web design | Creative Bloq
Feature support detection with the simple and elegant @supports rule by Lea Verou. Good read.
css  webdesign  from delicious
february 2014
William Penn’s CSS layouts | MaccG
Good overview of #CSS3 layout modules and methods
css3  layout  from delicious
february 2014
Styleguide | Yelp
Another front-end style guide for the bookmarks. This time by Yelp.
styleguide  design  from delicious
february 2014
Grid
Simple examples and well explained. A simple guide to responsive design.
webdesign  responsive  from delicious
february 2014
Liquidapsive (Liqui-dap-sive)
If you want to quickly explain a difference between fixed, fluid, responsive layout, this resource can be helpful.
responsive  webdesign  from delicious
february 2014
NTH-TEST | nth-child and nth-of-type Tester
A quick tool to test nth-child and nth-of-type in CSS.
css  tools  nth  from delicious
february 2014
The Tipue blog - The complete guide to centering a div
Worth bookmarking as a reminder. The complete guide to centering a div.
css  centering  div  from delicious
february 2014
You Might Not Need jQuery
Roger Johansson is right. Very much worth considering.
javascript  jquery  from delicious
january 2014
A List Apart Pattern Library
Another pattern library for the bookmarks. This one is maintained by the good folks of A List Apart.
patterns  design  styleguide  from delicious
january 2014
When To Use The Button Element | CSS-Tricks
When to use the button element. Some good advice in the comments too by @codepo8.
css  button  from delicious
january 2014
Off Canvas Menu with Animated Links
Learn to make a simple off canvas mobile navigation with delayed link animation.
navigation  css3  from delicious
january 2014
Flexbox for forms - German for black
Neat technique. Flexbox for forms. No inline-block, no floats, no hard-set widths.
flexbox  forms  from delicious
january 2014
Animate.css
Handy list of CSS animations with a preview.
css  animations  from delicious
january 2014
« earlier      
326ppi 3d 3dtransforms 72dpi @font-face abtesting accessibility accordion adaptive adjustmentlayers adobe agency ajax akamai akismet Aligntool alpha amazon ampersand analytics animation annotation antispam apache api apple application architecture area_type_tool aspectratio attribute_selectors audio audioplayer background backup badges banner baselines battery bbc bike bitmap blend_tool bloat boilerplate book bookmarklet books border border-image borderimage BostonGlobe branding browser brushes bubbles bugs businesscards buttons calculator calendar camera campaignmonitor canvas cartoon checklist clearfix clock cms coat_of_arms cocomment code color colorgroups colorguide colormanagement colors comments compatibility contentslider contrast converter corporateidentity covers cropping CS3 css css3 datepicker design desktop diagrams doctype domscripting dpi drawing dropbox dropdownmenu dummy dummytext dynamic ebooks ecommerce editor education EE effect elastic em email embed encoding entity equidistant EricSpiekermann europe expressionengine extension extensions eyetracking facebook fever fieldframe fieldnotes filter firefox firewall flags flash flickr float fluid focusCloud fold folksonomy fontstacks forms foundry framework freeform freelance freelancing fullscreen furniture fusion gallery generator geometric goldenratio google googlemaps gradient gradient_mesh gradient_tool gradients graphicdesign graphics graphs grid grids gui hack hacks handlettering headsupdisplay highlight history hover htaccess html html5 HUD humor hyphenation icons IE ie6 IE7 ie8 IE9 illustration illustrator image images indesign infographics Informationdesign inspiration interior internet iOS ipad iphone itunes javascript JoeClark jquery keynote knowhow label layermask layerstyles layout leopard less lifestream lifestyle lightbox line-height links livecolor livepreview logo logos longexposure loremipsum mac macosx magazine mailchimp maintenance makewithmesh mapping markdown masking masonry mediaqueries menus mesh Meta microformats minimalism mobile modal modern modular module moleskine money monitoring monospace mootools movie movies mozilla music MySQL navigation neon netherlands network newsletter nth-child numerals onlinestorage ornaments osx overlay overlays packaging paper paragraph parallax parallels path Pathfinder pattern patterns pen_tool pentool photo photography photoshop photoshop_actions photoshop_shapes PhotoshopCS3 php picker pictures pins pixel player plugin plugins png positioning posters powerpoint prefix prepress presentation principles print process progressive protector prototype ps3 pucker python QuickSilver quirksmode recolor reference reflect_tool rem repair resize resources responsive retinadisplay retro rgba ribbon rollover Rounded_Rectangle_tool rss rust s3 safari save scaling scanning scheduling scissors_tool screencast screensaver screenshots scriptaculous scrollbar scroller search security selector semantic seo server shapelayer shapes sharing shear_tool shopping shorturl showreel sifr signage signature signs sketching skin slider slides slideshow smartfilters socialbookmarking socialnetworking software specificity specwork spirograph sprites storage strap strictmode subscriptionform subversion support swatches swf swiss symbols syntax tables tagCloud target techniques templates testing text_wrap texture textures textwrap tiltshift timemachine timetracking timezones tips tools toread traffic transform transform_again transform_each transform_effect transitions transparency tree trends tumblr tutorial twitter typekit typography ui upload uptime usability validation vat vector vectors veer vendor-prefix versioncontrol verticalRhythm video vintage virtualhost virtualization visualization vmware w3c wallpaper watercolor watercolors weather web webapp webdesign webfonts webhosting webkit website webstandards windows wood world wpa wysiwyg yearbook

Copy this bookmark:



description:


tags: