eric, to random
@eric@social.ericwbailey.website avatar
stvfrnzl,
@stvfrnzl@mastodon.online avatar

@eric @Wilto this looks so cool!

I've been thinking for a while now to have my website look more like a noir comic instead of a standard website.

Should be way more fun and a great exercise

css, to ai
@css@front-end.social avatar
johnnydecimal, to CSS
@johnnydecimal@hachyderm.io avatar

Any gurus want to help me solve a puzzle? Maybe @robb? Honestly I don't know where to start.

The 'Location' box at the top of my page works great. Except on landscape mobile, where the corners are all janky as the lines don't line up: see screenshot.

But if I take my desktop browser, pop it in responsive mode, and shrink the window: it's A-OK!

WTF?

A screenshot of Safari in responsive mode. The window is 591px wide and the lines look great!

SenseException, to CSS German
@SenseException@phpc.social avatar

communication tipp: It's important to know why !important was important

helma, to security
@helma@mastodon.social avatar

"Going Dark: The war on encryption is on the rise. Through a shady collaboration between the US and the EU."

https://mullvad.net/en/why-privacy-matters/going-dark

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

Thanks to everyone who joined us for our first ever Winging It Live stream last week! We had so much fun with you all that we're planning another one on May 30 @ 1pm ET / 11am MT.

Miriam (@mia) and James (@Jamessw) are going to discuss Anchor Positioning. Leave your questions in the comments. We'll post the link to the live stream here next week. Or you can subscribe to get updates.

https://www.youtube.com/@wingingitoddbird

noellemitchell, to Kurzgesagt
@noellemitchell@mstdn.social avatar

Why would I work on when I can look at interesting posts on instead? :blobcatlaugh: :blobcatcode:

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

I'm teaching a new layout workshop at the end of June – a three-session deep-dive into…

  • box alignment!
  • intrinsic & extrinsic sizing
  • when to use flexbox vs grid
  • media & container queries
  • layout contexts & 'normal' flow
  • and so much more…

Sign up now!

https://www.oddbird.net/workshops/cascading-layouts/

cirrus, to webdev
@cirrus@mstdn.social avatar

Started writing a decision log for our #DesignSystem. Documenting why we chose to build plain ol' #HTML and #CSS where we can and #WebComponents where client-side #JS is needed is turning into a bit of a manifesto. Essentially we're using (and encouraging others to use) #ProgressiveEnhancement 😉

davidbisset, to CSS
@davidbisset@phpc.social avatar

matcha.css is a "drop-in semantic styling library in pure #CSS".

https://matcha.mizu.sh/

Designed to style #HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.

Ideal for fast prototyping, static HTML pages, #Markdown generated documents, etc.

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

Hey my #JSHeroes2024 friends (and beyond)! I have published the slides of my talk “MPA View Transitions are here!” on my blog for you to check out.

Once the video gets published, I'll be sure to update the post to include it.

https://www.bram.us/2024/05/23/mpa-view-transitions-are-here-2024-05-23-jsheroes/

#CSS #ViewTransitions #JSHeroes

Me, on stage
Me on stage, from afar

davidbisset, to CSS
@davidbisset@phpc.social avatar

.counter_with_drawers {
margin-left: -40px;
}

XavCC, to CSS French
@XavCC@todon.eu avatar

Question

Comment faire un rendu propre d'iframe de carte umap dans un html ?

pour rendre un iframe de carte umap qui reste au centre de l'écran (sous h1 & h2, au dessus de footer) bien joli sympa ?

J'ai que du CSS et du HTML et je ne veux que ça !

aral, to SmallWeb
@aral@mastodon.ar.al avatar

So! Many! Kittens!

(Going to record a demo of the new interactive shell – REPL to some – and multi-page Settings this afternoon, just planning it out now.)

Oh and is that me creating and calling web routes interactively in the REPL on a live server? Why yes, yes it is.

:kitten:💕

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

💡 CSS Tip!

One line of code that looks strange and confusing. You may think it's not even CSS but it will save you many times in the future!

It will make sure the width of your element is always an integer! No more decimal and rounding issues!

"width: auto" with an upgrade 😎

No browser support yet but you can test it on the latest Chrome with the experimental flag enabled: https://codepen.io/t_afif/pen/rNgLyJz

kubikpixel, to webdev German
@kubikpixel@chaos.social avatar

«CSS :has(), the God Selector»
– by @brucelawson

Yes CSS is more then only a design and colors and have today cool functions to select specific HTML components and pleace web designer think in different screen spaces.

🖌️ https://brucelawson.co.uk/2024/css-has-the-god-selector/


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

Cascading Layouts: A workshop on resilient CSS layouts. https://www.oddbird.net/workshops/cascading-layouts/

Take your sites to the next level with Miriam Suzanne @mia in this 3-session, online workshop on building more resilient and maintainable web layouts using modern .

June 24 - 26 9:00a - 11:30a PT Register Today!

iamdtms, to CSS
@iamdtms@mas.to avatar

'How can I target the container with styles inside the query itself with nesting rulesets?'
https://iamdtms.medium.com/deep-dive-into-container-queries-da554222df98

tommi, to CSS
@tommi@pan.rent avatar

My (https://tommi.space), even though relatively simple and basic, has a lot of technical debt ( especially), and I am getting crazy cleaning it up…

boolat, to webdev
@boolat@mastodon.social avatar

Once I thought, what if there was a CSS file that makes the document look like it is a command line interface... So I made one, but I really don't know what it could be used for :)

video/mp4

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

now has round() and it's a big deal!

unlike say, Sass math.round(), this is much more powerful because it can round across units, and at runtime.

this is super useful when you have something like a percentage value that normally evaluates to a fractional pixel value.

top: 50%; /* computes to 662.27px */  
top: round(50%, 1px); /* computes to 662px */  

rounding such values will make them fit better in the pixel grid, avoiding potential blurring issues on some (windows) devices

scott, to CSS
@scott@typetura.social avatar

It’d be cool if there were a pointer-event value that would allow events on that layer as well as layers under it. Especially useful for canvas layers for effects while not blocking events on page interactions

jkjustjoshing, to CSS
@jkjustjoshing@fosstodon.org avatar

Is there ever a time when this

width: 100%;
max-width: 480px;

behaves differently than this?

width: 480px;
max-width: 100%;

westbrook, to webdev
@westbrook@mastodon.social avatar

h* elements have margin by default!? Who knew.

mobileatom, to CSS
@mobileatom@flipboard.com avatar

Modern CSS Layouts: You Might Not Need A Framework For That.

https://www.smashingmagazine.com/2024/05/modern-css-layouts-no-framework-needed/?utm_source=flipboard&utm_medium=activitypub

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

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