Found 293 bookmarks
Custom sorting
Art Direction For The Web Using CSS Shapes
Art Direction For The Web Using CSS Shapes
Last year, Rachel Andrew wrote “[Take A New Look At CSS Shapes](https://www.smashingmagazine.com/2018/09/css-shapes/)” where she reintroduced readers to the basics of using CSS Shapes. In this new tutorial, Andy Clarke expands on the topic of “[Art Direction for the Web](https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/)” with CSS Shapes to create exciting and inspired new design ideas.
·smashingmagazine.com·
Art Direction For The Web Using CSS Shapes
CSS Grid - Center Last Item
CSS Grid - Center Last Item
CSS Grid is wonderful for building multi-column layouts, but if you have one less item in your grid than you expected, it will look off balance. I'll show you how to center the last row.
·billerickson.net·
CSS Grid - Center Last Item
Building Robust Layouts With Container Units
Building Robust Layouts With Container Units
WWhen inspecting most other grids in DevTools, you’ll notice that column widths are dependent on their parent element. This article will help you understand how to overcome these limitations using CSS variables — and how you can start building with Container Units.
·smashingmagazine.com·
Building Robust Layouts With Container Units
Breaking Boxes With CSS Fragmentation
Breaking Boxes With CSS Fragmentation
What is fragmentation, why might you want to use it, and what is the current state of browser support? Rachel Andrew has the answers.
·smashingmagazine.com·
Breaking Boxes With CSS Fragmentation
CSS element() function - Vincent De Oliveira
CSS element() function - Vincent De Oliveira
In July, I wrote about advanced CSS filters techniques, such as backdrop-filter and filter(). Today, I want to share a much more awesome CSS feature. But before starting, let me warn you: the feature I’ll show is only supported in Firefox for now and no other browser vendor has shown interest with. M…
·iamvdo.me·
CSS element() function - Vincent De Oliveira
Animating CSS Grid
Animating CSS Grid
Soooo, Jen Simmons just dropped a surprise bombshell on Twitter – CSS Grid and properties are now animatable in Firefox Nightly…
·css-irl.info·
Animating CSS Grid
Sliding Doors of CSS
Sliding Doors of CSS
Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too!
·alistapart.com·
Sliding Doors of CSS
Managing Flow and Rhythm with CSS Custom Properties
Managing Flow and Rhythm with CSS Custom Properties
Andy Bell rings out a call for a more flexible method of achieving consistent vertical rhythm across components within a page. Using a technique of CSS custom properties to establish spacing inherited through the cascade, you can make sure your choir are all singing from the same song sheet.
·24ways.org·
Managing Flow and Rhythm with CSS Custom Properties
A CSS Venn Diagram
A CSS Venn Diagram
A few years ago I made a Venn diagram using floats and absolute positioning. It was fine. Nothing to really brag about, but it got the point across. I had use for CSS shapes in a project and wanted to play around beyond what the project itself allowed. I decided…
·adrianroselli.com·
A CSS Venn Diagram
Animated Grid Previews | Codrops
Animated Grid Previews | Codrops
A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked.
·tympanus.net·
Animated Grid Previews | Codrops
Negative Grid Lines
Negative Grid Lines
Did you know you can use negative line numbers to position grid items with CSS Grid? I didn’t until recently – or rather, I hadn’t given it…
·css-irl.info·
Negative Grid Lines