Note: This section of the site is under heavy construction, tread carefully.

Bookmarks tagged with “css3”

127 bookmarks by garrettc



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."

Bookmarked on #



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."

Bookmarked on #




ooOOooh!

I'm always forgetting the URL of this.

Bookmarked on #


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."

Bookmarked on #


Griddy

Learn the CSS Grid Spec

Bookmarked on #


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.

Bookmarked on #


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.

Bookmarked on #


CSS blend modes and filters playground

FilterBlend is a playground for the new CSS background-blend-mode and filter properties.

Bookmarked on #


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.

Bookmarked on #


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.

Bookmarked on #


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."

Bookmarked on #


MarkSheet

"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 #



Responsive "background-size: contain" Video

Proof-of-concept for creating responsive video similar to "background-size: contain".

Bookmarked on #


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."

Bookmarked on #


Edgar Allen Poe | The Raven

CSS Shapes demo.

Bookmarked on #


Animated Flexbox Playground

Animating Flexbox properties using relative animations. Layout is done with CSS. [GreenSock](http://greensock.com) is used to animate the difference in...

Bookmarked on #



CSS Custom Properties explained

CSS Custom Properties explained

Bookmarked on #




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.

Bookmarked on #


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.

Bookmarked on #


Flexbox Froggy

A game for learning CSS flexbox

Bookmarked on #


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!

Bookmarked on #


Using Flexbox today

Outlining a strategy for using Flexbox in 2015, including examples, possibilities and troubleshooting

Bookmarked on #


Flexbox Quote Bricks

Image plus quotes that stack

Bookmarked on #



What is Flexbox?

A nice primer on flexbox.

Bookmarked on #


Caniuse for the command line

"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 #


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 @philwalton

Bookmarked on #



Animation

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...

Bookmarked on #


Mastering the :nth-child

Comprehensive overview of nth-child selector syntax.

Bookmarked on #


Grid by Example

Simple usage examples for the CSS3 Grid Layout Module from Rachel Andrew.

Bookmarked on #



cssarrowplease

Want an arrow on your css box? This will generate the code for you.

Bookmarked on #






CSS3 Click Chart

Reference guide with examples for CSS3

Bookmarked on #


calc - MDN

If you haven’t heard of `calc()` before, here’s a handy CSS3 reference from Mozilla.

Bookmarked on #


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.

Bookmarked on #


Understanding the CSS Transforms Matrix

I knew that A-level in maths would come in handy one day.

Bookmarked on #