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
yesterday
Introducing AM - Attribute Modules for CSS - Glen Maddern: Internet Pro
Interesting approach to CSS, using custom element attributes and the ~= selector.
css3  from delicious
7 days ago
uiGradients - Beautiful coloured gradients
uiGradients, an inspiration source to create some beautiful CSS gradients.
css3  gradients  from delicious
8 days ago
Grid by Example
Site by Rachel Andrew that hosts CSS Grid Layout examples.
css  grid  layout  from delicious
14 days ago
CSS Shapes Editor for Chrome
Handy CSS Shapes Editor extension for Chrome. How to use it explained.
css  shapes  from delicious
14 days ago
Plain Pattern
Lovely SVG based seamless pattern maker.
svg  patterns  from delicious
15 days ago
Progressive Enhancement
Great thought process on choosing the appropriate HTML tags. Progressive Enhancement.
css  accessibility  webdesign  webstandards  from delicious
21 days ago
Pure CSS parallax scrolling websites | Keith Clark
Understanding how pure CSS parallax scrolling websites work. Clever stuff in there.
css  parallax  from delicious
26 days ago
Creating color palettes with adjustment layers
Nice technique from @bjango. Creating color palettes using adjustment layers.
photoshop  color  from delicious
29 days ago
Responsive Email Patterns
A collection of patterns & modules for responsive emails.
email  responsive  patterns  from delicious
4 weeks ago
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
5 weeks ago
Matt Stow : Instant, responsive print stylesheets
Very cool tip indeed. Instant, responsive print stylesheets.
responsive  print  from delicious
5 weeks ago
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
5 weeks ago
Improve Your Email Workflow With Modular Design | Smashing Magazine
Speaking about email…Improve your email workflow with modular design
email  design  from delicious
5 weeks ago
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
5 weeks ago
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
6 weeks ago
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
6 weeks ago
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
6 weeks ago
demosthenes.info – 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
6 weeks ago
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
7 weeks 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
7 weeks 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
8 weeks ago
Introducing Normalize-OpenType.css
Introducing Normalize-OpenType.css. A very solid boilerplate for OpenType features.
opentype  typography  from delicious
9 weeks ago
Bounce.js
Bounce.js lets you create tasty CSS3 powered animations in no time.
css3  animation  webdesign  from delicious
9 weeks ago
CSS play | Responsive image map
Speaking responsive…here’s a responsive image map(s) with CSS only.
responsive  image.map  webdesign  from delicious
9 weeks 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
10 weeks ago
Google Design
The newly released Google design guidelines are well documented I must say. Bookmarked for future reference.
design  styleguide  from delicious
11 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
12 weeks ago
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
Tips for Creating Accessible SVG
Some good tips for creating accessible SVG’s.
svg  accessibility  webdesign  from delicious
may 2014
Single Element CSS Spinners
Small collection of Single element CSS Spinners.
css  animation  loading  from delicious
may 2014
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
may 2014
WTF, forms?
If you ever need to style some custom forms input elements. I would also add focus states.
forms  css  webdesign  from delicious
may 2014
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
may 2014
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
may 2014
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
may 2014
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
« 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: