CSS

1311 bookmarks
Custom sorting
Notched Boxes | CSS-Tricks
Notched Boxes | CSS-Tricks
Say you're trying to pull off a design effect where the corner of an element are cut off. Maybe you're a Battlestar Galactica fan? Or maybe you just like the unusual effect of it, since it avoids looking like a typical rectangle. I suspect there are many ways to do it. Certainly, you could use multiple backgrounds to
·css-tricks.com·
Notched Boxes | CSS-Tricks
What Houdini Means for Animating Transforms | CSS-Tricks
What Houdini Means for Animating Transforms | CSS-Tricks
I've been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn't animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye
·css-tricks.com·
What Houdini Means for Animating Transforms | CSS-Tricks
Layout Land
Layout Land
Learn what's now possible in graphic design on the web — layout, CSS Grid, and more. A series for designers and web developers. Created by Jen Simmons, Mozil...
·youtube.com·
Layout Land
Use Clip Path to Vary Your Designs on the Web
Use Clip Path to Vary Your Designs on the Web
Everything on the web is a rectangle, but it doesn't have to be. Use the Clip Path property to alter elements in your layouts to be polygons, circles, triang...
·youtube.com·
Use Clip Path to Vary Your Designs on the Web
SmashingConf London 2018 - RACHEL ANDREW
SmashingConf London 2018 - RACHEL ANDREW
INTO THE WEEDS OF CSS LAYOUT There are lots of reasons to get excited about new layout methods in CSS, but what impact does moving to Flexbox and Grid have on performance? And once you have decided to adopt new layout methods, are some techniques more performant than others? In this talk we’ll take a serious look at the algorithms your browser is using in order to lay things out using Flexbox and Grid. By understanding how these algorithms work, you’ll be in a better position to make good decisions around layout, and fully take advantage of the possible performance gains of new CSS layout.
·vimeo.com·
SmashingConf London 2018 - RACHEL ANDREW
CSS Basics: Styling Links Like a Boss | CSS-Tricks
CSS Basics: Styling Links Like a Boss | CSS-Tricks
You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.
·css-tricks.com·
CSS Basics: Styling Links Like a Boss | CSS-Tricks
Faux Grid Tracks
Faux Grid Tracks
Hack the Grid with Eric Meyer as he explores different methods for replicating a tic-tac-toe board using CSS Grid.
·aneventapart.com·
Faux Grid Tracks
CSS interactive examples - help wanted
CSS interactive examples - help wanted
Over the last while, we’ve been working on a project to bring interactive examples to MDN pages. Our current status with this is: we’ve designed and implemented editors for interactive JavaScript and CSS reference pages we’ve written examples for just about all the JavaScript pages we’ve written examples for some of the CSS pages One of the next steps is to write examples for the rest of the CSS pages. These things are fairly quick and quite fun to write, so if anyone wants to help out, we’d ...
·discourse.mozilla.org·
CSS interactive examples - help wanted
[Flex Tutorial] Learn How to Take Command of CSS Flexbox 2018
[Flex Tutorial] Learn How to Take Command of CSS Flexbox 2018
In this post, I will be answering some of the most common questions of CSS Flex Box and show you how to start using flexbox in your projects. I will also show you how you can use Bootstrap 4 to make flex responsive. Read Tutorial
·bootstrapcreative.com·
[Flex Tutorial] Learn How to Take Command of CSS Flexbox 2018
Creating the Periodic Table with Grid CSS | Responsive Web Design
Creating the Periodic Table with Grid CSS | Responsive Web Design
The CSS Grid specification provides us with the ability to take web design to the next level without having to succumb to adding in otherwise un-needed HTML or the use of CSS hacks (looking at your floats).
·responsivedesign.is·
Creating the Periodic Table with Grid CSS | Responsive Web Design