@LondonCSS

Dedicated to all things CSS. Curated by @oliverturner, @ohhelloana and @_phzn

 London
londoncss.dev
Joined July 2014
  • Tweets1.1K
  • Following520
  • Followers1.1K
68Media
No words. (Only letters) #CSS Full code @CodePen: codepen.io/amit_sheen/full/J…
2
5
62
A couple of weeks ago I spoke about “Generative Design with CSS Houdini” @LondonCSS — if you would like to dip your toe into the generative design ocean, this is a great place to start! ✨ youtube.com/watch?v=31QxKFJ7…
1
3
22
The talk I gave at @LondonCSS is now available for viewing on YouTube, along with the other super excellent talks that have been there. Go watch! 🤩 youtube.com/playlist?list=PL…
5
18
I really liked yesterday's gear, but I had to take it a few steps further and make it 'my own'. Full code @CodePen: codepen.io/amit_sheen/pen/yL…
9
4
4
61
London CSS retweeted
Lily@Lily_2point09 Sep 2021
“What’s all this for? First of all, it’s beautiful” –@julia_miocene 🔥Amazing talk @londoncss
1
2
7
Woo! @georgedoescode is doing a *wonderful* talk at @LondonCSS
1
15
Responsive vs Adaptive Design in #CSS with Media Queries Saw bad advice, wanted to share my thoughts.. (see attached code) [aside] 🤓 HTML & JavaScript can help designs adapt *even more* via support for translation, screen readers, keyboard, gamepad, touch, print and much more!
/* Viewport Size */ @media (max-width: 320px) { … } @media (width <= 320px) { … } @media (320px <= width <= 768px) { … } @media (aspect-ratio: 16/9) { … } /* Viewport Orientation */ @media (orientation: portrait) { … }

ALT /* Viewport Size */ @media (max-width: 320px) { … } @media (width <= 320px) { … } @media (320px <= width <= 768px) { … } @media (aspect-ratio: 16/9) { … } /* Viewport Orientation */ @media (orientation: portrait) { … }

/* User Settings */ @media (prefers-color-scheme: dark) { … } @media (prefers-color-scheme: light) { … } @media (prefers-reduced-motion: no-preference) { … } @media (prefers-reduced-data: no-preference) { … } @media (prefers-contrast: more) { … } /* Device Capabilities */ @media (dynamic-range: high) { … } @media (resolution: 300dpi) { … } @media (hover) { … } @media (pointer: fine) { … } /* Browser Capabilities */ @supports (grid: 1fr / 1fr) { … }

ALT /* User Settings */ @media (prefers-color-scheme: dark) { … } @media (prefers-color-scheme: light) { … } @media (prefers-reduced-motion: no-preference) { … } @media (prefers-reduced-data: no-preference) { … } @media (prefers-contrast: more) { … } /* Device Capabilities */ @media (dynamic-range: high) { … } @media (resolution: 300dpi) { … } @media (hover) { … } @media (pointer: fine) { … } /* Browser Capabilities */ @supports (grid: 1fr / 1fr) { … }

2
69
1
340
Hey! I'll be (virtually) speaking at @LondonCSS in September alongside @julia_miocene and @amit_sheen — be sure to check in for some wonderful creative CSS stuff! ✨ Link here! // londoncss.dev/events/event6/
6
18
London CSS retweeted
Elad Shechter@eladsc12 Jul 2021
🤨 The #CSS ways, old VS new, to set the <body> element to cover the entire 'height' of the screen:
15
117
18
954
A few places to learn more about Style Stage: - Original announcement: dev.to/5t3ph/announcing-styl… - Launch live stream: youtu.be/O2hLsVX5eN0 - My talk about it at @LondonCSS youtu.be/Pu4cgMq4dDw - An overview on @SomeAnticsDev youtu.be/w173MUXyBrc
2
3
London CSS retweeted
Jo@ThisIsJoFrank17 Jun 2021
Such a well written, thoughtful post for all developers - junior and non-junior alike.
This quoted post is unavailable.
Try viewing anyway · View on X
2
9
AVIF in CSS A @PostCSS plugin & tiny JS script (315B gzipped) to use AVIF image format in CSS background 📦 github.com/nucliweb/avif-in-… #AVIF #Image #ImagePerf #CSS
2
27
2
60
London CSS retweeted
SydCSS@SydCSS10 Dec 2020
Catch @MikeRiethmuller coming up in the next few minutes with our cousins @LondonCSS
London CSS@LondonCSS10 Dec 2020
And "doors" are open! Join us: live.remo.co/e/london-css-ho…
1
3
"You can't spell Christmas without CSS" - @oliverturner
1
2
23
🟣 CSS `box-shadow` Tips: - Layer up your box-shadows for multiple effects - Set only the 3rd value - spread - to create a pseudo-border - Create a more "natural" shadow by using a negative spread radius 📺 See demos and learn the syntax - 4 min video: 5t3ph.dev/box-shadow
A box-shadow example showing how to create a pseudo-border by only setting the radius value to a positive number, and layering that with a more standard drop-shadow effect but with the use of a negative spread value.

ALT A box-shadow example showing how to create a pseudo-border by only setting the radius value to a positive number, and layering that with a more standard drop-shadow effect but with the use of a negative spread value.

3
20
5
184
London CSS retweeted
London CSS@LondonCSS5 Dec 2020
Good morning CSS friends! ☕️ Join us this Thursday (10th December) for another cozy evening in with exciting talks from @seaotta, @MikeRiethmuller and @siddharthkp See the full agenda and access links on our website. Tell your friends!
9
4
26
💁‍♀️ Quick #CSS tip: The `outline-offset` property accepts negative values, which can be useful for when you want to show an outline & avoid it cutting off or overlapping adjacent elements, such as focusable table (or grid) cells and rows.
Screenshot showing what the default focus outline would look like on a table cell versus an outline offset using a negative value equal to the width of the outline, resulting in the offset being contained in the cell.

ALT Screenshot showing what the default focus outline would look like on a table cell versus an outline offset using a negative value equal to the width of the outline, resulting in the offset being contained in the cell.

16
125
12
981
I do think that the way CSS has been taught - as a collection of tricks - hasn't helped people understand the language. And I've done that in the past too. You can understand modern CSS as a system, and it makes a lot more sense when you do.
23
184
44
1,091
👉🏻 “`content-visiblity` Without Jittery Scrollbars” 🔗 infrequently.org/2020/12/con…

`content-visiblity` Without Jittery Scrollbars - Infrequently Noted

The new `content-visibility` CSS property finally lets us render only what's on screen. What could possibly go wrong?

infrequently.org
3
12
Count me in! 💛✨
London CSS@LondonCSS5 Dec 2020
Good morning CSS friends! ☕️ Join us this Thursday (10th December) for another cozy evening in with exciting talks from @seaotta, @MikeRiethmuller and @siddharthkp See the full agenda and access links on our website. Tell your friends!
1
2
Load more