Bookmarks tagged with #css.
Show all
Show all
Pacchetto di CSS: 2023!
Il 2023 è stato un anno fantastico per CSS. Scopri quali contenuti sono arrivati quest'anno a Chrome e alla piattaforma web.
Saved
on: 2023-12-08
An Interactive Guide to CSS Grid
CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.
Saved
on: 2023-11-21
(9) Using CSS custom properties like this is a waste - YouTube
If you're interested in checking out ICodeThis, you can find it here: https://icodethis.com/?ref=kevin and if you want to sign up for one of their premium pl...
Tags:
#css
Saved
on: 2023-10-23
Responsive type scales with composable CSS utilities
With the help of calc(), clamp() and CSS vars, we can create composable, responsive, and fluid type scales that smoothly adapts to viewport and container widths.
Tags:
#css
Saved
on: 2023-09-24
Scroll-Based Layout Animations | Codrops
An exploration of different scroll based layout switch animations using GSAP's ScrollTrigger and Flip.
Saved
on: 2023-08-01
The Rules of Margin Collapse
“Margin collapse” has a dastardly reputation, one of the trickier parts of CSS. Fortunately, it gets a lot easier once you learn a few rules! In this tutorial, we take a deep dive into the governing principles, and learn how to use them to our advantage.
Tags:
#css
Saved
on: 2023-02-28
Holograms, light-leaks and how to build CSS-only shaders - Robb Owen
Get a shiny WebGL look without actually using WebGL. In this article we take a look at how CSS blend modes unleash the potential of cool compositing effects without the need for JavaScript
Tags:
#css
Saved
on: 2022-11-03
Randoma11y - Accessible color combinations
Discover millions of accessible color combinations with RandomA11y, the real-time color playground.
Saved
on: 2022-10-17
CSS mesh gradients generator: Mesher Tool by CSS Hero
A Free tool to create beautiful mesh gradients only with CSS code. Use your own colors or randomly generated ones to build the trendiest CSS gradients of 2023
Saved
on: 2022-10-17
Why is z-index not working?! - Explaining CSS Stacking Context - DEV Commun
Dimensions are weird. While most web apps seem to focus on the x and y axis, representing a 2D plane...
Tags:
#css
Saved
on: 2022-10-09
CSS Grid and Custom Shapes, Part 2 | CSS-Tricks - CSS-Tricks
Alright, so the last time we checked in, we were using CSS Grid and combining them with CSS clip-path and mask techniques to create grids with fancy shapes.
Tags:
#css
Saved
on: 2022-08-23
✨Style Queries | Una Kravets Online✨
Exploring when and how you would use style queries in your day-to-day work.
Saved
on: 2022-06-28
Magical SVG Techniques — Smashing Magazine
SVGs are scalable, flexible, and, most importantly, lightweight. And, well, they have even more to offer than you might think. Smart SVG techniques, from generative SVG grids to SVG paths with masks, grainy SVG gradients, cut-out effects and fractional SVG stars. Let’s look at some magical SVG techniques that you can use right away.
Saved
on: 2022-05-27
The Surprising Truth About Pixels and Accessibility: should I use pixels or
“Should I use pixels or rems?”. In this comprehensive blog post, we'll answer this question once and for all. You'll learn about the accessibility implications, and how to determine the best unit to use in any scenario.
Tags:
#css
Saved
on: 2022-05-17
10 modern layouts in 1 line of CSS - YouTube
In this dynamic talk, Una goes over the power of modern CSS layout techniques by highlighting a few key terms and how much detail can be described in a singl...
Saved
on: 2022-02-18
A New Container Query Polyfill That Just Works | CSS-Tricks - CSS-Tricks
There is an easy-to-use CSS container query polyfill now. You essentially conditionally load it and forget about it. Then write spec-compliant container queries code.
Tags:
#css
Saved
on: 2022-01-08
Pico CSS
Minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
Tags:
#css
Saved
on: 2021-12-15
Defensive CSS
A list of defensive CSS techniques to avoid potential future issues
Tags:
#css
Saved
on: 2021-12-10
Glitch effect on text in pure css
Personal blog of Julien (jvoisin) Voisin
Tags:
#css
Saved
on: 2021-12-02
CSS is Going Gosh-Darned Hog Wild, I Tell Ya What | CSS-Tricks
As someone just sittin' back watching CSS evolve, it feels like we're at one of the hottest moments of innovation in CSS history. It was really something when
Tags:
#css
Saved
on: 2021-10-14
Less Absolute Positioning With Modern CSS - Ahmad Shadeed
How to use use position:absolute less by leveraging modern CSS
Tags:
#css
Saved
on: 2021-10-14
No, Utility Classes Aren't the Same As Inline Styles | frontstuff
Half a decade after the first commit of the pioneering ACSS, utility-first CSS is more popular than ever. With success comes many adepts but also a fair shar...
Saved
on: 2021-06-28
Intrinsic Typography is the Future of Styling Text on the Web | CSS-Tricks
The way we style text hasn’t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms
Saved
on: 2021-04-21
content-visibility: the new CSS property that boosts your rendering perform
The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. This article shows you how to use this new CSS property for faster initial load times, using the auto keyword. You will also learn about the CSS Containment Spec and other values for content-visibility that give you more control over how your content renders in the browser.
Saved
on: 2021-03-08
"Tailwind CSS: From Zero to Production" on YouTube – Tailwind CSS
Today we're excited to release Tailwind CSS: From Zero to Production, a new screencast series that teaches you everything you need to know to go from zero to production with Tailwind CSS v2.0.
Saved
on: 2021-02-17
CSS transitions and hover animations, an interactive guide
This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental building blocks we need to create microinteractions and other animations.
Tags:
#css
Saved
on: 2021-02-09
Things You Can Do With CSS Today — Smashing Magazine
The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects, too. Some of the really handy powers CSS gives you might have slipped you by, so in this article, Andy Bell will take a look into masonry layout, :is selector, clamp(), ch and ex units, updated text decoration, and a few other useful CSS properties.
Tags:
#css
Saved
on: 2021-02-04
My approach to using z-index. The last time I got straight to the… | by Dav
To set the scene, I’ll run through a simplified example that highlights some of the problems that z-index can solve, and cause. Here’s the codepen, if you’re curious. But you know what, that header…
Tags:
#css
Saved
on: 2021-01-31
You want overflow: auto, not overflow: scroll | Kilian Valkhof
Every now and then a web developer using a Mac discovers that their beautiful design is littered with scroll bars on other platforms. Either because someone points it out to them or because they attach a mouse to their mac which makes scroll bars appear. Often, MacOS hiding scroll bars by default is blamed for
Saved
on: 2021-01-07
CSS-Only Full-Width Responsive Images 2 Ways | Modern CSS Solutions
Let's look at how to use `background-size` and `object-fit` for similar full-width image effects, and learn when to select one over the other.
Tags:
#css
Saved
on: 2020-12-07
A Nerd's Guide to Color on the Web | CSS-Tricks
There are a lot of ways to work with color on the web. I think it’s helpful to understand the mechanics behind what you’re using, and color is no exception.
Saved
on: 2020-10-13
CSS Grid full-bleed layout tutorial · Josh W Comeau
Certain layouts are surprisingly dastardly. On the modern web, one of the most common layouts is also one of the trickiest. In this tutorial, I break down how to build the "full-bleed" layout using CSS Grid.
Saved
on: 2020-10-06
Layoutit Grid
Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.
Saved
on: 2020-09-25
Ten modern layouts in one line of CSS
This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.
Tags:
#css
Saved
on: 2020-07-31
robinsloan/perfect-edition: A lightweight, responsive web e-book template
A lightweight, responsive web e-book template
Saved
on: 2020-07-29
The complete guide to CSS media queries | Polypane browser for dev & design
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device…
Tags:
#css
Saved
on: 2020-06-11
The Fastest Google Fonts – CSS Wizardry – Web Performance Optimisation
Google Fonts is fast. Now it’s faster. Much faster.
Saved
on: 2020-05-20
BEM Naming Cheat Sheet by 9elements
A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.
Saved
on: 2020-05-19
Modern CSS Solutions
A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 15+ years.
Tags:
#css
Saved
on: 2020-05-12
“Designing Intrinsic Layouts” by Jen Simmons—An Event Apart video
Saved
on: 2020-03-12
How to Overlap Images in CSS | Bri Camp Gomez
This article shows you how to overlap images with CSS Grid and provides a fallback for IE and browsers that do not support CSS Grid.
Saved
on: 2019-12-02
CSS Utility Classes and "Separation of Concerns"
Over the last several years, the way I write CSS has transitioned from a "semantic" approach to something more like what people call "functional CSS."
In this post I explain how I got to this point and share some of the lessons and insights I've picked up along the way.
Saved
on: 2019-11-07
ITCSS: Scalable and Maintainable CSS Architecture - Xfive
ITCSS is an answer to the question: How do I make my CSS scalable and maintainable? It’s a concern for every front-end developer.
Tags:
#css
Saved
on: 2019-10-18
Editorial Design Patterns With CSS Grid And Named Columns — Smashing Magazine
By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids. In this article, Rachel Andrew is going to demonstrate an approach to this kind of editorial design, which builds on a few techniques. In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns.
Saved
on: 2019-10-06
Managing Flow and Rhythm with CSS Custom Properties ◆ 24 ways
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.
Saved
on: 2019-10-02
Menus with "Dynamic Hit Areas" | CSS-Tricks
Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should
Saved
on: 2019-09-24
Using layered box-shadows to create smoother & sharper shadows | Tobias Ahl
With a simple CSS trick, we can get fine-tuned control over how shadows are rendered, and create richer and more realistic 3D effects
Tags:
#css
Saved
on: 2019-09-20
Two Browsers Walked Into a Scrollbar | Filament Group, Inc.
Read this page on the Filament Group website
Tags:
#css
Saved
on: 2019-09-12
Flexbox: How Big Is That Flexible Box? — Smashing Magazine
In the last two articles, we have looked at what happens when we create a flex container, and also taken a look at alignment. This time we explore the often confusing issue of sizing in Flexbox. How does Flexbox decide how big things should be? In this article, Rachel Andrew will explain some of the finer points of how Flexbox works out how big the flex items are. It can seem a little academic, however, taking some time to understand the way this works can save you huge amounts of time when using Flexbox in your layouts. If you and your design don’t agree with what Flexbox thinks is best then you can take control back by setting your own flex-basis.
Tags:
#css
Saved
on: 2019-08-27
CSS Cheat Sheets! - DEV Community ????
We all know that Peter Griffin Family Guy gif of him unable to work some blinds. This gif is always a...
Saved
on: 2019-08-14
The CSS background-image property as an anti-pattern
The CSS background-image property allowed us to do some amazing things, but in most cases, it's time to leave it behind.
Saved
on: 2019-07-28
The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.
Read this page on the Filament Group website
Saved
on: 2019-07-24
Frontend Design, React, and a Bridge over the Great Divide
Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products' user interfaces. I see frontend design as helpful mortar that bridges the gap between design and development.
Of course "frontend designer" may or may not be the right title for it. Some others t
Saved
on: 2019-07-19
Extract critical CSS | web.dev
Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.
Saved
on: 2019-06-05
The Sass Ampersand | CSS-Tricks
The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a
Saved
on: 2019-05-28
CSSFX - Beautifully simple click-to-copy CSS effects
Diese Website steht zum Verkauf! cssfx.dev ist die beste Quelle für alle Informationen die Sie suchen. Von allgemeinen Themen bis hin zu speziellen Sachverhalten, finden Sie auf cssfx.dev alles. Wir hoffen, dass Sie hier das Gesuchte finden!
Saved
on: 2019-05-08
CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
Creating a masonry (or mosaic) layout with flexbox produces a grid with a seemingly shuffled and obscure order, but we can achieve a natural ordering by using :nth-child() and the order property
Saved
on: 2019-04-17
How To Align Things In CSS — Smashing Magazine
There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why. She will take a look at the different alignment methods. Instead of providing a comprehensive guide to each, Rachel explain a few of the sticking points people have and point to more complete references for the properties and values. You can go a long way by understanding the fundamental things about how the methods behave, and then need a place to go look up the finer details in terms of how you achieve the precise layout that you want.
Saved
on: 2019-03-29
Use Cases For Flexbox — Smashing Magazine
In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at? Today, Rachel Andrew is going to spend some time thinking about what the use cases for Flexbox really are, given that you now have CSS Grid Layout, giving some suggestions for what you might use when and a way to decide.
Saved
on: 2019-03-05
Breaking Boxes With CSS Fragmentation — Smashing Magazine
Rachel Andrew has been digging around in the CSS Fragmentation spec, and finding browser support is somewhat fragmented. In this article, she explains what fragmentation is, why you might want to use it, and what the state of browser support is. She’ll also show you the current state of browser support and some of the things you can do to get it working as well as it can in your multicol and print projects.
Tags:
#css
Saved
on: 2019-03-01
The Flexbox Holy Albatross | HeydonWorks
A blog post from the HeydonWorks.com blog
Saved
on: 2019-01-14
Axiomatic CSS and Lobotomized Owls · An A List Apart Article
Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t always understand the presentational m…
Tags:
#css
Saved
on: 2019-01-10
https://www.sarasoueidan.com/slides/SVG-Filters-Crash-Course.pdf
Saved
on: 2018-11-28
Why can’t we use Functional CSS and regular CSS at the same time? | CSS-Tri
Harry Nicholls recently wrote all about simplifying styles with functional CSS and you should definitely check it out. In short, functional CSS is another
Tags:
#css
Saved
on: 2018-11-20
Animated Grid Previews | Codrops
Today we'd like to share another CSS grid-powered template with you. The idea is to show a navigation and some scattered
Saved
on: 2018-11-09
In Defense of Utility-First CSS | frontstuff
“Favor composition over inheritance”. This piece of wisdom from Design Patterns, one of the most influential software engineering books, is the foundation of...
Tags:
#css
Saved
on: 2018-11-09
Spectre.css CSS Framework
Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
Saved
on: 2018-11-08
Cutting out the inner part of an element using clip-path | CSS-Tricks
The following is a guest post by Ana Tudor. Perhaps you know Ana from her amazing work combining code, math, and art. Here, she shows us how we can change the
Tags:
#css
Saved
on: 2018-11-08
Tailwind: style your site without writing any CSS! - Julia Evans
Saved
on: 2018-11-02
CSS Layout cookbook - CSS: Cascading Style Sheets | MDN
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
Saved
on: 2018-10-14
BEM - A naming philosophy that just works
Il documento presenta la filosofia di naming BEM (Block Element Modifier) per la scrittura di CSS, mettendo in evidenza i vantaggi dell'uso di questa metodologia per creare componenti riutilizzabili e gestire siti complessi. BEM aiuta ad evitare problemi di copia/incolla e semplifica il refactoring del codice, stabilendo regole per la nomenclatura che separano blocchi, elementi e modificatori. La struttura di nomi proposta facilita la comprensione e l'organizzazione del codice CSS, rendendolo più gestibile e meno soggetto a conflitti.
Saved
on: 2018-10-09
CSS Grid in IE: CSS Grid and the New Autoprefixer | CSS-Tricks
In Part 1 of this series, I debunked a few misconceptions that many people have around the Internet Explorer (IE) implementation of CSS grid. This article
Saved
on: 2018-07-12
More Unicode Patterns | CSS-Tricks
Creating is the most intense excitement one can come to know.
Saved
on: 2018-06-15
Easier scrollytelling with position sticky
Leaning on CSS to simplify the process.
Saved
on: 2018-06-13
Where Lines Break is Complicated. Here's all the Related CSS and HTML. | CSS-Tricks
Say you have a really long word within some text inside an element that isn't wide enough to hold it. A common cause of that is a long URL finding it's way
Saved
on: 2018-05-16
Page Transitions for Everyone | CSS-Tricks
As Sarah mentioned in her previous post about page transition using Vue.js, there is plenty of motivation for designers and developers to be building page
Saved
on: 2018-05-15
The Relative Units of CSS - Pine
The units in CSS are critical as we work with these all the time. You can’t build anything without using these so we must know the units properly.
Tags:
#css
Saved
on: 2018-05-14
A Guide To The State Of Print Stylesheets In 2018 — Smashing Magazine
Printing pages directly from the browser is an experience that can lead to frustration with enormous images being printed out. We have covered print stylesheets in the past here on Smashing Magazine, but in this article, Rachel Andrew takes a look at the state of printing from the browser today. She will show you how you should include print styles in your web pages, and look at the specifications that really come into their own once printing.
Tags:
#css
Saved
on: 2018-05-02