magnASCII.dev Simone Magnaschi
Senior Full Stack Web Dev
Bookmarks tagged with #webdesign.
Show all

How my images are dithered | dead.garden

Hello there! This is my personal website and it is allergic to SEO.
Saved on: 2026-07-25

Your website is not for you — Websmith Studio

A note from a developer who keeps watching good design die in boardrooms.
Saved on: 2026-05-01

Landbook - website design inspiration gallery

Find the best hand-picked website design inspiration. We're a curated website design gallery for Creatives, updated daily.
Saved on: 2026-03-13

Shades of Halftone - The Blog of Maxime Heckel

An interactive deep dive into building halftone shaders in GLSL, covering everything from classic dot patterns and CMYK color separation to Moiré interference, gooey effects, and animated displacement.
Saved on: 2026-02-14

Trent Walton

Trent Walton | Founder & 1/3 of http:// | Connect with them on Dribbble; the global community for designers and creative professionals.
Saved on: 2026-01-14

The Component Gallery

An up-to-date repository of interface components based on examples from the world of design systems, designed to be a reference for anyone building user interfaces.
Saved on: 2025-12-11

Emil Kowalski

Why you are animating more often than you should.
Saved on: 2025-09-05

Implementing a foil sticker effect

A breakdown of how to build a custom Three.js shader that recreates the iridescent, sparkling look of foil stickers using vertex deformation, angle-based color shifts, and procedural flakes.
Saved on: 2025-09-02

Infinite Pixels

In which I push browser engines to their finite limits using infinite values.
Saved on: 2025-08-07

A Friendly Introduction to SVG • Josh W. Comeau

SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously-cool things we can do with this massively underrated tool. ✨
Saved on: 2025-07-25

Simulating Hand-Drawn Motion with SVG Filters

A practical guide to implementing the boiling line animation effect using SVG filter primitives and JavaScript - Blog post by Camillo Visini
Saved on: 2025-07-21

The 3 Gurus of 90s Web Design: Zeldman, Siegel, Nielsen

With the rise of Flash and CSS in 1997, three web design philosophies emerged. David Siegel advocated for 'hacks', Jakob Nielsen kept it simple, while Jeffrey Zeldman combined flair with usability.
Saved on: 2025-05-30

anime.js

A fast and versatile JavaScript animation library
Saved on: 2025-04-04

Next-level frosted glass with backdrop-filter

Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most realistic lush frosted glass anywhere on the internet.
Saved on: 2024-12-07

Features of your font you had no idea about

Different weights are cool, but the real question is whether your font can swash.
Saved on: 2024-09-10

CSS @property and the New Style

An exploration of the newly supported at-rule for explicitly defining and animating custom properties in CSS.
Saved on: 2024-09-04

Awesome Stuff on Hot Page

Hot Page is a web site builder based on open standards. Write HTML, CSS and JavaScript in a drag-and-drop page builder with live preview and visual tools.
Saved on: 2024-08-24

Time-based CSS Animations

In my earlier post Time Uniform For CSS Animation, I took a note about a way to do CSS animations with time ticks instead of keyframes. It was limited applicable because CSS lacked the ability of doing complex Math calculations. After years of wait, CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions. It's time to revisit the time-based way of animation, hope it'll be more useful this time.
Saved on: 2024-05-05

Variable Fonts (v0.2)

A simple resource for finding and trying variable fonts.
Saved on: 2024-01-29

Loadership

Loadership is your go-to tool for generating and customizing loading spinners. Easily configure and copy-paste spinners in HTML/CSS, or SVG to enhance your web projects with smooth, professional loaders.
Saved on: 2024-01-19

CSS Animations with No-Code

Convert MathML to LaTeX online with MathConvert. Free, fast, and accurate converter for mathematical equations. Perfect for students, educators, and researchers.
Saved on: 2023-11-25

The Negative Impact of Mobile-First Web Design on Desktop

Mobile-first web designs cause significant usability issues when viewed on desktop. Content becomes overly dispersed across long scrolling pages with expansive white space and enlarged images and fonts, making it difficult for users to consume and understand the information.
Saved on: 2023-10-27

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

Future CSS: State Container Queries

An early look at CSS state queries.
Saved on: 2023-06-29

SmolCSS

Minimal snippets for modern CSS layouts and components
Saved on: 2023-05-30

Brutalist Web Design

Guidelines for web design that adhere to the tenets and ethos of Brutalism
Tags: #webdesign
Saved on: 2023-05-02

Rebuilding a featured news section with modern CSS: Vox news

Rebuilding Vox News featured section with modern CSS.
Saved on: 2023-05-01

Design notes on the 2023 Wikipedia redesign

No one fights harder for your rights
Saved on: 2023-03-16

Web Interface Guidelines

A non-exhaustive list of details that make a good web interface.
Saved on: 2023-02-25

Conditional CSS

CSS is condtional in many ways. In this article, I will go over a few CSS features that we use every day, and show you how conditional they are.
Saved on: 2023-01-17

3D in CSS

Notes about creative coding on the Web.
Saved on: 2023-01-10

A CSS challenge: skewed highlight — Vadim Makeev

Recently Sacha Greif challenged his Twitter followers to code a fancy highlighter effect using only CSS. Guess what? I took the bait and started coding!
Saved on: 2022-12-31

OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog

CSS Color Module 4 adds oklch(), and we gain P3 wide-gamut support, boost code readability, and improve developer-designer communication.
Saved on: 2022-10-26

Experimenting A New Syntax To Write SVG

It's been a while since I introduced a new syntax to the css-doodle project to solve my own problems. While I'm not sure it would be useful elsewhere, I need to make some notes before I forget the details.
Saved on: 2022-09-27

You Don’t Need A UI Framework — Smashing Magazine

Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. In this article, Josh Comeau is going to make his case for why you probably don’t need these tools. He’ll also share some of his go-to strategies for building professional-looking applications without a design background.
Tags: #webdesign #ui
Saved on: 2022-05-04

The Year in Design - Zeldman on Web and Interaction Design

Mobile is today’s first screen. So design responsively, focusing on content and structure first. Websites and apps alike should remove distractions and let people interact as directly as possible with content. 90 percent of design is typography. And the other 90 percent is whitespace. Boost usability and increase pleasure with progressive disclosure: menus & functions that appear only when needed.
Saved on: 2022-04-26

DALL·E 2 and The Origin of Vibe Shifts - Divinations - Every

By Means of Natural Selection
Saved on: 2022-04-23

Coolors - The super fast color palettes generator!

Generate or browse beautiful color combinations for your designs.
Saved on: 2022-03-16

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

So many little design helper sites! | CSS-Tricks

I had one of those little single-serving designer helper sites bookmarked the other day: getwaves.io. Randomized SVG waves! Lots of cool options! Easy to
Saved on: 2021-09-29

Motion One: The Web Animations API for everyone

Animations made simple. The fast and light animation library for JS, React and Vue. Motion uses browser APIs like WAAPI and ScrollTimeline for a tiny filesize and superfast performance. Previously Framer Motion.
Saved on: 2021-09-22

Design Principles

An Open Source collection of Design Principles and methods
Saved on: 2021-09-13

A Single Div

A CSS drawing experiment to see what’s possible with a single div.
Saved on: 2021-05-24

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

Shuffle

An online editor for busy developers
Saved on: 2021-01-19

7 Rules for Creating Gorgeous UI – Part 2 (Updated for 2020) – Learn UI Des

How to safely overlay text on images · Making text pop – and un-pop · Only use good fonts · Steal like an artist
Saved on: 2020-12-18

Building Your Color Palette - Refactoring UI

Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.
Tags: #webdesign
Saved on: 2020-11-23

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

Illustration Website Template | Templates | Black Illustrations

FREE illustrator website template built for use in Webflow
Saved on: 2020-08-28

7 Practical Tips for Cheating at Design | by Adam Wathan & Steve Schoger |

Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not. Maybe the company you work for doesn’t have a full-time designer and…
Saved on: 2020-08-17

The “I’m new to design” starter pack | by Sara Clayton | UX Collective

If you’re a Twitter user by any means, chances are good that you’ve seen these sorts of memes at some point: As someone who has made the transition from marketing to design, I occasionally get…
Saved on: 2020-07-22

Duo - Colour Pairings by Alex Pate

Duo is a collection of my favourite colour combinations
Saved on: 2020-04-07

colors.lol - Overly descriptive color palettes

A fun way to discover interesting color combinations.
Saved on: 2020-03-29

36 Days of Type | Reflektor Digital

In Spring 2019, our team at Reflektor Digital joined thousands of designers, illustrators and graphic artists around the world for the 36 Days of Type Challenge.All members of our development team took turns at creating a unique representation of every letter and number using various coding techniques.
Saved on: 2020-02-26

The ultimate guide to proper use of animation in UX

Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While…
Tags: #ux #webdesign
Saved on: 2020-02-26

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

Designing accessible color systems

How we designed a color system with hand-picked, vibrant colors that also met standards for accessibility and contrast.
Saved on: 2019-10-17

Hover States / The home of alternative digital design

The home of alternative design, code and content on the world wide web.
Tags: #webdesign
Saved on: 2019-10-03

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

ColorBox

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

4 Rules for Intuitive UX

Obey the Law of Locality · ABD: Anything But Dropdowns · Pass the Squint Test · Teach by example
Tags: #ux #webdesign
Saved on: 2019-08-19

Design Principles for Developers: Processes and CSS Tips for Better Web Des

It is technically true that anyone can cook. But there’s a difference between actually knowing how to prepare a delicious meal and hoping for the best as you
Saved on: 2019-08-09

Wevolution Of Webdesign

The Evolution Of Webdesign is a collection and imitation of Webdesign Trends from 1991 to 2020.
Tags: #webdesign
Saved on: 2019-05-19

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

The “Design Tips” series now in TailwindCSS

Diese Domain steht zum Verkauf!
Tags: #webdesign
Saved on: 2019-05-03

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

Public Sans

A strong, neutral, open source typeface for text or display.
Saved on: 2019-04-09

Web Design in 4 minutes

Learn the basics of web design in 4 minutes with this interactive tutorial.
Tags: #webdesign
Saved on: 2019-04-08

A quick start guide to choosing accessible colours – UX Collective

Early last morning, I woke up to this tweet. Like everything else I find on the internet, it sent me on a wild goose chase searching for any and all the information I could find about colour…
Saved on: 2019-04-08

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

The typographic scale

The typographic scale has been used for centuries to choose harmonious font sizes. It has been likened to a harmonious musical scale. But there are *flaws* in those historical values.
Saved on: 2019-03-19

Color Hunt - Color Palettes for Designers and Artists

Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
Saved on: 2019-03-16

Animate a Blob of Text with SVG and Text Clipping | CSS-Tricks

I came across this neat little animation in a designer newsletter. Unfortunately, I lost track of the source, so please give a shout out if you recognize
Tags: #webdesign
Saved on: 2019-02-07

Subtle Patterns | Free textures for your next web project

Subtle Patterns brought to you by Toptal, free textures for your next web project. Find out more here.
Tags: #webdesign
Saved on: 2019-02-07

Everything You Need To Know About SVG | CSS-Tricks

Using SVG can be very simple, but if you start digging in, there is a lot to know about SVG. In this series you're going to learn why SVG is such an important
Saved on: 2019-01-31

Color - Cloudflare Design

Saved on: 2019-01-31

Taotajima.jp WebGL deconstruction – akella – Medium

I love decompiling stuff, i did that for facebook 3D photos recently, but this time it will be about marvelous Tao Tajima website. Go check it out first. The website has been done by Homunculus…
Tags: #webdesign
Saved on: 2019-01-31

The Book of Shaders

Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
Saved on: 2019-01-31

Design v17 | CSS-Tricks

We rolled out a new site design on January 1! This is the 17th version of CSS-Tricks if you can believe that. The versions tend to evolve a decent amount
Tags: #webdesign
Saved on: 2019-01-15

7 Rules for Creating Gorgeous UI (Part 1) – Erik D. Kennedy – Medium

If you went to art school or consider yourself a UI designer already, you will likely find this guide some combination of a.) boring, b.) wrong, and c.) irritating. That’s fine. All your criticisms…
Saved on: 2019-01-14

The Flexbox Holy Albatross | HeydonWorks

A blog post from the HeydonWorks.com blog
Saved on: 2019-01-14

Inter font family

Inter is a typeface family
Tags: #ux #webdesign
Saved on: 2018-12-30

You know a site has its shit together when… – Hacker Noon

How hackers start their afternoon. HackerNoon is a free platform with 25k+ contributing writers. 100M+ humans have visited HackerNoon to learn about technology
Tags: #webdesign
Saved on: 2018-12-27

Brutalist Web Design. A Breath of Fresh Air in the Modern Web

When I was 10-11 years old, I was isolated and timid so expressing myself creat...
Tags: #webdesign
Saved on: 2018-12-26

Stripe Atlas: Writing copy for landing pages

Write copy that delights visitors, persuades prospects, and wins customers.
Saved on: 2018-12-19

Designs for a new admin theme [#3017785] | Drupal.org

Background Building a new admin theme is part of the Admin UI and JS modernization initiative. We’re proposing to update the administration look and feel through a new design system for the Drupal administration UI. A design system consists of visual and behavioural components and patterns that can be combined into user-friendly user interfaces. This Drupal admin design system is a project with its own deliverables (examples, documentation, tools, and resources).
Saved on: 2018-12-05

Art Direction for the Web: Designing standfirst paragraphs — Stuff & Nonsen

A standfirst design helps people understand what’s coming next, and offers us an opportunity to connect them the brand of a magazine, product, or website.
Saved on: 2018-09-07

Design with Difficult Data · An A List Apart Article

Designing for the happy path—where users always enter ideal data and clients choose perfect images—can leave your layouts warped and broken when your users stray. Steven Garrity suggests you take a…
Tags: #ux #webdesign
Saved on: 2018-09-07
❤️
</>
2026