Found 293 bookmarks
Custom sorting
Block Links, Cards, Clickable Regions, Etc.
Block Links, Cards, Clickable Regions, Etc.
Whether you call them cards, block links, or some other thing, the construct of making an area of content clickable (tappable, Enter-key-able, voice-activatable, etc.) is not new. While hit area size is mostly a usability issue, marketers often want a larger click area around their calls to action (CTAs) to…
·adrianroselli.com·
Block Links, Cards, Clickable Regions, Etc.
CSS Tutorial: Create Diagonal Layouts Like It's 2020
CSS Tutorial: Create Diagonal Layouts Like It's 2020
Layouts with diagonal sections are quite popular for several years now. You will probably not find it in the articles titled "Design trends for 2020". But I think it is here to stay. It is one tool designers can use to bring some dynamic to all the rectangular boxes with boring 90-degree angles.
·9elements.com·
CSS Tutorial: Create Diagonal Layouts Like It's 2020
Understanding CSS Grid: Creating A Grid Container
Understanding CSS Grid: Creating A Grid Container
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid.
·smashingmagazine.com·
Understanding CSS Grid: Creating A Grid Container
Z’s Still Not Dead Baby, Z’s Still Not Dead
Z’s Still Not Dead Baby, Z’s Still Not Dead
Andy Clarke digs deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps it’s time to let a different style of design flourish. What a relief.
·24ways.org·
Z’s Still Not Dead Baby, Z’s Still Not Dead
CSS Circles
CSS Circles
I accidentally became Cloud Four’s resident expert on dynamic circular containing elements. Here are my tips and tricks.
·cloudfour.com·
CSS Circles
Solving Problems With CSS Grid: The Gantt Chart
Solving Problems With CSS Grid: The Gantt Chart
We recently published a tutorial explaining how to build a JavaScript-driven Gantt Chart. I think it’s the perfect case study for CSS Grid, so in this tutorial we’ll see how well suited CSS Grid...
·webdesign.tutsplus.com·
Solving Problems With CSS Grid: The Gantt Chart
Multi-Line Truncation with Pure CSS
Multi-Line Truncation with Pure CSS
Truncating a single line of text if is fairly straightforward. Truncating multiple lines is a bit harder. Using just CSS (no JavaScript or server-side
·css-tricks.com·
Multi-Line Truncation with Pure CSS
Smooth scrolling links with only CSS
Smooth scrolling links with only CSS
My most popular open source project is Smooth Scroll, a script that lets you animate scrolling with anchor links. Today, I want to show you how to achieve the same effect with only CSS. I’ll also talk about when and why you might want to use a JavaScript version anyways. Scroll Behavior The scroll-behavior CSS property tells the browser how to handle scrolling triggered by anchor links and such.
·gomakethings.com·
Smooth scrolling links with only CSS
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