Note: This section of the site is under heavy construction, tread carefully.
127 bookmarks by garrettc
Bookmarked on • #
"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."
Bookmarked on • #
Bookmarked on • #
"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."
Bookmarked on • #
Bookmarked on • #
Bookmarked on • #
"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."
Bookmarked on • #
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.
Bookmarked on • #
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.
Bookmarked on • #
FilterBlend is a playground for the new CSS background-blend-mode and filter properties.
Bookmarked on • #
This article will cover all the fundamental concepts you need to get good with the CSS Flexbox model.
Bookmarked on • #
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.
Bookmarked on • #
"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."
Bookmarked on • #
"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."
Bookmarked on • #
Proof-of-concept for creating responsive video similar to "background-size: contain".
Bookmarked on • #
"In this article, Rachel Andrew explains that by understanding flexbox you are very close to understanding much of grid layout."
Bookmarked on • #
Animating Flexbox properties using relative animations. Layout is done with CSS. [GreenSock](http://greensock.com) is used to animate the difference in...
Bookmarked on • #
Bookmarked on • #
Bookmarked on • #
With a few lines of CSS, we can now flexibly add Photoshop-level blending effects to our designs. @revoltpuppy leads the way.
Bookmarked on • #
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.
Bookmarked on • #
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!
Bookmarked on • #
Outlining a strategy for using Flexbox in 2015, including examples, possibilities and troubleshooting
Bookmarked on • #
Bookmarked on • #
"Just what you've always wanted, it's a caniuse command line tool! All the power of caniuse.com with none of the nice UI or interactivity!"
Bookmarked on • #
Very convincing set of demos showing how CSS flexbox solves a wide range of classic CSS problems: via @philwalton
Bookmarked on • #
Bookmarked on • #
Simple usage examples for the CSS3 Grid Layout Module from Rachel Andrew.
Bookmarked on • #
Bookmarked on • #
Want an arrow on your css box? This will generate the code for you.
Bookmarked on • #
Bookmarked on • #
Bookmarked on • #
Scaling background images in responsive layouts.
Bookmarked on • #
If you haven’t heard of `calc()` before, here’s a handy CSS3 reference from Mozilla.
Bookmarked on • #
This is a clever use of CSS transforms to create a comic-book style split teaser.
Bookmarked on • #
I knew that A-level in maths would come in handy one day.
Bookmarked on • #
Bookmarked on • #