Post details
This post requires authentication to view.
This post requires authentication to view.
.example-demo {text-align: center;} In this article, we’ll talk about what is a Rainbow text and demonstrate building one through a basic example. If you are interested in generating code for text with any gradient color, check out our CSS Text Gradient Generator tool.

In today's adventures of finding out weird things you can do with HTML… You should not put a `<style>` element anywhere other than the `<head>` So `<body><style> ...CSS...</style></body>` is an error. (It works, because browsers are tolerant.) But you *can* put a `<link rel="stylesheet">` element in a body. Obviously, that needs an *external* data source for the CSS. So you can cheat by Base64 encoding it! `<body><link rel="stylesheet" type="text/css" href="data:text/css;base64,LyoqCi…">`
I finally got round to implementing dark mode for this site (the cobbler’s children have no shoes and all that…) Here’s all the CSS I had to add: @media (prefers-color-scheme: dark) { /* Invert all elements on the body while attempting to not alter the hue substantially. */ body { filter: invert(100%) hue-rotate(180deg); } /* Workarounds and optical adjustments. */ /* Firefox workaround: Set the background colour for the html element separately because, unlike other browsers, Firefox doesn’t apply the filter to the root element’s background.
Though it's not a true "dark mode", you can use CSS' filter to create dark mode of your own.

Attached: 1 image Here's an *incredibly* lazy #darkmode ``` body { filter: invert(1); } img { filter: invert(1); } ``` Reverses all your colours, but keeps images the same.

I spend an unreasonable amount of time making sure my blog renders well even if CSS isn't loaded. Whether it's a dodgy Internet connection, a text-only browser, or something else - it's nice knowing that my blog is in a logical order and perfectly usable without decorations. So fire up Lynx or w3m and take a look at your site. What do you need to change?
I want to share with you a quick way to make illustrations on your website work in both light and dark mode: .dark .invert-on-dark { filter: invert(1) hue-rotate(180deg); } Try it! Toggle dark mode in the navigation bar and see the cover photo swi...

My minimal Gruvbox CSS file I've been keeping multiple places - GitHub - Xe/Xess: My minimal Gruvbox CSS file I've been keeping multiple places
1px solid red; Like if you know what I mean 😏Mattia Astorino (@equinusocio)Wed, 11 Jan 2023 10:22 GMT
RT @xdesro ✨You can use shy hyphens (­) in your HTML to hint a more design-friendly place for your code to hyphenate:Carol ⭐️ (@CarolSaysThings)Wed, 09 Nov 2022 00:08 GMT
A list of classless CSS themes/frameworks with screenshots - GitHub - dbohdan/classless-css: A list of classless CSS themes/frameworks with screenshots
Simple demo of the details[open] "dialog" thing: jsbin.com/robizun/3/edit…
Stuart Langridge (@sil)Thu, 14 Jul 2022 20:40 +0000
just thought up a little trick for showing "help" as a sort of popover modal: <details><summary>help</summary>blahblah</details> details[open] {position: absolute;} to make it a "dialog" when open, and details[open] summary::after { content:"×";float:right } for a close buttonStuart Langridge (@sil)Thu, 14 Jul 2022 20:21 +0000
nighty night
laura @ pls make it stop @ recovering from mcm+MCR (@freezydorito)Tue, 24 May 2022 22:30 +0000
`accent-color` is now supported in all modern browsers 🎉🎨 One line of code enables you to style previously-hard-to-access form controls like checkboxes and radio buttons body { accent-color: hotpink; } Works really nicely with the `color-scheme` property too!una.css 👩🏻💻🇺🇦 (@Una)Tue, 22 Mar 2022 21:33 GMT
CSS co-designer here. !important was added for one reason only: laws in the US that require certain text to be in a given font-size. !important stops the cascade from changing it. Anything else is probably misuse, and a sign you may not understand the cascade properly.Steven Pemberton (@stevenpemberton)Mon, 21 Mar 2022 09:30 GMT
Creating a "Manual of Me" (1 mins read).

Creating a reference document about how to best collaborate together.
Adding the CSS blur filter on DOM elements you don't want to draw attention to in screenshots for blog posts is 🤌🏼
⚡️ Salma | whitep4nth3r (@whitep4nth3r)Mon, 21 Feb 2022 15:53 GMT
I added a bit (!) of colour to my site! 👩🏼🎨🎨 carol.gg/blog/site-rebu…Carol 🌻 (@CarolSaysThings)Sun, 24 Oct 2021 10:33 +0000
This is awesome! 🙌🏼
Post details
Now in Nightly: Thanks to our Google Summer of Code intern @Kriyszig, you can see which browsers your CSS is unsupported in from the CSS Rules panel! See it in action by enabling the pref: "devtools.inspector.ruleview.inline-compatibility-warning.enabled" --@micah_tigleyFirefox DevTools (@FirefoxDevTools)Tue, 18 Aug 2020 16:13 +0000
Carol 🌻 (@CarolSaysThings)Tue, 18 Aug 2020 16:23 +0000
margin is like a clock margin: 10px 5px 30px 40px top right bottom left tip by @hswolffBen Awad (@benawad)Fri, 17 Jul 2020 02:01 +0000
Here's your semi-regular reminder that I peaked with this tweet
Post details
I'm a box model
Kelly Vaughn 🐞 (@kvlly)Thu, 08 Aug 2019 00:41 +0000
Kelly Vaughn 🐞 (@kvlly)Mon, 13 Jul 2020 20:44 +0000
border: 1px solid red; is the console.log of CSS
Addy Osmani (@addyosmani)Wed, 24 Jun 2020 08:00 +0000
New CSS, Who Dis? (2 mins read).
Announcing my new site design, based on Hack.css.
Now that the American experiment has failed, I made a library for writing CSS properly 🧐 github.com/jevakallio/css… You're welcome!Jani Eväkallio (@jevakallio)Wed, 20 May 2020 10:45 +0000
🎂 Happy Birthday @humanmadeltd! 🎂 Now I can share how I've been taking my bunting obsession to the next level and made a CSS version for work. I'm super proud about the fact its a pure CSS solution. 😁Jenny Wong 🐝 (@miss_jwo)Wed, 29 Apr 2020 19:18 +0000
You're currently viewing page 1 of 1, of 45 posts.