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

I updated my article about root containers container queries. At @OddBird we've found the simplest solution is:

  • no containment on root or body, since there are so many potential side effects
  • do contain all the top-level page elements: nav, header, main, footer etc

That provides some nearly top-level containers, while avoiding the issues. Have you run into this? How do you handle it?

https://www.oddbird.net/2023/07/05/contain-root/

j9t, to CSS
@j9t@mas.to avatar

From the archives:

The CSS Art Paradox:

https://meiert.com/en/blog/the-css-art-paradox/

mobileatom, to CSS
@mobileatom@flipboard.com avatar

The Times You Need A Custom @property Instead Of A CSS Variable.

https://www.smashingmagazine.com/2024/05/times-need-custom-property-instead-css-variable/?utm_source=flipboard&utm_medium=activitypub

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

chrismcolvin, to CSS
@chrismcolvin@mastodon.social avatar

I know I’m late to the party, but :has() is the best. Feels like I’m solving new problems daily with this little beauty.

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

tips for understanding and memorizing alignment stuff.

  • align vs justify: think of an inline flow, where justify keyword of text-align controls the text in an inline direction. And for align think of vertical-align, which controls it over the block axis.

  • items vs content: an “item” is something that can be controlled by itself, via -self properties. content is a single entity, where you align the whole chunk of things, without a way to override it per item.

jimniels, to random
@jimniels@mastodon.social avatar

CSS nesting is a bit tricky when it comes to progressive enhancement.

I’ve been bitten twice now by shipping some nested css and finding my layouts busted on devices that aren’t that old.

So I’m still doing a lot of non-nested CSS for personal projects. Maybe a few more years.

stvfrnzl,
@stvfrnzl@mastodon.online avatar

@jimniels same here! I've replaced the syntax with nested and while it worked on all major browsers (latest version), everything was broken when using an older

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

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

#Shape #Tab #Tooltip #Clipping #Masking #WebDev #Frontend #HTML #CSS #CustomProperty

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 #image can be done using a #CSS 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$="[#left"] {
text-align:left;
}

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

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

A better solution would be great!

#Obsidian @obsidianmd #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/

#CSS #HTML

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

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