Terence Eden’s Blog on Nostr: Pure CSS Corner Banner https://shkspr.mobi/blog/2021/09/pure-css-corner-banner/ ...
Pure CSS Corner Banner
https://shkspr.mobi/blog/2021/09/pure-css-corner-banner/
Scratching my own itch. Here's how to make a "beta" ribbon in CSS.
Place this HTML at the end of your document:<hr id="beta" aria-label="Warning this page is a beta.">
(Doesn't have to be <hr> - use whatever makes sense in your design.)
Then, add this CSS:#beta { float: left; top: 1.5em; left: -3em; position: absolute; /* or fixed if you want it to always be visible */ transform: rotate(-45deg); background: red; color: white; font-weight: bold; padding-left: 3em; padding-right: 3em; padding-top: .5em; padding-bottom: .5em; border: 0; margin: 0; height: auto; width: auto; z-index: 999999999; /* or whatever is needed to show on top of other elements */}#beta::before { content: "⚠️ BETA ⚠️";}
You can adjust and simplify the CSS as per your requirements and your site's existing CSS.
"But," I hear you cry, "that isn't pure CSS!" You're right, of course. Luckily, there's a ✨magical✨ way this can be added with absolutely zero HTML!!
As pointed out by Mathias Bynens, you don't need any HTML to create a web page. Rather than use an <hr> element, we can just append the the CSS ::after the <body>.
body::after { float: left; top: 1.5em; position: absolute; transform: rotate(-45deg); background: red; color: white; font-weight: bold; left: -3em; padding-left: 3em; padding-right: 3em; padding-top: .5em; padding-bottom: .5em; border: 0px; margin: 0; z-index: 999999999; content: "⚠️ BETA ⚠️";}But, why though?
A few reasons:
I didn't want the banner to be accidentally select as text.
Using an <hr> feels like somewhat better semantics than yet another bloody <div>!
Dunno. Just seemed like a good idea at the time - and I could only find ribbons with lots of complicated stuff I didn't need.
https://shkspr.mobi/blog/2021/09/pure-css-corner-banner/
#css #HTML
https://shkspr.mobi/blog/2021/09/pure-css-corner-banner/
Scratching my own itch. Here's how to make a "beta" ribbon in CSS.
Place this HTML at the end of your document:<hr id="beta" aria-label="Warning this page is a beta.">
(Doesn't have to be <hr> - use whatever makes sense in your design.)
Then, add this CSS:#beta { float: left; top: 1.5em; left: -3em; position: absolute; /* or fixed if you want it to always be visible */ transform: rotate(-45deg); background: red; color: white; font-weight: bold; padding-left: 3em; padding-right: 3em; padding-top: .5em; padding-bottom: .5em; border: 0; margin: 0; height: auto; width: auto; z-index: 999999999; /* or whatever is needed to show on top of other elements */}#beta::before { content: "⚠️ BETA ⚠️";}
You can adjust and simplify the CSS as per your requirements and your site's existing CSS.
"But," I hear you cry, "that isn't pure CSS!" You're right, of course. Luckily, there's a ✨magical✨ way this can be added with absolutely zero HTML!!
As pointed out by Mathias Bynens, you don't need any HTML to create a web page. Rather than use an <hr> element, we can just append the the CSS ::after the <body>.
body::after { float: left; top: 1.5em; position: absolute; transform: rotate(-45deg); background: red; color: white; font-weight: bold; left: -3em; padding-left: 3em; padding-right: 3em; padding-top: .5em; padding-bottom: .5em; border: 0px; margin: 0; z-index: 999999999; content: "⚠️ BETA ⚠️";}But, why though?
A few reasons:
I didn't want the banner to be accidentally select as text.
Using an <hr> feels like somewhat better semantics than yet another bloody <div>!
Dunno. Just seemed like a good idea at the time - and I could only find ribbons with lots of complicated stuff I didn't need.
https://shkspr.mobi/blog/2021/09/pure-css-corner-banner/
#css #HTML