gordonbrander + css 267
Paperfold CSS | Demo Studio | Mozilla Developer Network
19 days ago by gordonbrander
A really impressive CSS demo for a "folding paper" show/hide effect.
design
development
web
css
inspiration
animation
ux
19 days ago by gordonbrander
cssarrowplease
19 days ago by gordonbrander
Make that bubble arrow border trick happen, without all the pain.
css
design
development
web
19 days ago by gordonbrander
Animate.css - a bunch of plug-and-play CSS animations
5 weeks ago by gordonbrander
This is great: a library of classy CSS animations. The logic for animations like this is mostly handled by CSS's tweening, but getting an animation to feel right takes a lot of time.
animation
css
development
web
design
opensource
5 weeks ago by gordonbrander
Starbucks: Front-end Style Guide
5 weeks ago by gordonbrander
Starbucks has a front-end styleguide. Brilliant!
css
design
development
web
business
5 weeks ago by gordonbrander
A New Front-End Methodology: BEM | Smashing Coding
5 weeks ago by gordonbrander
BEN has been something of a muse for @necolas lately. Good ideas here.
CSS
web
development
design
HTML
pattern
from iphone
5 weeks ago by gordonbrander
Responsive viewport units - destroy/dstorey
6 weeks ago by gordonbrander
vw vh are units that are essentially the same as percentages, but are always in relation to the viewport. Think rem.
responsivedesign
css
grid
design
development
web
6 weeks ago by gordonbrander
lesjames/Breakpoint
6 weeks ago by gordonbrander
An interesting Sass-based bunch of mixins for responsive grids. Looks promising.
responsivedesign
grid
design
web
development
css
opensource
6 weeks ago by gordonbrander
CSS Scroll Effects
6 weeks ago by gordonbrander
These are really quite clever.
css
animation
ux
design
development
web
6 weeks ago by gordonbrander
Responsive CSS3 Drop-Down to Accordion
7 weeks ago by gordonbrander
Clever use of CSS: a dropdown menu that turns into an accordion when at small screen sizes.
css
web
development
responsivedesign
7 weeks ago by gordonbrander
Lego - Landsbankinn
7 weeks ago by gordonbrander
An example of a great front-end development styleguide: user interface Lego.
css
reference
7 weeks ago by gordonbrander
The EMs have it: Proportional Media Queries FTW! Cloud Four Blog
8 weeks ago by gordonbrander
Clever: using ems in media queries means contextual formatting when users scale fonts.
css
development
web
responsivedesign
8 weeks ago by gordonbrander
Flux Slider » Hardware accelerated image transitions using CSS3
8 weeks ago by gordonbrander
Crazy CSS3 image transitions. Very impressive. To deconstruct.
css
development
javascript
animation
learn
opensource
8 weeks ago by gordonbrander
About HTML semantics and front-end architecture – Nicolas Gallagher
8 weeks ago by gordonbrander
Great ideas about class naming patterns. Also a great conversation starter re: modular front-end development.
css
architecture
development
web
pattern
html
8 weeks ago by gordonbrander
Cross-browser kerning-pairs & ligatures
9 weeks ago by gordonbrander
Improved handling of kerning pairs and ligatures in modern browsers using the text-rendering: optimizeLegibility; declaration.
Firefox uses this by default for anything over 20px.
css
development
web
typography
Firefox uses this by default for anything over 20px.
9 weeks ago by gordonbrander
Off Canvas
9 weeks ago by gordonbrander
A clever approach to mobile content collapsing -- a bit Windows Phone 7-esque.
css
design
development
web
mobile
9 weeks ago by gordonbrander
Styledocco
11 weeks ago by gordonbrander
Docco for CSS.
CSS
development
web
opensource
documentation
from iphone
11 weeks ago by gordonbrander
Experimenting with component-based HTML/CSS naming and patterns — Gist
11 weeks ago by gordonbrander
Necolas thinks through HTML classname patterns. Great ideas here.
css
html
development
web
11 weeks ago by gordonbrander
YUI Theater — Stephen Woods: “Creating Responsive HTML5 Touch Interfaces” (24 min.) » Yahoo! User Interface Blog (YUIBlog)
javascript
learn
mvc
css
animation
film
february 2012 by gordonbrander
At the February 6, 2012 BayJax event at Yahoo!, Flickr Frontend Engineer Stephen Woods (@ysaw) shared his hard-won advice for building responsive touch-based interfaces using HTML5, CSS, and JavaScript. He also revealed how Star Trek: The Next Generation predicted the need for instant user feedback in a touch-based UI.
february 2012 by gordonbrander
Foundation: Rapid Prototyping and Building Framework from ZURB
february 2012 by gordonbrander
Zurb put together a nice Responsive Design toolkit.
framework
javascript
css
responsivedesign
february 2012 by gordonbrander
Overthrow
february 2012 by gordonbrander
A mobile/cross-browser poly fill for scrolling regions.
CSS
JavaScript
development
web
opensource
from iphone
february 2012 by gordonbrander
Alex Russell - Google+ - My (hopefully final) thoughts on the whole vendor prefix…
february 2012 by gordonbrander
Alex Russel, Tantek and Brendan Eich have at it, debating vendor prefixes. I'm holding my breath.
mozilla
css
development
w3c
february 2012 by gordonbrander
Misdirection | Infrequently Noted
february 2012 by gordonbrander
A very compelling counterpont to @t's vendor prefix position.
css
web
design
development
february 2012 by gordonbrander
CSS Compatibility and Internet Explorer
february 2012 by gordonbrander
Looks like IE is keeping track of this now. Compatibility tables for every major version of IE, dating back to 5.
ie
bug
css
learn
february 2012 by gordonbrander
HTML5 Please - Use the new and shiny responsibly
january 2012 by gordonbrander
This is great: the quick on whether you should use a given HTML5 feature.
html
reference
learn
javascript
css
development
web
january 2012 by gordonbrander
Widget Theming: Shadow DOM Example
january 2012 by gordonbrander
Whoah. A practical implementer-focused look at what the Shadow DOM and W3C widgets can do, with a likely scenario.
web
development
learn
css
javascript
standard
january 2012 by gordonbrander
Gridpak - The Responsive grid generator
january 2012 by gordonbrander
A responsive grid generator.
css
development
web
tool
january 2012 by gordonbrander
CSS buttons with pseudo-elements
january 2012 by gordonbrander
A nice set of 3d-esque buttons with CSS generated content (pseudo-elements).
css
development
design
web
january 2012 by gordonbrander
Does this easing make me look jerky? - Val Head is totally into design, type & code.
css
design
development
web
animation
december 2011 by gordonbrander
If you look at Chris' example below, it's pretty clear that the "ease" transition looks very jerky and just doesn't work well on the shorter width transition...
Luckily for us. other easing keywords, even one that is rather similar to "ease" like "ease-in-out", don't suffer from the jerkiness in similar situations.
december 2011 by gordonbrander
Move The Web Forward | Guide to getting involved with standards and browser development
december 2011 by gordonbrander
How to contribute to the web as a whole. Links and suggestions by Paul Irish and more.
css
web
standard
community
html
javascript
december 2011 by gordonbrander
dochub | Instant Documentation Search
december 2011 by gordonbrander
A fast type-ahead search interface for MDN
css
javascript
html
documentation
development
web
learn
december 2011 by gordonbrander
Chrome Developer Tools: Timeline Panel - Google Chrome Developer Tools - Google Code
december 2011 by gordonbrander
In-depth docs on Chrome's Developer Timeline tool, which can give you the deets on not just loading, but rendering and parsing time.
development
web
webkit
css
html
performance
december 2011 by gordonbrander
CSS box-shadow Can Slow Down Scrolling - Airbnb Engineering
december 2011 by gordonbrander
Taking a look at the cost of box shadow.
webkit
css
ios
performance
web
development
from iphone
december 2011 by gordonbrander
Sickdesigner.com | Masonry CSS or Getting awesome with CSS3
november 2011 by gordonbrander
Masonry-style layout with CSS3 column module.
css
layout
web
development
design
november 2011 by gordonbrander
Writing forward-compatible websites - MDN
november 2011 by gordonbrander
Great writeup from Mozilla.
javascript
html
css
development
pattern
november 2011 by gordonbrander
Animatable: One property, two values, endless possiblities
november 2011 by gordonbrander
Lea Verou exploring possibilities with CSS animation.
animation
css
web
design
development
learn
november 2011 by gordonbrander
#eCSStender.org { content: "Homepage"; }
november 2011 by gordonbrander
Bringing CSS3 selectors to IE. Includes compound classes.
css
javascript
ie
bug
polyfill
november 2011 by gordonbrander
CSS3 Secrets 10 things you might not know about CSS3
november 2011 by gordonbrander
An impressive number of obscure-but-useful CSS tricks, including animation stuff, custom checkboxes, more.
css
web
development
learn
november 2011 by gordonbrander
UI Pattern Library - By Aarron Walter of Mailchimp | Flickr - Photo Sharing!
november 2011 by gordonbrander
A styleguide for Mailchimp's large and well-organized modular front-end architecture.
html
development
css
pattern
web
november 2011 by gordonbrander
Ceaser - CSS Easing Animation Tool - Matthew Lein
november 2011 by gordonbrander
An interface for generating CSS3 Animation easing equations. It includes all of the classic Penner equations (EaseOutQuart, EaseOutQuint, EaseOutSine, etc).
animation
css
tool
web
design
development
november 2011 by gordonbrander
SimpLESS - Your LESS CSS Compiler
october 2011 by gordonbrander
A cross-platform LESS compiler GUI built in Appcelerator Titanium.
opensource
nodejs
design
css
tool
development
windows
mac
app
october 2011 by gordonbrander
A Modest Proposal for CSS3 Animations - Snook.ca
october 2011 by gordonbrander
A clever trick for CSS animating opacity from display:block.
css
animation
learn
web
development
october 2011 by gordonbrander
An explanation of the CSS animation on Apple's iPhone 4S webpage -- John B. Hall
october 2011 by gordonbrander
A nice dissection of a clever CSS3 animation.
animation
css
web
development
learn
inspiration
design
october 2011 by gordonbrander
Stylus
october 2011 by gordonbrander
Like SASS, but hotter, and written in Node. As whitespace-sensitive pre-compilers go, this one's syntax is ace (all the usual caveats of switching syntax apply).
css
nodejs
opensource
library
october 2011 by gordonbrander
cubic-bezier.com
october 2011 by gordonbrander
Lea Verou makes a tool for creating custom beziers for CSS3 animations.
css
animation
tool
october 2011 by gordonbrander
John Nack - CSS shaders: Hell yeah.
october 2011 by gordonbrander
A demo and overview.
css
webgl
design
development
october 2011 by gordonbrander
borderとtransitionを使ったエフェクト - jsdo.it - Share JavaScript, HTML5 and CSS
october 2011 by gordonbrander
Brilliant. CSS Transitions + border styles.
css
development
web
design
learn
october 2011 by gordonbrander
Sassy Mother Effing Text Shadow
september 2011 by gordonbrander
Insanity: a Lorenz Attractor implemented with CSS Text Shadow.
css
math
experiment
september 2011 by gordonbrander
BEM
september 2011 by gordonbrander
A component-based CSS framework (front-end legos). This one is more of a library.
css
framework
pattern
development
web
september 2011 by gordonbrander
Scalable and Modular Architecture for CSS
september 2011 by gordonbrander
A short web book by Jonathan Snook (@snookca) exploring how to create re-usable CSS (it's the approach we employ here that we dub "front-end legos").
architecture
design
development
css
web
pattern
september 2011 by gordonbrander
The makeup of the Open Web stack - destroy/dstorey
september 2011 by gordonbrander
A mega-collection of Web Technologies and how they fit together.
css
html
javascript
web
development
api
september 2011 by gordonbrander
Design & Build a Grid Based Web Design with CSS
september 2011 by gordonbrander
Note the trick for creating quick baseline/vertical grids in Photoshop.
css
design
grid
bdw2011
september 2011 by gordonbrander
Fluid Images — Unstoppable Robot Ninja
september 2011 by gordonbrander
The original reference.
css
design
bdw2011
responsivedesign
development
september 2011 by gordonbrander
CSS Mask-Image & Text | Trent Walton
september 2011 by gordonbrander
On CSS text masking.
css
typography
design
september 2011 by gordonbrander
#80: Media plugin bug in IE8 (standards mode) when max-width is defined on images - Issues - stubbornella/oocss - GitHub
september 2011 by gordonbrander
Looks like IE8 is collapsing images with max-width in some circumstances. Gross. http://jsbin.com/imuni6/edit#preview
ie8
bug
web
development
css
mobile
september 2011 by gordonbrander
Nicole Sullivan - CSS Tools for Massive Websites
september 2011 by gordonbrander
Video of a conference talk.
css
development
pattern
learn
film
september 2011 by gordonbrander
Fonts available for @font-face embedding - Webfonts.info
september 2011 by gordonbrander
A handy list of fonts available.
@font-face
css
typography
bdw2011
september 2011 by gordonbrander
HTML5 Rocks - Quick Guide to implement webfonts via @font-face
september 2011 by gordonbrander
A no-nonsense tutorial for web font embedding.
teaching
web
development
@font-face
typography
css
bdw2011
learn
september 2011 by gordonbrander
Awwwards | The CSS website Awards
august 2011 by gordonbrander
Lots of impressive work, very interaction/Javascript heavy. A bit like the old FWA awards site for modern web tech.
css
javascript
design
web
inspiration
html
august 2011 by gordonbrander
Collection - Diesel > Denim & Jeans
august 2011 by gordonbrander
Another Legwork production. HTML and Javascript. Impressive.
design
web
inspiration
javascript
html
css
august 2011 by gordonbrander
CSS3 Patterns Gallery
august 2011 by gordonbrander
This one makes you do a double-take: a variety of complex patterns, all constructed with CSS gradients.
css
design
development
web
august 2011 by gordonbrander
Twitter Bootstrap
august 2011 by gordonbrander
Twitter's CSS toolset has been open-sourced. Lots of default styles for grids, forms, etc. A nice time-saver.
css
framework
opensource
web
development
design
august 2011 by gordonbrander
A Smoother Page Load — Joni Korpi
august 2011 by gordonbrander
A clever approach to fading in content using TypeKit's loading API.
@font-face
css
javascript
design
august 2011 by gordonbrander
Adactio: Journal—Re-tabulate
august 2011 by gordonbrander
Brilliant: use media queries to reverse the position of the navigation and content.
css
mobile
development
august 2011 by gordonbrander
nathansmith/adapt at master - GitHub
august 2011 by gordonbrander
An alternate approach to responsive, relying exclusively on JS.
css
javascript
mobile
opensource
responsivedesign
august 2011 by gordonbrander
CSS transitions & media queries » Blog » Elliot Jay Stocks
july 2011 by gordonbrander
A clever idea: set css transitions on the body element when using media queries. All transitions are then animated.
css
mobile
animation
july 2011 by gordonbrander
Give an image, get a data-uri — Gist
july 2011 by gordonbrander
A class for converting an image to it's CSS base64 representation.
python
image
css
performance
july 2011 by gordonbrander
Shower
july 2011 by gordonbrander
Great prototype by an Opera dev for an HTML presentation template.
html
learn
inspiration
css
july 2011 by gordonbrander
StackLayout - A flexible width, component based CSS layout system
july 2011 by gordonbrander
A pretty clever responsive grid framework.
css
framework
layout
opensource
mobile
july 2011 by gordonbrander
New Zealand 100% Pure | Official Travel information from Tourism New Zealand
july 2011 by gordonbrander
Interesting use of scrolling-as-animation-cue.
animation
html
css
web
design
inspiration
javascript
july 2011 by gordonbrander
Pure CSS GUI icons (experimental) – Nicolas Gallagher
july 2011 by gordonbrander
Clever. Using pseudo-elements to design icons without images.
css
design
learn
july 2011 by gordonbrander
Cross Browser CSS Transforms – even in IE
june 2011 by gordonbrander
A css transforms polyfill that gets 3d transforms working in Internet Explorer -- event v6!
css
javascript
transforms
animation
3d
ie
polyfill
june 2011 by gordonbrander
CSS 101: interactive tutorial
june 2011 by gordonbrander
A good intro to CSS basics. Probably assign as reading for next time I teach.
css
learn
teaching
june 2011 by gordonbrander
LukeW | An Event Apart: The Responsive Designer’s Workflow
june 2011 by gordonbrander
Notes on Ethan Marcotte's talk @ EventApart.
web
design
mobile
css
pattern
june 2011 by gordonbrander
Cloud Four » Blog Archive » Where are the Mobile First Responsive Web Designs?
june 2011 by gordonbrander
Mobile first responsive design research.
css
design
web
development
mobile
from iphone
june 2011 by gordonbrander
320 and up
june 2011 by gordonbrander
Andy Clarke puts together a responsive design framework.
css
design
web
development
html
opensource
mobile
from iphone
june 2011 by gordonbrander
Less Framework 4
june 2011 by gordonbrander
The Less repsonsive layout framework is getting mature.
css
mobile
design
web
development
css
opensource
framework
grid
responsivedesign
mediaquery
june 2011 by gordonbrander
related tags
3d ⊕ @font-face ⊕ accessibility ⊕ ajax ⊕ animation ⊕ apache ⊕ api ⊕ app ⊕ apple ⊕ architecture ⊕ art ⊕ audio ⊕ bdw2011 ⊕ blog ⊕ book ⊕ bug ⊕ business ⊕ cache ⊕ cms ⊕ code ⊕ color ⊕ communication ⊕ community ⊕ computer ⊕ creativecommons ⊕ css ⊖ css3 ⊕ design ⊕ development ⊕ django ⊕ documentation ⊕ embed ⊕ epub ⊕ experiment ⊕ film ⊕ firefox ⊕ font ⊕ framework ⊕ grid ⊕ hack ⊕ haslayout ⊕ html ⊕ ie ⊕ ie6 ⊕ ie7 ⊕ ie8 ⊕ image ⊕ imported ⊕ inline-block ⊕ inspiration ⊕ ios ⊕ ipad ⊕ javascript ⊕ jekyll ⊕ jquery ⊕ js ⊕ kerning ⊕ law ⊕ layout ⊕ learn ⊕ lessc ⊕ library ⊕ mac ⊕ math ⊕ mediaquery ⊕ microformat ⊕ minimalism ⊕ mobile ⊕ mod_rewrite ⊕ mozilla ⊕ mvc ⊕ news ⊕ nodejs ⊕ opensource ⊕ optim ⊕ organization ⊕ osx ⊕ pattern ⊕ performance ⊕ person ⊕ philosophy ⊕ photo ⊕ photoshop ⊕ php ⊕ plugin ⊕ polyfill ⊕ portal ⊕ portfolio ⊕ publishing ⊕ python ⊕ reference ⊕ reset ⊕ resource ⊕ responsivedesign ⊕ ruby ⊕ sans-serif ⊕ script ⊕ site ⊕ snippet ⊕ standard ⊕ state ⊕ swiss ⊕ teaching ⊕ test ⊕ textmate ⊕ tool ⊕ toolbox ⊕ transforms ⊕ tv ⊕ typography ⊕ ui ⊕ usability ⊕ ux ⊕ w3c ⊕ web ⊕ webgl ⊕ webkit ⊕ wiki ⊕ windows ⊕ wireframe ⊕ wordpress ⊕ xml ⊕Copy this bookmark: