tixie, to CSS
@tixie@guerilla.studio avatar

Things That Can Break aspect-ratio in CSS
https://frontendmasters.com/blog/things-that-can-break-aspect-ratio-in-css/

bw, to random
@bw@social.lol avatar

I’m always looking for good CSS named-colors cheatsheets or references. This one is fun. Please send me ones you know of!

https://austingil.com/css-named-colors/

NeadReport,
@NeadReport@vivaldi.net avatar

@bw Probably not what you are looking for, but here is a website that allows you to create pixel art and then generate the CSS code for it.
https://kushagra.dev/lab/picssel-art/
#opensource #css #pixelart

inautilo, to webdev
@inautilo@mastodon.social avatar


The modern guide for making CSS shapes · Shapes with the smallest and most flexible code possible https://ilo.im/15yu2g

Freeplay, to firefox
@Freeplay@ilyamikcoder.com avatar

Firefox Onebar's repository has moved from Codeberg to https://git.gay/freeplay/Firefox-Onebar ! Along with some minor updates to the style :blobfoxfloofhappy:​

h4kor, to CSS German
@h4kor@chaos.social avatar

Apparently color-mix behave differently in and

Firefox screenshot

hmiron, to CSS
@hmiron@fosstodon.org avatar

Hey fellow people. I have an abstract question for you.

By what logic does a evolve?

Surely we can't build everything into one, so how do we decide what to build? Where to start from? A button?

My goal is to end up with a design system or collection of components that I compose into pages and pass the data into them.

remixtures, to webdev Portuguese
@remixtures@tldr.nettime.org avatar

#HTML #CSS #Hugo #WebDev #TechnicalWriting #SoftwareDocumentation #SSGs #StaticSites: “If you’ve ever wondered how a website works and whether or not you could build your own, this book is for you. The Static Site Guide walks you through the process of building a website from scratch by using hands-on examples. You’ll learn what a website is and how some of the most popular website technology works. By the time you reach the end, you’ll have built your very own website, and you’ll know how to do it again on your own.” https://www.staticguide.org/

mobileatom, to CSS
@mobileatom@flipboard.com avatar

The Modern Guide For Making CSS Shapes.

https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/?utm_source=flipboard&utm_medium=activitypub

Posted into Responsive Design, UX, UI, and more @responsive

cssbasics, to CSS
@cssbasics@hachyderm.io avatar

The Ultimate Shapes Collection: "Pure CSS shapes made with a single-element, modern CSS and an optimized code. All the shapes are here, look no further!" https://css-shape.com/

hmiron, to CSS
@hmiron@fosstodon.org avatar

Use #tailwind and you'll learn this weird DSL instead of actual #css

Now you're locked into that and you will experience anxiety when trying to switch. Awesome!

The fk did I just read?

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

📝 New CSS Article!

After the "Ultimate Collection of CSS Shapes". It's time for "The Modern Guide for making CSS Shapes". 🤩

https://smashingmagazine.com/2024/05/modern-guide-making-css-shapes/ via @smashingmag

A huge compilation of many CSS Tricks I have been using since years in this guide. All the secrets for creating CSS shapes are there!

Enjoy reading my 100th CSS Article! 🥳

kubikpixel, to webdev
@kubikpixel@chaos.social avatar

Oh look, in the future I won't have to worry about the invisibility of dialog boxes on websites because of their overlay.

☝️ Popover API
https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

—
#webapi #webdev #css #javascript #api #design #html #html5 #visible #popover #webdesign #website #popoverapi #web

cobweb, to random
@cobweb@corteximplant.com avatar

How are ya'll users doing images? I kind of want to add that to my daily thing but hmm. Surely there's a plugin for that?

secupriv,
@secupriv@mastodon.nl avatar

@cobweb I am curious too. By default you can set a size like this ![[image.png|pixels]]

Aligning an can be done using a like below and embed it like this ![[image.png#center|300]] but it’s a hassle to edit text along side the image when not in source mode.

divsrc$="["] {
text-align:left;
}

divsrc$="["] {
text-align:center;
}

divsrc$="["] {
float:right;
}

A better solution would be great!

@obsidianmd

spaceninja, to CSS
@spaceninja@mastodon.cloud avatar

isn’t real, they have played us for absolute fools https://cssisntreal.com

h4kor, to design German
@h4kor@chaos.social avatar

I removed PicoCSS from my blog and built my own stylesheet. I'm still lacking a good understanding of basic design principles.

Can anyone recommend resources to learn about basic ?

inautilo, to music
@inautilo@mastodon.social avatar


Printing music with CSS Grid · A fantastic showcase of what CSS Grid is capable of https://ilo.im/15yrr6

CSSence, to CSS
@CSSence@mas.to avatar

Basics: The flow-root display value.
https://cssence.com/2024/display-flow-root/

iamdtms,
@iamdtms@mas.to avatar

@CSSence I'm trying not to use floats in the age of flexbox & grid.

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

💡 CSS Tip!

How much code is needed to create a Sparkle shape? ✨
Only one gradient and you can easily get the border-only variation.

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

Online Version: https://css-tip.com/sparkle-shape/

Two sparkle shapes. The second one is a border-only variation.

pawelgrzybek, to CSS
@pawelgrzybek@mastodon.social avatar

This is absolutely nuts! Great article that I learned tons from.


https://vis.social/@yuanchuan/112386578533795188

WebAxe, to CSS
@WebAxe@a11y.info avatar

text spacing bookmarklet

Quick and dirty testing of WCAG 2.1 Success Criterion 1.4.12 Text Spacing

https://codepen.io/stevef/pen/YLMqbo/

stvfrnzl, to Nirvana
@stvfrnzl@mastodon.online avatar

To honor the late , I turned his letter to into a friendly website, using only , and :

https://stevefrenzel.github.io/steve-albini-letter/

Thanks to @thebishopgame who provided a link to the letter: https://wandering.shop/@thebishopgame/112406577143090727

Hopefully no typos in there! Also it respects your choice of color theme. 🤗

artlung, to CSS
@artlung@xoxo.zone avatar

Front End Study Hall continues! https://artlung.com/blog/2024/05/08/front-end-study-hall-continues/

tripplehelix, to CSS
@tripplehelix@fosstodon.org avatar

Published my current if you'd like to use it.

https://userstyles.world/style/16201/helixs-nationwide

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

💡CSS Tip!

Using the new relative color syntax, you can easily extract the R,G,B channels of any color and use them as separate colors.

Useful when you want to do some color manipulation.

Online Version: https://css-tip.com/rgb-channels/

css,
@css@front-end.social avatar

You can do the same thing with a different syntax using the color() function.

In both cases, you can either use "none" or "0". "none" is equivalent to "0" but has a special behavior when color interpolation is in play.

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