#CSS

Mastodon Bird UI v1.3.6 released! :neon_skull:

Changelog:

* Fix confirmation modal text color (thanks @jaoler)
* Add more colors to CSS var scope
* Fix relative time color being too bright

Source code: https://github.com/ronilaukkarinen/mastodon-bird-ui

Demo: https://mementomori.social

#OpenSource #Mastodon #MastodonBirdUI #CSS #UI #WebDev #MastoAdmin

Screenshot of the mobile interface of Mastodon Bird UI, dark/light theme presented, home feed.

Kirby CMS

3 hours ago

Spring is near, time to freshen up what we know about #CSS colors: https://developer.chrome.com/articles/high-definition-css-color-guide/ 🌈

Great weekend read by @argyleink 📚

Matthias Wagler

4 hours ago

Checkered background using two lines of code in CSS
https://www.amitmerchant.com/checkered-background-using-only-two-lines-of-code-in-css/

via https://sidebar.io/date/2023-03-31

#css #simplicity

Curtis Carter

13 hours ago

The most exciting thing for me from #bard or #bingchat would be being able to ask about that obscure #css I never use and have it give me an example along with an explanation if I'm trying to use it wrong, it's deprecated, or it's experimental.

Unfortunately both failed miserably today when I asked about line-clamp

Matthias Ott

13 hours ago

This instant classic by @Richr is still the best post about #hyphenation on the Web IMHO. 👏

And Richard updated it in January!

#CSS #typography

https://clagnut.com/blog/2395/

CodePen.IO :verify:

14 hours ago

RT Jon Kantner
If the Windows XP shutdown icon buttons were animated
https://codepen.io/jkantner/pen/oNPRMQY @CodePen #CSS #SVG https://t.co/9YOiA14cnW

:sys_twitter: https://twitter.com/jonkantner/status/1641841533929377792

Media source: https://video.twimg.com/ext_tw_video/1641638883094941697/pu/vid/960x720/DG0PtOZJgb6Is0LL.mp4?tag=12

Large Anguish Model

14 hours ago

Friends fear he's abusing #CSS again https://css-foolishness.netlify.app/

CSS by T. Afif :verified:

15 hours ago

💡 CSS Tip!

Use the new color-mix() function to generate random colors from your favorite one
✅ A new color on each page load
✅ No contrast issue
✅ Easily control the color range

Demo: https://codepen.io/t_afif/full/eYEQbmg via :codepen: #CodePen

#CSS

Overview of the CSS code from a demo that doesn't really exist because, you know, it's the 1st of April

William Hoggarth

15 hours ago

CSS is all fun and games until you run into stacking contexts.

#programming #css

Ben Myers 🦖

16 hours ago

📼 Video up!

Earlier this week, @mikemai2awesome joined me for the first Some Antics stream of 2023! He shared a bunch of practical #typography and #CSS tips you can use today to elevate your own sites! Check it out!

➡️ https://youtu.be/kHgwY5mTHVU

Transcript at https://someantics.dev/great-typography-with-modern-css/

Oblomov

16 hours ago

You can _almost_ implement the #SVG `switch` element in pure #HTML + #CSS with something like:

switch > * {
display: none;
}
switch > *:lang(...) {
display: initial
}

with only one issue: there's no way to put in that :lang() pseudo-class “whatever the user asked for”. So you still need some #JavaScript or server-side assistance to bridge the gap between the user language selection and the styling.

So close …

Christian Tietze

18 hours ago

#CSS Masking - Ahmad Shadeed https://ishadeed.com/article/css-masking/

Contains a dozen examples to mask out parts of the content. Including rounded tabs, which I loved 15 years ago 😍

Aral Balkan

20 hours ago

:kitten: One of the nice things with the new conditional syntax in Kitten¹ is that you can have conditional styles in your components :)

¹ https://codeberg.org/kitten/app

#Kitten #SmallWeb #web #dev #js #css #styles #conditionals

Screenshot of code:

export default ({ SLOT, activeSection = '', autoHeading = true}) => html`
<${Application} layout='settings'>
<${Navigation} activeSection=${activeSection} />
<main id='content'>
<if ${autoHeading}>
<h2>${activeSection}</h2>
</if>
${SLOT}
</main>
</>

Screenshot of code:

// Application layout.
import Footer from './Footer.component.js'

export default ({ layout, SLOT }) => html`
<div id='application'>
${SLOT}
</div>

<${Footer} />

<style>
…

#application {
max-width: 920px;
margin-left: auto;
margin-right: auto;
}

<if ${layout==='settings'}>
#application {
display: grid;
grid-template-areas:
'navigation main '
'footer footer';
grid-template-rows: 1fr fit-content(100%);
grid-template-columns: fit-content(100%) 1fr;
}

/* On narrower screens, use one-column layout. */
@media screen and (max-width: 660px) {
#application {
grid-template-areas:
'navigation'
'main'
'footer';
}
}
</if>
</style>
`

Friday Front-End

20 hours ago

Today's lunch video is Useful & Responsive #CSS Layouts, No Media Queries Required: "Here’s 5 quick responsive layouts that you can use, without any media queries! There’s nothing wrong with media queries, and we still need them sometimes, but these can be really handy in the right situation!" https://www.youtube.com/watch?v=p3_xN2Zp1TY

David Bisset

1 day ago

A #CSS selector to highlight clickable elements

https://sebastiandedeyne.com/a-css-selector-to-highlight-clickable-elements/

via @sebdd

Roma Komarov

1 day ago

When things are explicitly not specified in the #CSS specs (https://w3c.github.io/csswg-drafts/css-backgrounds/#valdef-line-style-double), even seemingly simple things can get a different rendering across Safari, Chrome and Firefox.

For example, `border-style: double` renders very differently for different widths. There are some “safe” sizes like `3px`, but overall you can't really rely on it.

Also, Chrome violates the specs and sets the initial value to `1.5px` instead of the `medium` (maybe only on a retina screen?).

https://codepen.io/kizu/pen/xxaNWNO

A screenshot of an example.

On the top there is a “Firefox” header, below there is a three by three grid of elements, each captioned by its border-width.

Notable aspect for how Firefox renders things: it attempts to render things in a subpixel space when it is available (like for the retina screens), and for even values like 2px it adds a semi-transparent pixel on the inside of the borders, resulting in a not very “sharp” result.

A screenshot of an example.

On the top there is a “Chrome” header, below there is a three by three grid of elements, each captioned by its border-width.

Notable aspect for how Chrome renders things: similar to Firefox, it seems to take the available subpixels in consideration, so it renders the 2px border with thin lines, but also renders the 1.5px as 2 distinct 0.5px lines (for the initial value that violates the specs).

A screenshot of an example.

On the top there is a “Safari” header, below there is a three by three grid of elements, each captioned by its border-width.

Notable aspect for how Safari renders things: unlike Safari and Firefox, it does not attempt to render the border in the sub-pixel space, so the 2px border looks solid.

A screenshot from the spec for the “double” border-style keyword, showing its text:

“Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal ‘border-width’.)”

The part “The thickness of the lines is not specified” is highlighted.

smallcircles (Humane Tech Now)

1 day ago

@jwildeboer

I think this is the reason for the popularity of #TailwindCSS as it brings #CSS tweaking to the average developer. I've learned to not touch nice-looking static site generator theme CSS'es with a 10-foot pole. CSS is wonderful but to do modding in those themes requires a bunch of CSS expertise. I rewrote https://fedi.foundation from #Bootstrap and it was a delight.

Btw, re:comments.. yesterday I bumped into https://utteranc.es

Might be interesting for your #ActivityPub thing.

Josh Bruce

1 day ago

Writing a series about web design and development for absolute beginners.

Hit a point where I'd like to list some static site builders (a la Dreamweaver, RapidWeaver, Blocs) and am curious about what else is out there?

I don't trust search results.

#HTML #CSS #WebDev

Ber Baquero Stand 🎸

1 day ago

⚡⌨️ Introducing ZapKeys!

Easy-to-use, quick-to-setup keyboard shortcuts for your websites.

#ZapKeys is a simple JS utility that quickly turns all interactive elements on a page into a key shortcut.

— Home page: https://zapkeys.berbaquero.com
— Announcement post: https://berbaquero.com/posts/2023/03/zapkeys/

#webdev #development #javascript #css #UI #opensource

Demonstration of ZapKeys utility on a webapp. It shows the shortcut key overlays on top of each interactive element of the page, and some of those elements get triggered (clicked on) after pressing the corresponding key-sequence.

Mikal with a k

1 day ago

Has anyone used #ChatGPT to write custom #CSS to modify basic styling of #Wordpress plugins or ask it to analyze a site and find which code controls the appearance of a plugin (or anything, really)?

I'm setting up #WooCommerce on my site to sell prints. It's built with #Elementor. I think the default Woo add-to-cart plugin is fugly. There are very limited built-in styling options, but Elementor and my Wordpress theme have places to paste in snippets of custom CSS, so I could fix it myself...if I knew CSS.

I don't know how to write CSS but I can kinda sorta read it. Changing basic styling like color or line weight is easy if I know I'm in the right place.

Or, instead of asking ChatGPT, maybe I could pay a human to point me in the right direction?