CSS Tips — Practical img Element Defaults

Опубликовано: 19 Декабрь 2023
на канале: CSS Weekly
2,218
192

A line-by-line guide through the sensible CSS for image elements you should apply in all your projects to make your img elements bulletproof by default.

All credit goes to Harry Roberts, who originally shared this technique on Twitter.

Harry's Tweet:   / 1717841334462005661  
CodePen Demo: https://codepen.io/ZoranJambor/pen/Jj...

Follow Harry Roberts:
✍️ Blog: https://csswizardry.com/
🐦 Twitter:   / csswizardry  

Get CSS Stickers Pack:
🔖 https://stickers.css-weekly.com

Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/

Course Mastering Prettier & Stylelint
🔥 Learn everything about the best linting tools while supporting CSS Weekly: https://masteringlinting.com/
🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.

Keep up-to-date with CSS Weekly:
🐦 Twitter:   / @cssweekly  
🎶 TikTok:   / cssweekly  
🎇 Instagram:   / cssweekly  
📘 Facebook:   / cssweekly  

📖 Chapters
00:00 Why you should use this technique
00:49 Demo setup
01:12 Fix distorted images
02:14 Fix empty space under images
03:02 Style alt text
03:59 Style low-quality image placeholders (LQIP)
05:07 Add margin for shape-outside

Zoran Jambor
#css #cssbasics


Смотрите видео CSS Tips — Practical img Element Defaults онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь CSS Weekly 19 Декабрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,21 раз и оно понравилось 19 людям.