CSS

1319 bookmarks
Custom sorting
The Dark Side of the Grid (Part 2)
The Dark Side of the Grid (Part 2)
CSS Grid Layout is one of the most exciting new CSS specifications but it also creates new dangers regarding accessibility and UX.
·matuzo.at·
The Dark Side of the Grid (Part 2)
7 CSS Card Layouts
7 CSS Card Layouts
Collection of free HTML and CSS card layout code examples.
·freefrontend.com·
7 CSS Card Layouts
Grids All The Way Down by Rachel Andrew
Grids All The Way Down by Rachel Andrew
Two years have passed since Grid Layout launched across all major browsers. However as it was landing and becoming available for us to use in production, work on the spec continued. Due to this work, Level 2 of the Grid Specification contains the most wanted feature as people come to grips with the spec - subgrid.
·noti.st·
Grids All The Way Down by Rachel Andrew
Subgrid
Subgrid
Level 2 of the CSS Grid Layout specification includes a subgrid value for grid-template-columns and grid-template-rows. This guide details what subgrid does, and gives some use cases and design patterns that are solved by the feature.
·developer.mozilla.org·
Subgrid
Grid Critters
Grid Critters
Completely master CSS Grid once and for all by playing Grid Critters: the Grid Mastery Game.
·gridcritters.com·
Grid Critters
CSSFX - Beautifully simple click-to-copy CSS effects
CSSFX - Beautifully simple click-to-copy CSS effects
Browse a carefully crafted collection of loaders, hover effects, transitions, and other CSS effects to use in your next project. Effects are designed with an emphasis on fluidity, simplicity, and ease of use.
·cssfx.dev·
CSSFX - Beautifully simple click-to-copy CSS effects
Part 1: Understanding implicit tracks
Part 1: Understanding implicit tracks
When observing people getting to grips with CSS Grid, I’ve noticed a few issues that catch people out more often than others, or present…
·css-irl.info·
Part 1: Understanding implicit tracks
How To Style Better Link Underlines
How To Style Better Link Underlines
When you use text-decoration: underline; in CSS it sometimes creates a strong line that may seem darker than the actual text, for example: You don’t have full control over the underline style, but you can use, for example, border-bottom: 1px solid #C9A4F0;, to create a lighter and more appealing underline that is still clearly visible, […]
·rafaltomal.com·
How To Style Better Link Underlines
A Strategy Guide To CSS Custom Properties
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.
·smashingmagazine.com·
A Strategy Guide To CSS Custom Properties
CSS Variables - var() Function
CSS Variables - var() Function
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.
·w3schools.com·
CSS Variables - var() Function
var()
var()
The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.
·developer.mozilla.org·
var()
Using CSS custom properties (variables)
Using CSS custom properties (variables)
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).
·developer.mozilla.org·
Using CSS custom properties (variables)