Annotation Overlay Effect with CSS3 | Codrops
A tutorial about how to create an overlay effect to show some more details of an item or image. *Annotation Overlay with CSS3 *.
overlay  annotation  css3  from delicious
5 days ago
TypeStacks: Instant font stacks based on your font
TypeStacks, instant font stacks based on your font. Shows if it's available on Typekit too.
typography  from delicious
12 days ago
cssarrowplease
Simple way to create CSS arrows for tooltips and the like
webdesign  tooltip  css3  from delicious
16 days ago
Experimental Page Layout Inspired by Flipboard | Codrops
Great experimental and proof-of-concept layout inspired by the Flipboard application.
flipboard  css3  from delicious
18 days ago
Creating a Mobile-First Responsive Web Design - HTML5 Rocks
Just finished reading this great tutorial called *Creating a Mobile-First Responsive Web Design* by Brad Frost at HTML5 Rocks.
tutorial  responsive  html5  mobile  from delicious
4 weeks ago
This is the new 320 and Up | Stuff & Nonsense
*Andy Clarke* released a new version of his *320 and Up*. Something I'll certainly download & try out in an upcoming project.
responsive  html5  from delicious
4 weeks ago
Sequence.js - The jQuery Slider Plugin with Infinite Style
Sequence.js, a jQuery Slider plugin with infinite style. Many creative possibilities with this one.
slideshow  css3  slider  jquery  from delicious
5 weeks ago
CSS Ribbon Menu
Nicely animated CSS Ribbon Menu that taps into what is possible with some CSS3 sprinkles.
ribbon  css3  from delicious
5 weeks ago
Simple Desks
If you love a simple desk with *minimal clutter* around you'll dig the inspiration found in this journal called *Simple Desks*. Can't be inspired when my desk is cluttered.
workspace  from delicious
5 weeks ago
iPad GUI PSD (Retina Display) | Downloads | Teehan+Lax
New iPad GUI PSD (Retina) from Teehan+Lax. Requires Photoshop CS6 currently in public beta.
ios  gui  ui  retinadisplay  ipad  from delicious
6 weeks ago
Retina.js | Retina graphics for your website
retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays. Bookmarked!
retinadisplay  from delicious
6 weeks ago
Media Query & Asset Downloading Results | TimKadlec.com
If you wonder if your images be downloaded with media queries you'll find the answer in this great and useful research called Media Query & Asset Downloading Results.
responsive  mobile  mediaqueries  css  from delicious
6 weeks ago
CSScience - CSS3 Responsive Slider / Carousel Using Radio Buttons
A #responsive *CSS3 Slider* with arrows that go inside the slider on smaller screens.
webdesign  responsive  slider  css3  from delicious
6 weeks ago
ResponsiveSlides.js · Responsive jQuery slideshow
ResponsiveSlides: a small jQuery plugin that creates a responsive slideshow.
responsive  slideshow  jQuery  from delicious
7 weeks ago
Photoshop Actions to fix the banding of Photoshop's gradients.
An action that makes it easy to fix Photoshop's gradient banding.
actions  photoshop  from delicious
7 weeks ago
Using Modernizr to detect HTML5 features and provide fallbacks | HTML5 Doctor
A good and insightful explanation on how to use *Modernizr* to detect *HTML5* features and provide *fallbacks*.
fallback  modernizr  html5  from delicious
8 weeks ago
Entypo - 100+ carefully crafted pictograms
Just added another quality set of pictograms called *Entypo* to my growing collection. All released for free under the Creative Commons license CC BY-SA.

Beautiful work by *Daniel Bruce*.
fonts  pictograms  icons  from delicious
8 weeks ago
20 tools to help you create responsive web designs
Need some help creating your #responsive designs? This article sums up 20 tools that you could use.
tools  responsive  from delicious
9 weeks ago
Style Guide
Have a good poke around in the markup pattern library from the new #responsive Starbucks.com site.
pattern  styleguide  responsive  from delicious
9 weeks ago
Parallax Content Slider with CSS3 and jQuery | Codrops
Good tutorial on a simple *parallax content slider* with different animations for each slider element and a background parallax effect.
slider  parallax  tutorial  css3  from delicious
9 weeks ago
Create a Responsive Web Design with Media Queries
This tutorial *Create a Responsive Web Design with Media Queries* is a good primer to get yourself familiar with how *Media Queries* work.
mediaqueries  tutorial  responsive  from delicious
9 weeks ago
Responsive-Ready Content | Sara Wachter-Boettcher, Content Strategist
While we are on the topic of #responsive design I just finished reading this article Responsive-Ready Content over lunch. The topic has crossed my mind too. Enjoyed reading it.
responsive  from delicious
10 weeks ago
LukeW | Multi-Device Layout Patterns
Luke documented the most common patterns for responsive layouts
layout  responsive  from delicious
10 weeks ago
DocHub | Instant Documentation Search
InstaCSS seems like a nice resource to lookup something. You can also use it for HTML, JavaScript,…
html5  css3  from delicious
10 weeks ago
StyleBootstrap.info
If you are using *Bootstrap v2* from Twitter and want to quickly customize it, check this out. It lets you quickly create something more unique.
twitter  framework  from delicious
10 weeks ago
An explanation of the CSS animation on Apple's iPhone 4S webpage -- John B. Hall
Ever wondered how the CSS Animations Work on the iPhone 4S Sales Page? The answer is pretty clever
iphone  apple  animation  css3  from delicious
11 weeks ago
Adobe Shadow | preview mobile web - Adobe Labs
*responsive.is* is very elegant but eventually you'll need to test on actual hardware. A step up in testing #responsive designs is Adobe Shadow. It lets you remote test on actual hardware. Watch video to see how it all works.
testing  mobile  responsive  from delicious
11 weeks ago
http://responsive.is/
Just discovered the most elegant way to test a #responsive design. Just fill in the url and use the little icons on the left to see how the design responds. Meet responsive.is
mobile  testing  tools  responsive  from delicious
11 weeks ago
Natetronn/pearsforee · GitHub
*Pears*, the open source WordPress theme (http://pea.rs/) by *SimpleBits* consisting of common patterns of markup & style is now also available as an *ExpressionEngine* theme.
css3  html5  expressionengine  from delicious
11 weeks ago
Wireframes
Someone did a more evolved version of the same Responsive Layouts, Responsively Wireframed that I've linked to earlier.
responsive  from delicious
12 weeks ago
Responsive Layouts, Responsively Wireframed
Another simple example to show off how a responsive layout works.
mobile  responsive  from delicious
12 weeks ago
Responsive Navigation Patterns | Brad Frost Web
Just finished reading this interesting post that compares the *pros* & *cons* of some of the *responsive navigation patterns* that are popular techniques for handling navigation in #responsive designs.
webdesign  patterns  navigation  responsive  from delicious
12 weeks ago
✿ Our favorite set — CopyPasteCharacter.com
Interesting find of the day goes to *CopyPasteCharacter.com*. Useful for character encodings too.
symbols  characters  from delicious
12 weeks ago
Better keyboard navigation
Interesting article about Skip Links revisited. Remember it is a proof of concept as in my testing it needs a bit work to get it running in Safari & Opera (I've tested latest versions of both). Works fine in Chrome & Firefox though.
keyboard  skip  skip_links  accessibility  from delicious
12 weeks ago
fancyBox - Fancy jQuery Lightbox Alternative
Just noticed that fancyBox has become #responsive in version 2.
webdesign  responsive  res  lightbox  li  jquery  from delicious
12 weeks ago
11 Professional Responsive jQuery Slider Plugins - DesignModo
Some of these are already bookmarked but this is a good overview.
responsive  slider  sli  jQuery  from delicious
february 2012
Beautiful web type — the best typefaces from the Google web fonts directory
I'm a happy Typekit user myself but If you like Google Fonts check out Beautiful Web Type that showcases the best typefaces that Google has to offer.
webdesign  google  fonts  typography  from delicious
february 2012
JavaScript - RoyalSlider – Touch-Enabled jQuery Image Gallery | CodeCanyon
Somebody asked me if i knew a slider that is responsive and works good on mobile too. I think this *RoyalSlider* fits the criteria.
webdesign  mobile  slider  jquery  from delicious
february 2012
Browser UI
Browser UI, a Photoshop action that wraps a browser skin (Firefox, Chrome, Safari) around the PSD you have open. Seems like a good time saver if you need to do this often.
actions  photoshop  from delicious
february 2012
Responsive text
Clever & smart concept where the amount of textual detail scales relative to your screen size.

You can see practical use of *Responsive Text* at this Sifter site https://sifterapp.com/
webdesign  responsive  re  css3  from delicious
february 2012
Colour Tool | PANDR
A bookmarklet that I just added is this one called Color Tool. It's an easy way to get a site's color palette.

Alternatively, you can also use the link below and simply type in a site's address in the url field and click get colors.
tools  color  from delicious
february 2012
jscraft.net - regularly updated blog on all things related to javascript
Cool collection of CSS/JavaScript techniques done by Marcin Dziewulski. Only the CSS 3D Image Gallery demo needs WebKit.
webdesign  javascript  jquery  from delicious
february 2012
Pure CSS carousels
Another technology demo called Pure CSS carousels that use the :target selector and no JavaScript as well.
webdesign  css3  from delicious
february 2012
Carrer Blog: CSS3 Fancy Box
CSS3 Fancy Box is a cool technology demo that makes use of the :target selector. No images & no JavaScript and very lightweight.
webdesign  CSS3  from delicious
february 2012
Patterns - Theresa Neil
Another good UI #inspiration source is this *Mobile design pattern* gallery. Contains UI Patterns for iOS, Android and more.
patterns  mobile  from delicious
february 2012
Mobile Web Resources | Mobile Web Best Practices
Just bookmarked this handy and clean *Mobile Web Resources* gallery. All you need to know about mobile in one place.
resources  mobile  from delicious
february 2012
Control image aspect ratios with CSS3 | Tutorial | .net magazine
Interesting feature to keep an eye on. Currently only in Opera and Webkit nighties but that can change fast.
Images  webdesign  web  aspectratio  css3  from delicious
february 2012
HTML5 Music Player (Updated) | Codebase Hero
Haven't used this *HTML5 music player* yet but it looks like one of the better ones out there.
player  jquery  music  html5  from delicious
february 2012
CSS playground
Had a bit of fun in Benjamin De Cock's *CSS playground*. Some really cool experiments to be checked out there.
webdesign  css3  from delicious
february 2012
MailChimp and Media Queries | MailChimp Email Marketing Blog
Interesting read about using media queries with MailChimp. The thought didn't cross my mind yet to use them for mail too.
mailchimp  mediaqueries  mobile  email  from delicious
february 2012
Adactio: Journal—Image-y nation
The best solution for responsive images isn't there yet but I must say that I like what Jeremy Keith is proposing in his *Image-y nation* article.
images  responsive  from delicious
february 2012
How to Approach a Responsive Design | Upstatement
A good read when you are about to do a #responsive web site. How to Approach a Responsive Design explains how they approached it for the BostonGlobe.com site.
webdesign  process  responsive  from delicious
february 2012
Filter Functionality with CSS3 | Codrops
Nice tutorial that dives into the general sibling combinator and the :checked pseudo-class. Filter functionality with CSS3. Includes code & demo.
webdesign  filter  css3  from delicious
february 2012
HTML 5 Canvas Deep Dive
The most detailed introduction I've found so far that covers the topic *HTML5 Canvas*.
canvas  html5  from delicious
january 2012
Animated Buttons with CSS3 | Codrops
Some CSS3 Transitions and Animations ideas for buttons.
buttons  animation  css3  from delicious
january 2012
« 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: