yuanchuan, to CSS
@yuanchuan@vis.social avatar

Chrome has a different behaviour from FF and Safari.

They used be the same. I'm not sure if the spec changes or Chrome has a bug in recent releases

https://codepen.io/yuanchuan/pen/bGydpjP

Source code grid { display: grid; width: 600px; height: 200px; background: ; grid-template-columns: repeat(10, 1fr); } grid > div { border: 2px solid ; width: 50%; aspect-ratio: 1; }

geoff, to random
@geoff@front-end.social avatar

CSS Meditation #8: .work + .life { border: 10px solid ; }

sigmasternchen, to random

Syntactically correct Hello-World program in HTML:

<title>Hello, World!</title><style>*{display:inline;font-size:20px;font-weight:400;text-decoration:none;color:#000;unicode-bidi:isolate}head{display:none}</style><h1>!</h1><h2>d</h2><h3>l</h3><h4>r</h4><h5>o</h5><h6>W</h6><i> </i><b>,</b><u>o</u><a>l</a><div>l</div><span>e</span><p>H</p>
aral, to CSS
@aral@mastodon.ar.al avatar

Oh how useful text-emphasis would be if it didn’t affect line height.

ninavizz,
@ninavizz@mastodon.social avatar

@Professor_Stevens @aral

If you just want a word to stick-out in a paragraph on a white background; set the paragraph in a dark-gray, like 400wt. Use a 600 to 800wt font colored with to give it emphasis.

Visual contrast. Page hierarchy. Or, hell, blink-tag if pizazz might be in order.

joachim, to random French
@joachim@boitam.eu avatar

Alors les designers, on a peur de mettre du blanc sur du noir ? Pourquoi est-ce qu’il faut toujours un blanc juste un tout petit peu gris, et un noir juste un tout petit peu gris ? À part le fait que ça a été déclaré une “bonne pratique” à l’époque des écrans CRT, jamais un argument n’est donné. « Ça réduit le contraste » de façon absolument négligeable.

Mettez du --grey-000 ou du --grey-999 dans vos compos, assumez-vous, vivez un peu !

hamatti, to firefox
@hamatti@mastodon.world avatar

Bookmarklets are amazing.

Inspired by @adactio's post sharing his bookmarklets, I wrote about the ones I just the most as well.

https://hamatti.org/posts/my-most-used-bookmarklets/

Ciantic,
@Ciantic@twit.social avatar

@hamatti

Normalize fonts:

javascript:(function () { const s = document.createElement("style"); s.textContent = "body * { font-family: 'Verdana' !important; font-size: 16px !important; line-height: 1.5 !important; font-weight: normal !important; letter-spacing: 0 !important; color: !important; }"; document.head.append(s);})();

syuilo, to random
@syuilo@misskey.io avatar

Webデザイナーの有名なセオリーとして「黒()はNG」というものがあります。

その考えは古いから捨て去って欲しい
https://qiita.com/watoson3/items/fcf62479557f74e6d325

Moon, to random
@Moon@shitposter.club avatar

Does anyone know how to make this type of border with CSS?

The way I am thinking right now is place an SVG of a square on all four corners. Pure CSS would be preferable.

volpeon,

@Moon If you're interested in a technically better solution, "border-image" is the perfect solution for this. I made a quick demo SVG file that works with these rules:

div {
    border: 15px solid #000;
    border-image: url('./border.svg') 15;
}
ThatOneKirbyMain2568, to kbinStyles in voidBin - a dark DARK theme
ThatOneKirbyMain2568 avatar

Very nice! Would love to see this added as an official theme.

If you'd like, you can add --image-bg-color: #000; in the theme rules for idkbin compatibility.

stephaniewalter, to random
@stephaniewalter@front-end.social avatar

Reminder: pure white on black for your blog's dark mode might not be the best idea. There is such thing as "too much contrast" and, it might be as damaging for some users as not enough contrast. Be careful and offer options to switch to non-dark mode if needed.

Myndex, to random
@Myndex@techhub.social avatar

UX Movement. OMG.

There's an article there, I won't link as I don't want to boost engagement but "Why You Should Never Use Pure Black for Text or Backgrounds" is approximately the largest rubbish pile in the history of internet dumpster fires.

Attached is my latest reply:

To summarize, the actual science says: 1) For a light background, full back text is IDEAL. But it is useful to note that in most cases, #222 is functionally the same as #000. However, and expecially for body text, #000 is the goal, and there is no reason not to use full black test with light BGs, except for links or certain differentiation, but most especially for small body text, USE BLACK #000 BLACK 2) Use fullly black text. For questions on this concept, please see #1, above. 3) The cause of EYE STRAIN is NOT black text, it is a bright white background that is too bright for the eye’s adaptation state. And using grey text here MAKES FATIGUE WORSE. 4) I realize that posting articles with misinformation is the way to boost engagement, but dammit Anthony, don’t post harmful junk! If you want to do the dark engagement tactic, pick things that are innocuous and non-harmful to actual human beings. 5) When you see a site with unreadable gray text, please write them and complain. IT’s time to put a stop to this nonsense. Thank you for reading and have one of those “nice days” you’ve heard so much about. Andrew Somers Director of Research Inclusive Reading Technologies, Inc. and W3C WAI Invited Expert

jtruk, to random
@jtruk@mastodon.social avatar

New toy!
(Pimoroni packaging is, as ever, delightful)

A Picovision in a packet.

jtruk,
@jtruk@mastodon.social avatar

Ha. I don't know what to do with this.
I made a video, but the cheap capture card did horrible things to sound and it could be a while until I can fix that.

So:
I present "Peak Ambition", a first demo for in for Party , with the caveat that you shouldn't judge the hardware on the quality of this recording.
Also, extend that pass to me for all the snags I'd be fixing if there was more time 😄
But I'm still proud of it!

https://youtu.be/-l3pBx9a-Zc

syuilo, to random
@syuilo@misskey.io avatar
{
	id: 'f81ef101-2216-4f96-8d2b-e2157cc7cb10',
	base: 'dark',
	name: 'Halloween Dark',
	props: {
		X2: ':darken<2<@panel',
		X3: 'rgba(255, 255, 255, 0.05)',
		X4: 'rgba(255, 255, 255, 0.1)',
		X5: 'rgba(255, 255, 255, 0.05)',
		X6: 'rgba(255, 255, 255, 0.15)',
		X7: 'rgba(255, 255, 255, 0.05)',
		X8: ':lighten<5<@accent',
		X9: ':darken<5<@accent',
		bg: 'rgb(37, 32, 47)',
		fg: '#e0d5c0',
		X10: ':alpha<0.4<@accent',
		X11: 'rgba(0, 0, 0, 0.3)',
		X12: 'rgba(255, 255, 255, 0.1)',
		X13: 'rgba(255, 255, 255, 0.15)',
		X14: ':alpha<0.5<@navBg',
		X15: ':alpha<0<@panel',
		X16: ':alpha<0.7<@panel',
		X17: ':alpha<0.8<@bg',
		cwBg: '#687390',
		cwFg: '#393f4f',
		link: 'rgb(172, 193, 68)',
		warn: '#ecb637',
		badge: '#31b1ce',
		error: '#ec4137',
		focus: ':alpha<0.3<@accent',
		navBg: '@panel',
		navFg: '@fg',
		panel: ':lighten<3<@bg',
		popup: ':lighten<3<@panel',
		accent: 'rgb(242, 133, 36)',
		header: ':alpha<0.7<@panel',
		infoBg: '#253142',
		infoFg: '#fff',
		renote: '#229e82',
		shadow: 'rgba(0, 0, 0, 0.3)',
		divider: 'rgba(255, 255, 255, 0.1)',
		hashtag: 'rgb(188, 90, 255)',
		mention: '@accent',
		modalBg: 'rgba(0, 0, 0, 0.5)',
		success: '#86b300',
		buttonBg: 'rgba(255, 255, 255, 0.05)',
		switchBg: 'rgba(255, 255, 255, 0.15)',
		acrylicBg: ':alpha<0.5<@bg',
		cwHoverBg: '#707b97',
		indicator: '@accent',
		mentionMe: '@mention',
		messageBg: '@bg',
		navActive: '@accent',
		accentedBg: ':alpha<0.15<@accent',
		fgOnAccent: '#000',
		infoWarnBg: '#42321c',
		infoWarnFg: '#ffbd3e',
		navHoverFg: ':lighten<17<@fg',
		dateLabelFg: '@fg',
		inputBorder: 'rgba(255, 255, 255, 0.1)',
		panelBorder: '" solid 1px var(--divider)',
		accentDarken: ':darken<10<@accent',
		acrylicPanel: ':alpha<0.5<@panel',
		navIndicator: '@indicator',
		accentLighten: ':lighten<10<@accent',
		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
		driveFolderBg: ':alpha<0.3<@accent',
		fgHighlighted: ':lighten<3<@fg',
		fgTransparent: ':alpha<0.5<@fg',
		panelHeaderBg: ':lighten<3<@panel',
		panelHeaderFg: '@fg',
		buttonGradateA: '@accent',
		buttonGradateB: ':hue<20<@accent',
		htmlThemeColor: '@bg',
		panelHighlight: ':lighten<3<@panel',
		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
		fgTransparentWeak: ':alpha<0.75<@fg',
		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
	},
	author: '@syuilo@misskey.io',
}
Floppy, to accessibility
@Floppy@mastodon.me.uk avatar

People who use “dark mode” colour schemes on the web; is it preferable to choose it yourself via a setting specifically for the site, or have the site automatically switch based on your system preferences? Is there best practice here?

DamonHD,
@DamonHD@mastodon.social avatar

@brunogirin @Floppy FWIW by system is set up in the HTML as:

<meta name=color-scheme content="light dark">

then in the in-line CSS:

@media (prefers-color-scheme: dark) { body { background-color: ; color: ; } img{ filter: brightness(.9); } }

and that is basically it.

toastal, to webdev in Is highlight.js Harmful for Your Site?

I wish I knew. There are CSS queries for monochrome displays, but it seems mine reports to the OS as full color so you can’t really work with the device specifically (screenshots come back in color too). This blows because there are obvious scenarios I would remove a light gray background behind say code because it just looks awful. Just as much, you basically only want to be using & unless you have a good reason.

mods, to random

We've made some design changes to make DMs a bit more obvious on the web interface.

Now they'll stand out from regular replies in your notifications, and look even more queer!

A light-mode Mastodon web interface DM showing a rainbow sidebar and updated background and DM icon design that reads, "@david I hope that members like the change! It's even adjusted for folks using the dark mode web interface"

mods,

This was based on inspiration from @welshpixie!

We made some CSS changes to get a gradient border on the left instead of a solid color. Here's the code:

/* We're making DMs more obvious and queer! */
.status__wrapper-direct {
border-left: solid 5px transparent !important;
background-color: rgba(219, 226, 232, 0.25);
}
.theme-default .status__wrapper-direct {
background-color: rgba(219, 226, 232, 0.1);
}
.status__wrapper-direct::before {
content: '';
position: absolute;
width: 5px;
max-width: 5px;
height: calc(100% - 16px);
top: 8px; right: 0; bottom: 8px; left: 0;
z-index: 1;
margin-left: -5px;
background: linear-gradient(to bottom, 0%, 15%, 20%, 30%, 40%, 50%, 60%, 70%, 85%, 100%);
border-radius: 0 5px 5px 0;
}
.status__wrapper-direct .status__relative-time .status__visibility-icon {
background-color: ;
border-radius: 50%;
padding: 3px 6px;
color: white;
margin-right: 6px;
}

felixthehat, to CSS

folk – what’s a good way to set variables for a theme AND prefers-color-theme?

Trying to think of a DRY way – it’s a shame we can’t do something like the following

[data-theme="dark"],  
@media (prefers-color-scheme: dark) {  
--text: #445969;  
--background: #3B4854;  
--border: #7E92A3;  
}  

amxmln,
@amxmln@mastodon.design avatar

@felixthehat maybe tokenize your colours?

Something like:

:root {  
--black: #000;  
--white: #fff;  
--text: var(--black);  
--bg: var(--white);  
}

[data-theme="dark"] {  
--text: var(--white);  
--bg: var(--black);  
}

@media (prefers-color-scheme: dark) {  
--text: var(--white);  
--bg: var(--black);  
}  

It saves you from having to define colours multiple times, even though it's still quite verbose. 😅

plistig, to dach in /r/de bis einschließlich Sonntag, dem 18.06., im Blackout

Klasse, danke! In Ermangelung von Lemmy-Gold, kann ich dir nur diese Münze überreichen: ¤

Ich habe deine Vorlage noch geringfügig angepasst: https://i.imgur.com/DHnf9QM.png

::: spoiler Code:

/* makes the top navigation bar sticky, so it won't scroll out of view */
 nav.navbar {
    position: sticky;
    top: 0;
    background: var(--lt-color-background-default);
    /* default light-mode color */
    z-index: 100;
}
/* Override to keep the bottom disclaimer bar at the bottom */
 div+nav.navbar {
    z-index: 100;
    position: relative;
    background: transparent !important;
    bottom: 0;
}
/* On darkmode the topbar has a darker shade of gray */
 @media(prefers-color-scheme: dark) {
    nav.navbar {
    	background-color: #222222e0 !important;
    }
}

/* indents comments on comments further to keep the hierarchy more pronounced */
 .comment-node {
    position: relative;
}

.ml-1, .mx-1 {
  margin-left: 1.5ch !important;
}

/* Move the Collapse/Expand toggle in front of username/avatar */
button[aria-label="Collapse"], button[aria-label="Expand"] {
    position: absolute;
    left: -4ch;
}

.col-12.col-md-8 > div:not([class]) {
    background-color: #22222280;
    padding: 1ch;
}

body {
    background-color: #000;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {
  max-width: 1440px;
}

.d-flex.text-muted.font-weight-bold {
    display: none !important;
}

:is(.ml-2, [class=""]):is(:focus, :hover) .d-flex.text-muted.font-weight-bold {
    display: flex !important;
    position: absolute;
    z-index: 50;
    background-color: #222222a0;
}

.ml-2 {
    padding-bottom: 4px;
    padding-left: 0.5ch;
}

.details.border-top {
	border-color: #aaaaaa20 !important;
    border-radius: 2ch;
}

:::

bkardell, to random
@bkardell@toot.cafe avatar

You ever "know" something, but then later on grok some dead simple aspect of it and your mind it blown with a whole different appreciation of it? Today this hit me when it was pointed out that or 'white' is not necessarily the most intense white. Like, I guess I knew this, at one time there was a lot of focus on our ability to make blacker blacks, now when I think about improvements I think about more saturated colors.. but.. yeah.

svgeesus,
@svgeesus@mastodon.social avatar

@simevidas @AmeliaBR @bkardell The whiter white is still inside the sRGB triangle. It is the same color, but brighter.

If or color(srgb 0 0 0) and is color (srgb 1 1 1) then a brigher white would be color(srgb 2 2 2) for example.

rafa, to random
@rafa@mastodon.design avatar

10 years later and I still think about this blog post daily, and I haven't used #000 for anything (except text) since😅

"Design Tip: Never Use Black”, by @ian
https://ianstormtaylor.com/design-tip-never-use-black/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • kavyap
  • DreamBathrooms
  • InstantRegret
  • magazineikmin
  • ngwrru68w68
  • cubers
  • thenastyranch
  • Youngstown
  • rosin
  • slotface
  • cisconetworking
  • mdbf
  • ethstaker
  • JUstTest
  • Durango
  • khanakhh
  • GTA5RPClips
  • anitta
  • osvaldo12
  • everett
  • normalnudes
  • tester
  • tacticalgear
  • provamag3
  • modclub
  • Leos
  • lostlight
  • All magazines