recentpopularlog in

garrettc : css3   126

« earlier  
Clip Paths Know No Bounds
"Dan Wilson throws some Christmas shapes and gives us a run down of different ways to use CSS polygon clip paths to create interesting a flexible shapes with less code that you might have thought."
css  css3  clippath  webdesign  webdevelopment 
december 2018 by garrettc
A Strategy Guide To CSS Custom Properties
"Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. To get the most out of them, we might need a strategy for how we write and structure CSS with custom properties."
css  webdesign  css3 
may 2018 by garrettc
I'm always forgetting the URL of this.
css3  funny  html5  humour  handbag 
february 2018 by garrettc
Fun with Viewport Units
"Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them."
css  layout  webdesign  responsivedesign  typography  css3 
june 2017 by garrettc
Practical CSS Grid: Adding Grid to an Existing Design
Understanding and using Grid is easier than you might expect. The day Grid support shipped in Firefox 52, I decided on the spur of the moment to convert the basic layout of my personal site to use Grid. And it was a fairly simple process—five minutes to write the grid styles, then 15-20 spent troubleshooting.
css  css3  grid  webdesign  webdevelopment 
march 2017 by garrettc
Announcing CSS Grid & the Firefox Grid Inspector Tool - YouTube
CSS Grid has arrived in Firefox 52. Here's brief look at some of the things CSS Grid can do, along with a tour of the Firefox Grid Inspector.
IFTTT  YouTube  video  firefox  css3  grid  webdesign 
march 2017 by garrettc
CSS blend modes and filters playground
FilterBlend is a playground for the new CSS background-blend-mode and filter properties.
css  css3  webdesign  webdevelopment  design  tool  colour  blending 
february 2017 by garrettc
Understanding Flexbox: Everything you need to know
This article will cover all the fundamental concepts you need to get good with the CSS Flexbox model.
css  css3  flexbox  tutorial  webdesign  webdevelopment  layout 
january 2017 by garrettc
Fixed Scrolling Disappearing Banner
I recently saw a very interesting visual effect that I can only describe in a series of antonyms: a fixed, scrolling, disappearing banner. This article details my recreation and explanation of the effect.
css  css3  html  html5  scrolling  webdesign  inspiration 
november 2016 by garrettc
Learn to Code HTML & CSS
"Learn to Code HTML & CSS has one goal — to teach people how to build beautiful and intuitive websites by way of clear and organized lessons. The guide covers a variety of web design and development topics, ranging from beginner to advanced skill levels."
book  webdesign  webdevelopment  html5  css3  education  learning 
november 2016 by garrettc
"A free tutorial to learn HTML and CSS. It's short (just as long as a 50 page book), simple (for everyone: beginners, designers, developers), and free (as in 'free beer' and 'free speech'). It consists of 50 lessons across 4 chapters, covering the Web, HTML5, CSS3, and Sass."
book  webdesign  webdevelopment  html5  css3  sass  education  learning 
november 2016 by garrettc
Responsive "background-size: contain" Video
Proof-of-concept for creating responsive video similar to "background-size: contain".
video  css  css3  webdesign  designthinking  worldwideweb 
november 2016 by garrettc
CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout
"In this article, Rachel Andrew explains that by understanding flexbox you are very close to understanding much of grid layout."
css  css3  flexbox  grid  webdevelopment  webdesign  learning 
november 2016 by garrettc
Animated Flexbox Playground
Animating Flexbox properties using relative animations. Layout is done with CSS. [GreenSock]( is used to animate the difference in...
css  flexbox  tools  css3  webdesign  webdevelopment 
may 2016 by garrettc
Blending Modes Demystified
With a few lines of CSS, we can now flexibly add Photoshop-level blending effects to our designs. @revoltpuppy leads the way.
webdesign  css3  css  colour 
january 2016 by garrettc
The New CSS Layout - The dot Post
We are in the middle of the biggest change in how we lay out webpages since we switched from tables to CSS. Rachel explains how Flexbox, CSS Grid Layout and the Box Alignment Model work together to create a new system for layout.
css  flexbox  css3  grid  layout  webdesign  webdevelopment 
december 2015 by garrettc
A 3D BMO (Beemo), from Adventure Time, Made with CSS
Oh my Glob, it's a BMO in my web browser made from CSS only, and it totally rotates around and does stuff when I press the buttons. Algebraic!
css  css3  3d  adventuretime  character  webdevelopment 
december 2015 by garrettc
Using Flexbox today
Outlining a strategy for using Flexbox in 2015, including examples, possibilities and troubleshooting
css  css3  layout  tutorial  flexbox  webdesign  webdevelopment 
september 2015 by garrettc
Caniuse for the command line
"Just what you've always wanted, it's a caniuse command line tool! All the power of with none of the nice UI or interactivity!"
caniuse  webdevelopment  browser  css  html  html5  css3 
june 2015 by garrettc
Solved by Flexbox — Cleaner, hack-free CSS
Very convincing set of demos showing how CSS flexbox solves a wide range of classic CSS problems: via
css  css3  flexbox  webdesign 
may 2015 by garrettc
It’s about time. In this article we’ll take on the challenge of creating and animating a clock, using simple CSS animations as well as JavaScript...
javascript  animation  clock  css  css3  svg 
march 2015 by garrettc
Mastering the :nth-child
Comprehensive overview of nth-child selector syntax.
css  css3  tutorial  webdevelopment  nthchild 
october 2014 by garrettc
Grid by Example
Simple usage examples for the CSS3 Grid Layout Module from Rachel Andrew.
css  css3  grid  layout  html  w3c  specification  webdesign 
september 2014 by garrettc
Want an arrow on your css box? This will generate the code for you.
css  css3  webdesign  layout  generator 
april 2014 by garrettc
CSS3 Click Chart
Reference guide with examples for CSS3
css3  css  webdevelopment  webdesign  reference 
september 2012 by garrettc
calc - MDN
If you haven’t heard of `calc()` before, here’s a handy CSS3 reference from Mozilla.
css  css3  webdesign  webdevelopment  maths  calc  mathematics 
july 2012 by garrettc
Creating an angled split feature area with CSS transforms - destroy/dstorey
This is a clever use of CSS transforms to create a comic-book style split teaser.
css  css3  webdesign  userinterface  transforms 
july 2012 by garrettc
Understanding the CSS Transforms Matrix
I knew that A-level in maths would come in handy one day.
css  css3  transforms  webdesign  maths  mathematics 
june 2012 by garrettc
Useful :nth-child Recipes | CSS-Tricks
Because I can never have enough documentation for nth-child and nth-of-type expressions.
css  css3  tips  webdesign  nthchild 
april 2012 by garrettc
Free icon package made only in CSS
css  css3  icon  webdesign  resource 
april 2012 by garrettc
CSS3 progress bars
Progress bars in CSS, light-weight, requiring no javascript or images.
css  css3  webdesign  userinterface 
january 2012 by garrettc
An interactive playground for quickly testing snippets of CSS and HTML code
css  css3  html  webdevelopment  webdesign 
december 2011 by garrettc
Idiot's Guide to viewport and media queries
Useful deck of 16 slides for when you get lost in the maze of twisty passages that are media queries. From the HTML5 Boilerplate team.
css  css3  webdesign  webdevelopment  mediaqueries  responsivedesign 
december 2011 by garrettc
CSS3 Patterns Gallery
Wow, pure CSS3 background patterns. Very clever stuff.
css  css3  patterns  textures  webdesign  background  webdevelopment  inspiration  designthinking 
december 2011 by garrettc
Bulletproof font-face
How to use font-face for as many browsers as possible.
css  css3  typography  font-face  webdesign 
december 2011 by garrettc
A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter)
I like the idea of adding dev CS that displays when breakpoints are triggered.
css  css3  mediaqueries  webdevelopment 
november 2011 by garrettc
Original Hover Effects with CSS3
Some very nice effects using CSS3 transitions and animation
css  css3  demo  effects  webdesign 
november 2011 by garrettc
Joni Korpi's successor to Less Framework. Doesn't really contain any code, it's more about the idea.
css  css3  responsivedesign  grid  webdesign 
october 2011 by garrettc
Experiments with CSS text-shadow
Small examples that show the power of CSS3.
css3  webdesign  typography 
july 2011 by garrettc
Responsive Data Tables
Using responsive design techniques to reformat data tables for small screens.
css3  mediaqueries  responsivedesign  webdesign  data 
june 2011 by garrettc
When can I use... Support tables for HTML5, CSS3, etc
Compatibility tables for support of HTML5, CSS3, SVG and more.
browser  css3  html5  reference  technology 
june 2011 by garrettc
Laker - Designing digital publications in HTML5
A collections of files, frameworks, styles and tips for designing digital publications in HTML5
ebook  publishing  framework  html5  css3  ipad  ipod  tablet 
april 2011 by garrettc
Shows different browser implementations of box-shadow. There are differences, but they're close enough to not matter.
css  css3  reference 
april 2011 by garrettc
Ultimate CSS Gradient Generator
Incredibly useful tool from the maker of the Colorzilla Firefox add-on.
css3  webdesign  generator  gradient  tools 
april 2011 by garrettc
320 and up
A responsive boilerplate that starts with tiny screen first to reduce loading of unneeded assets. Can be used in conjunction with HTML5Boilerplate
responsivedesign  css3  mediaqueries  webdesign  webdevelopment  html5 
april 2011 by garrettc
The Cicada Principle and Why It Matters to Web Designers
Using prime numbers to create small seamless background images that rarely repeat.
css  css3  webdesign  images  background 
april 2011 by garrettc
A JavaScript animation library using CSS transforms and transitions
animation  css  css3  javascript  library  webdevelopment 
april 2011 by garrettc
Head JS :: The only script in your HEAD
"Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD. A concise solution to universal issues."
html  html5  css  css3  javascript  webdevelopment  performance 
april 2011 by garrettc
Controlling width with CSS3 box-sizing
Using content-box and border-box models.
css  css3  webdesign 
april 2011 by garrettc
Ceaser - CSS Easing Animation Tool
Tool for generating CSS3 animation settings.
animation  css3  tools 
march 2011 by garrettc
Fast & lightweight js library for min/max-width CSS3 media query support in IE6-8
css3  javascript  responsivedesign  mediaqueries  webdevelopment  webdesign  css  library 
march 2011 by garrettc
CSS3 Gradient Generator
Complicated syntax, this will make things a bit easier.
css3  css  generator  gradient  webdesign  colour 
march 2011 by garrettc
Hardboiled CSS3 Media Queries
Examples from Andy Clarke's book "Hardboiled Web Design".
css3  css  mediaqueries  webdevelopment  webdesign  responsivedesign 
february 2011 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:

to read