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.
Inline Scope for CSS
(picostitch.com)
I am not tightly following what's going on in CSS land, since blogs are not the thing and mailing lists became spam lists I don't know where to "listen". But from time to time I read MDN and look for the things that I expect CSS and HTML to provide. And funny enough, often my expectations and reality are aligned. Maybe because the missing things are just so obvious :).
I am not tightly following what's going on in CSS land, since blogs are not the thing and mailing lists became spam lists I don't know where to "listen". But from time to time I read MDN and look for the things that I expect CSS and HTML to provide. And funny enough, often my expectations and reality are aligned. Maybe because the missing things are just so obvious :).
The new CSS property that boosts your rendering performance (2020)
(web.dev)
Improve initial load time by skipping the rendering of offscreen content.
Improve initial load time by skipping the rendering of offscreen content.
Show HN: TailwindCSS-motion / a simple syntax to animate in Tailwind CSS
(github.com/romboHQ)
tailwindcss-motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.
tailwindcss-motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.
CSS Scroll-Driven Animations Visualizer
(scroll-driven-animations.style)
This tool is part of https://scroll-driven-animations.style/ and should help you get a grasp of how all View Timeline Ranges work.
This tool is part of https://scroll-driven-animations.style/ and should help you get a grasp of how all View Timeline Ranges work.
Building an Unobtrusive Htmx Loading Indicator in 22 Lines of CSS
(budgetflow.cc)
In this tutorial, we'll build the subtle loading indicator you see at the top of this page, using just 22 lines of CSS.
In this tutorial, we'll build the subtle loading indicator you see at the top of this page, using just 22 lines of CSS.