Show HN: Apple-like smooth corners for Tailwind CSS
(github.com/gtokman)
Adjusts a rounded corner to create a continuous curve. Inspired by Rob.
Adjusts a rounded corner to create a continuous curve. Inspired by Rob.
Tufte CSS
(uhoreg.ca)
Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts.
Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts.
CSS-zero: An opinionated CSS starter kit for your Ruby on Rails applicatio
(github.com/lazaronixon)
An opinionated CSS starter kit for your "nobuild" application.
An opinionated CSS starter kit for your "nobuild" application.
Show HN: Cs16.css – CSS library based on Counter Strike 1.6 UI
(samke.me)
CSS library based on Counter Strike 1.6 UI.
CSS library based on Counter Strike 1.6 UI.
Tailwind CSS v4.0
(tailwindcss.com)
Holy shit it's actually done — we just tagged Tailwind CSS v4.0.
Holy shit it's actually done — we just tagged Tailwind CSS v4.0.
Show HN: Puck 0.18 adds drag-and-drop for CSS grid and Flexbox
(github.com/measuredco)
Puck 0.18 introduces a new drag-and-drop engine with native support for CSS grid and flexbox, enabling you to embed a design-in-browser experience directly within your React application or page builder.
Puck 0.18 introduces a new drag-and-drop engine with native support for CSS grid and flexbox, enabling you to embed a design-in-browser experience directly within your React application or page builder.
Designing for the web ought to mean making HTML and CSS (2019)
(signalvnoise.com)
During the dotcom boom back in the late 90s, I did a bunch of Photoshop-cut jobs. You know, where a designer throws a PSD file over the wall to an HTML monkey to slice and dice. It was miserable.
During the dotcom boom back in the late 90s, I did a bunch of Photoshop-cut jobs. You know, where a designer throws a PSD file over the wall to an HTML monkey to slice and dice. It was miserable.
Rewriting my website in plain HTML and CSS
(vijayp.dev)
This week, I decided to rewrite my website using plain HTML and CSS.
This week, I decided to rewrite my website using plain HTML and CSS.
A couple CSS tricks for HTML Dialog elements
(cassidoo.co)
I recently was messing around with the HTML <dialog> element. It’s really handy for native dialogs without a ton of JavaScript.
I recently was messing around with the HTML <dialog> element. It’s really handy for native dialogs without a ton of JavaScript.
Running Animations Without Keyframes
(css-tip.com)
Using the new @starting-style you can create animations without using @keyframes. It's not a replacement for the classic way to create animations but it can be a useful CSS trick in some situations.
Using the new @starting-style you can create animations without using @keyframes. It's not a replacement for the classic way to create animations but it can be a useful CSS trick in some situations.
Cascading Spy Sheets: Exploiting the Complexity of Modern CSS for Fingerprinting
(cispa.de)
In an attempt to combat user tracking, both privacy-aware browsers (e.g., Tor) and email applications usually disable JavaScript. This effectively closes a major angle for user fingerprinting. However, recent findings hint at the potential for privacy leakage through selected Cascading Style Sheets (CSS) features. Nevertheless, the full fingerprinting potential of CSS remains unknown, and it is unclear if attacks apply to more restrictive settings such as email.
In an attempt to combat user tracking, both privacy-aware browsers (e.g., Tor) and email applications usually disable JavaScript. This effectively closes a major angle for user fingerprinting. However, recent findings hint at the potential for privacy leakage through selected Cascading Style Sheets (CSS) features. Nevertheless, the full fingerprinting potential of CSS remains unknown, and it is unclear if attacks apply to more restrictive settings such as email.
Grid by Example
(gridbyexample.com)
This site is a collection of examples, video and other information to help you learn CSS Grid Layout. Developed and maintained by Rachel Andrew.
This site is a collection of examples, video and other information to help you learn CSS Grid Layout. Developed and maintained by Rachel Andrew.
Show HN: Struggle with CSS Flexbox? This Playground Is for You
(yoavsbg.github.io)
Experiment with different flex properties to understand how they affect layout. Adjust the controls below to see changes in real-time and copy the generated CSS code.
Experiment with different flex properties to understand how they affect layout. Adjust the controls below to see changes in real-time and copy the generated CSS code.
CSS Wants to Be a System
(daverupert.com)
I’ve realized something obvious again, this time about CSS; that CSS wants to be a system.
I’ve realized something obvious again, this time about CSS; that CSS wants to be a system.
My favourite colour is Chuck Norris red
(htmhell.dev)
Setting the colour of text on a webpage is usually a simple affair involving whipping it out the good ol' CSS color property. But this is HTMHell, dammit. None of that wishy-washy CSS nonsense here. No siree. We use HTML as the good lord intended and shalln't stray into the sins of cascading sheets lest we end up some non-HTML variant of hell where they define page structure with JavaScript vars.
Setting the colour of text on a webpage is usually a simple affair involving whipping it out the good ol' CSS color property. But this is HTMHell, dammit. None of that wishy-washy CSS nonsense here. No siree. We use HTML as the good lord intended and shalln't stray into the sins of cascading sheets lest we end up some non-HTML variant of hell where they define page structure with JavaScript vars.
Next-level frosted glass with backdrop-filter
(joshwcomeau.com)
One of my all-time favourite CSS tricks is using backdrop-filter: blur() to create a frosted glass effect.
One of my all-time favourite CSS tricks is using backdrop-filter: blur() to create a frosted glass effect.
Dark Mode in CSS Guide
(css-tricks.com)
Dark mode has gained a lot of traction recently. Like Apple, for instance, has added dark mode to its iOS and MacOS operating systems. Windows and Google have done the same.
Dark mode has gained a lot of traction recently. Like Apple, for instance, has added dark mode to its iOS and MacOS operating systems. Windows and Google have done the same.
IE7 and IE7 (2005)
(meyerweb.com)
As noted on the WaSP site, the IE team is asking developers to clean up their CSS hacks because they’re causing sites to break in IE7 builds.
As noted on the WaSP site, the IE team is asking developers to clean up their CSS hacks because they’re causing sites to break in IE7 builds.
LaTeX.css – Make your website look like a LaTeX document
(vercel.app)
This almost class-less CSS library turns your HTML document into a website that looks like a LaTeX document.
This almost class-less CSS library turns your HTML document into a website that looks like a LaTeX document.
Tailwind CSS v4.0 Beta 1
(tailwindcss.com)
About eight months ago we open-sourced our progress on Tailwind CSS v4.0. Hundreds of hours of fixing bugs, soul-crushing backward compatibility work, and troubleshooting Windows CI failures later, I’m excited to finally tag the first public beta release.
About eight months ago we open-sourced our progress on Tailwind CSS v4.0. Hundreds of hours of fixing bugs, soul-crushing backward compatibility work, and troubleshooting Windows CI failures later, I’m excited to finally tag the first public beta release.
Using date-based CSS to make old web pages *look* old (2023)
(shkspr.mobi)
How do you know you're looking at an old website? You may have found a page which has lots of interesting information, but how can you tell it's a modern and relevant result?
How do you know you're looking at an old website? You may have found a page which has lots of interesting information, but how can you tell it's a modern and relevant result?
The ‘contain’ CSS property
(mozilla.org)
The contain CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree.
The contain CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree.
CSS gets a new logo and it uses the color `rebeccapurple`
(michaelcharl.es)
A community vote in the CSS-Next repository on GitHub decided on a new official logo for CSS.
A community vote in the CSS-Next repository on GitHub decided on a new official logo for CSS.
Cool HTML design without JavaScript
(waka.moe)
A lot of cool designs can be created with just HTML and CSS.
A lot of cool designs can be created with just HTML and CSS.
My Modern CSS Reset
(jakelazaroff.com)
How many of us start every web project by copy-and-pasting Eric Meyer’s famous CSS reset?
How many of us start every web project by copy-and-pasting Eric Meyer’s famous CSS reset?
Bulma CSS Framework
(bulma.io)
Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
A Modern CSS Reset (2024 update)
(joshwcomeau.com)
Whenever I start a new project, the first order of business is to sand down some of the rough edges in the CSS language. I do this with a functional set of custom baseline styles.
Whenever I start a new project, the first order of business is to sand down some of the rough edges in the CSS language. I do this with a functional set of custom baseline styles.
Two examples of hover styles on images
(alexwlchan.net)
I enjoy adding :hover styles to my websites. A good hover style reminds me of how fast and responsive our computers can be, if we let them. For example, I add a thicker underline when you hover over a link on this site, and it appears/disappears almost instantly as I move my cursor around. It feels snappy; it makes me smile.
I enjoy adding :hover styles to my websites. A good hover style reminds me of how fast and responsive our computers can be, if we let them. For example, I add a thicker underline when you hover over a link on this site, and it appears/disappears almost instantly as I move my cursor around. It feels snappy; it makes me smile.