code monkey. music lover. average guitarist. football (@LFC) fan. got some dogs 🇪🇺🏳️🌈
Joined March 2019
- Tweets944
- Following320
- Followers45
- Likes1.2K
Andrew Long retweeted
2024 Election Specials. 4. The Conservatives
youtu.be/cKAeO-5saqQ
Andrew Long retweeted
📝 text-wrap Rendering Performance
I wanted to see what the overhead of the new text-wrap: [balance|pretty]; properties was. To test, I built a page with 10,000 <p> elements which, by default, have orphans—5,000 of the following:
Andrew Long retweeted
Nurses, we stand with you.
Today, and always.
Please RT if you do too - your support means more than you could ever know.
#NursesStrike
Andrew Long retweeted
This one might just be my angriest yet: Strikes!
Full version here: youtu.be/Gljtvwhcdhc
Andrew Long retweeted
When I was little I was determined to always protect nature, stand against 'bad people' to save forests, animals, wilderness. 🌳🌱🦝🦉
As I grew up my convictions slowly faded, and I've done literally nothing.
Andrew Long retweeted
Future CSS Tip! 🔮
Use animation-timeline to create scroll-linked animations 🤯
li { view-timeline-name:in; }
img { animation-name:reveal; animation-timeline:in; }
Animation is bound to the li position in the viewport ✨
Check these image reveals 😎
Demo link/info below! 👇
Andrew Long retweeted
A thread about content from the talk 👇
CSS scroll-snap is a classic CSS property; small, innocent looking API with huge potential. @argyleink showed us a whole bag of snappy tricks at #cssday
Full talk: youtu.be/34zcWFLCDIc
Slides: oh-snap.netlify.app/
Andrew Long retweeted
Enough is enough. It's time to turn anger into action.
Join the campaign to fight the cost-of-living crisis.
wesayenough.co.uk
Andrew Long retweeted
⚡️ Speedy CSS Tip! ⚡️
Create curved content scrollers 💈
Have a play with ✨ CSS mask ✨ and scroll-snap 🫰
Hope it's useful! 🤞 Thank you for the feedback 🙏
What shall we do next? 🧐
@CodePen link below 👇
Andrew Long retweeted
🎉 Shipping with Chrome 104 (released today) are individual CSS properties to do transforms.
From now on you can transform elements with the translate, rotate, and scale properties. Supported in all browser engines!
🔗 Read the post here: web.dev/css-individual-trans…
ALT .target { translate: 50% 0; rotate: 30deg; scale: 1.2; }
Andrew Long retweeted
✨ CSS Tip! (or Trick 🤔) ✨
Use the mask property to mask(hide) parts of an element
Use it to create a faux 3D content scroller 🤿
.track {
mask: radial-gradient(transparent 0 30%, black 30%)
50% 20vmin / 250% 100%,
}
👉 codepen.io/jh3y/pen/gOeXgXv via @CodePen
Andrew Long retweeted
You might find my videos helpful. YouTube.com/layoutland. Be sure to watch the Resilient CSS series. And my talks from @aneventapart (listed on the channel page).
Andrew Long retweeted
All your bills going up and up and up.
Taxes rising to the highest level in 70 years.
The worst economic crisis for a generation.
Not our words.
The words of those running to be the next Tory leader.
See what else they think of 12 years of Tory failure:
Andrew Long retweeted
Two Levels of Customising “<selectmenu>”, by @hdv:
hidde.blog/custom-select-wit…
Andrew Long retweeted
“Trade unionists are greedy for wanting a pay rise? The profits of the top FTSE companies have gone up 73% since 2019. When are we going to ask if they’re greedy?”
- @RMTunion’s Eddie Dempsey
Andrew Long retweeted
I could not find an example of a modern search box design that includes a visible search button, so I made one myself.
✅ Visible search button with text (not icon-only)
✅ Label + placeholder (but not placeholder attribute)
codepen.io/mikemai2awesome/p…
#html #css #a11y
Andrew Long retweeted
I put together a CSS Reset that uses modern CSS features such as :where(), logical properties, prefers-reduced-motion, etc. ✨
Lots of inspiration from @JoshWComeau, @hankchizljaw, and @argyleink.
elly.to/CSS-Reset
ALT This image contains the entire CSS Reset, to read it please go to https://elly.to/CSS-Reset as it won't fit into the alt text 1,000 character limit.
Andrew Long retweeted
💡 CSS Tip!
I told you that, using 2 CSS declarations, we can extend the background of an element outside of its container but we can still do better!
Demo: codepen.io/t_afif/full/oNEaq… via @CodePen
Full credit to @SelenIT2 for this sorcery 🧙♂️
nitter.gq/SelenIT2/status/153449…
#CSS
ALT Overview of the CSS code from the demo used in the tweet
ALT Result of the demo in the tweet. Different section having max-width and one of them is having a pink background that cover the full screen width
💡 CSS Tip!
Extend the background of an element outside of its container to cover the full screen width
✅ No extra element
✅ No pseudo-element
✅ No overflow issue
✅ Only 2 CSS declarations
Demo: codepen.io/t_afif/full/LYQgP… via @CodePen
#CSS
ALT Overview of the CSS code from the demo in the tweet
ALT A basic CSS layout with different sections having max-width and centered. One element inside those section is having a pink background that cover the full screen width.