magnASCII.io Simone Magnaschi
Senior Full Stack Web Dev
Bookmarks tagged with #css.
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.
Tags: #css #webdev
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.
Tags: #css #css-grid
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

Mastering CSS Grid | Colt Steele

Learn web development with Colt Steele
Saved on: 2023-06-27

CSS Masking - Ahmad Shadeed

A deep dive into CSS masking
Tags: #css
Saved on: 2023-03-31

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.
Tags: #css #tools
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
Tags: #css #tools
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.
Tags: #css #frontend
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

Kablamo Engineering Blog

Insights from the Kablamo Engineering Team
Tags: #css
Saved on: 2021-07-26

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

CSS Tips

CSS tips and tricks you will not see in most tutorials.
Tags: #css
Saved on: 2021-04-27

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
Tags: #css #webdev
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.
Tags: #css #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.
Tags: #css #tools
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

Things I wish I’d known about CSS | Dave Smyth

Dave Smyth’s personal site.
Tags: #css #webdev
Saved on: 2020-07-17

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.
Tags: #bem #css
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

Same HTML, Different CSS

Saved on: 2020-02-20

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

Paged js

Tags: #css
Saved on: 2019-11-10

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.
Tags: #css #css-grid
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
Tags: #css #ux #webdev
Saved on: 2019-09-24

ColorBox

Create amazing color sets superfast.
Saved on: 2019-09-20

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
Tags: #css #webdev
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.
Tags: #css #webdev
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

My CSS Reset/Base

Articles on frontend development and more.
Tags: #css
Saved on: 2019-01-07

Multi-Line Inline Gradient | CSS-Tricks

Came across this thread:
Tags: #css
Saved on: 2019-01-04

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
Tags: #art #css
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

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.
Tags: #css #guide
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.
Tags: #bem #css
Saved on: 2018-10-09

https://alexmuraro.me/posts/bem/

Tags: #bem #css
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
Tags: #css #webdev
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
❤️
</>
2025