css , to Random
@css@front-end.social avatar

In case you missed it, my CSS Generators website counts no less than 10 online generators. Section divider, gradient shadows, custom border, custom corners, and more!

👉 https://css-generators.com 👈

Get an optimized code with modern CSS in no time!

Showing the banners of the different generator websites.

kizu , to Random
@kizu@front-end.social avatar

New post: “Recent CSS Bookmarks 15”

https://blog.kizu.dev/recent-css-bookmarks-015/

A compilation of 23 articles and posts about various topics: colors and themes, container queries, accessibility, grids, future , and more.

schizanon , to Random
@schizanon@mas.to avatar

Sometimes I think about building websites the way people designed old 8bit video games; black opening screen with logo, LOUD CHIME SOUND, upbeat music, "press start", menus with large graphics and glowing animations.

css , to Random
@css@front-end.social avatar

Everyone is excited about the new align-content that works with block-level elements, but pay attention when you want to center image, iframe, canvas, video, etc.

⚠️ They won't get centered ⚠️

They will look centered but in reality, they are not!

Images and similar inline-level elements have a white space under them due to the default baseline alignment, and that space is preserved when using align-content.

So don't forget to get rid of that space using vertical-align: top

Adding vertical-align: top to the image to have a perfect centering alignment

css , to Random
@css@front-end.social avatar

I have been using the mask property for years (with prefixes) and now most of the browsers support the un-prefixed version so it's time for you to use it!

Check my latest article to see what you can do using mask and mask-composite!

https://frontendmasters.com/blog/creating-flower-shapes-using-css-mask-trigonometric-functions/

schizanon , to Random
@schizanon@mas.to avatar

Recently there was an article on HackerNews about CSS Print styles. Here's mine; included in the page with <link rel="stylesheet" href="/print.css" media="print" /> so it won't slow down the page when not printing.

css , to Random
@css@front-end.social avatar

A tooltip with rounded corners where you can easily adjust the tail position? Yes it's possible!

It's done with one element and no pseudo-elements. The border-radius adjusts automatically to fit the position of the tail 😍

In the below, I am adjusting one CSS variable. And that's only one example among my new CSS collection: https://css-generators.com/tooltip-speech-bubble/

A tooltip with rounded corners and a bottom tail

css , to Random
@css@front-end.social avatar

Are you looking for a CSS Tooltip or a Speech Bubble? 💭🗨️
Look no further and check my latest CSS collection!

👉 https://css-generators.com/tooltip-speech-bubble/

Such shapes can be difficult to create, so I have coded 100 different variations 🤩
✅ A single element per shape
✅ Powered by modern CSS
✅ Easy to control using CSS variables

No more struggle with magic numbers and hacks. One-click to copy the code and then you adjust a few variables!

miunau , to Random
@miunau@meow.social avatar

Figured out how to color text black or white depending on background lightness without breaking the components down to HSL in

Edit: this is now a blog post! https://miunau.com/posts/dynamic-text-contrast-in-css/

Quick and dirty filter stacking

Assuming --bgColor contains your background color:

    span {<br></br>        color: var(--bgColor);<br></br>        filter: invert(1) grayscale(1) brightness(1.3) contrast(9000);<br></br>        mix-blend-mode: luminosity;<br></br>        opacity: 0.95;<br></br>    }<br></br>

This will turn to black around #AAAAAA. adjust brightness lower if you want it to turn to black earlier. play around with contrast as well, using low and high values.

After playing around with this (thanks @mia), we noticed there's some fringes happening at certain color values right when it is about to switch from black to white, so this might work best with colors that you get to control to some degree.

Less fringing with SVG filters

But! Here is a version that has no fringing:

Add this somewhere in your markup- it can be anywhere as long as the id bwFilter can be referenced.

<br></br><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0"><br></br>    <defs><br></br>        <filter id="bwFilter" color-interpolation-filters="sRGB"><br></br>            <!-- Convert to grayscale based on luminance --><br></br>            <feColorMatrix type="matrix"<br></br>                values="0.2126 0.7152 0.0722 0 0<br></br>                        0.2126 0.7152 0.0722 0 0<br></br>                        0.2126 0.7152 0.0722 0 0<br></br>                        0 0 0 1 0"/><br></br>            <!-- Expand edges slightly to clean up any fringing --><br></br>            <feMorphology operator="dilate" radius="2"/><br></br>            <!-- Apply the threshold to determine if the color should be black or white --><br></br>            <feComponentTransfer><br></br>                <feFuncR type="linear" slope="-255" intercept="128"/><br></br>                <feFuncG type="linear" slope="-255" intercept="128"/><br></br>                <feFuncB type="linear" slope="-255" intercept="128"/><br></br>            </feComponentTransfer><br></br>            <!-- Composite step to clean up the result --><br></br>            <feComposite operator="in" in2="SourceGraphic"/><br></br>        </filter><br></br>    </defs><br></br></svg><br></br>

Then just reference it in your css:

span {<br></br>    color: var(--bgColor);<br></br>    filter: url(#bwFilter);<br></br>}<br></br>

tada! no fringing!

svg version here: https://codepen.io/miunau/pen/oNVaJoN?editors=1100

css , to Random
@css@front-end.social avatar

💡 CSS Tip!

Use the magic border-image and add as many borders as you want to your images for a fancy decoration
✅ No extra elements & No pseudo-elements
✅ Only one gradient
✅ Optimized with CSS variables

Demo: https://codepen.io/t_afif/full/JjzpwyL via :codepen: @codepen

Online Version: https://css-tip.com/infinite-borders/

Two images with infinite borders

ThatOneKirbyMain2568 , to Mbin Blog Updates
@ThatOneKirbyMain2568@kbin.social avatar

I've been doing a lot with userstyles and userscripts lately!

First, I've just released idkbin 1.3.7 and Dropdown Menu Icons 1.1.0, both of which add icons to the "more" button's dropdown menu.

Second, I made my first userscript: Improved Channel Select Menu! This is my first time making something with —a good bit of the code is based of raltsm4k's Floating Subs List—but I'm really happy with it! Earlier today, I released version 0.2.0 which adds a settings button and some new features. If you have any feedback, please share here.

hotsauce , to Random
@hotsauce@drupal.community avatar

🎉 Firefox 121 is officially released with :has() support!

eloquence , to Random
@eloquence@social.coop avatar

This is a big deal:

The W3C, founded in 1994 by web inventor Tim Berners-Lee, has quit X and declared the fediverse to be their primary social media channel. Follow them at: @w3c

The future of the open web is .. the open web.

mima ,

@f09fa681 Issue of whatwg/html pretty much explains for itself what it means for contributions which don't get "enough implementer interest" in the despite having a significant grassroots support.

This obsession in making sure at least two "implementers" have the feature baked into their codebases is frankly bull and is one of the factors of why we have such a -biased . Theoretically it's there so that every feature would be certain that there are players backing and seeing that feature being useful and good for the , but in reality it has become Google's veto in most cases, with the popular being one of the victims here. It has been a standard for quite some years, yet Chrome's developers seem to have an extreme case of "Not Invented Here" syndrome and decided not to implement it for whatever reason. Maybe they really don't have an interest in it and are therefore in "patches welcome" mode like a corporation would do in . Or maybe, they saw it as a threat to their Google because it pretty much satisfies most of the usecases their toy project is designed to solve, and web developers don't want to deal with such a complex feature just to limit the scope of their . Whatever the reason is, this should not kill a feature that has been long-awaited by many web developers to be supported in their and is backed by a well-maintained and developed (which is in this case).

Allowing comments in GitHub issues is ultimately useless if the final decisions are made by a closed cabal of big "implementers" who as history has shown has been pretty much Google's lapdogs most of the time.

@fluepke @eloquence

schizanon , to Random
@schizanon@mas.to avatar

What's the best static site builder for people who make with tools so they think that can't build websites?

mvriel , to Random
@mvriel@mastodon.social avatar

I believe that one of the biggest positive changes I made when upping my skills is to adopt the naming conventions (https://en.bem.info/methodology/naming-convention/) and start thinking about my HTML structure in terms of blocks, elements and modifiers.

rolle , to Random
@rolle@mementomori.social avatar

Fedi on Fire first beta is now released! I just had to try and do it... Watch those endless Fediverse posts flow! :meow_hearteyes: Check it out at https://fedionfire.stream

Gif animation of endless posts on the fediverse, scrolling fast.

ellane , to ObsidianMD
@ellane@pkm.social avatar

Anyone want to write me some to make the traditional writer's reminder of missing information, TK, show up prominently in wherever it occurs within a long text?

I'm thinking sans serif bold small caps, nicely letter spaced, maybe in light orange. Like Medium does it. Doesn't have to be offset to the side, just a nice visual blip to catch one's attention in the flow of the text.

@obsidianmd

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • insurance
  • testing
  • tech
  • drbboard
  • updates
  • til
  • programming
  • bitcoincash
  • marketreserach
  • wanderlust
  • Sacramento
  • All magazines