Some minor tricks for adding that ✨ pixie dust ✨ to your website!
👍31❤18🔥9
Have you ever struggled to set 100% width on an item while also setting some margin for it I'm CSS? Once you know this trick you no longer have to!
👉 The "width" we set on CSS element is applied till the border of the element (content, padding and border)
But what if we want the element to have some margin as well but still fit inside the patent?
You may try to use some 🧠 math like calc(100% - 40px), but with the "stretch" keyword for the width property, CSS automatically does this for you.
🔥 This helps to easily fit an element inside it's parent even when it has some margin!
❤33👍26🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Do you have an image that is not exactly the same size as what you want to render it as?
Just turn on the object-fit propery to cover for the image element!
This property ensures that irrespective of the dimension of the image element, the contents fully covers the element without any distortion.
👉 Without this, the content would be stretched to fit the element
Please open Telegram to view this post
VIEW IN TELEGRAM
👍57❤23🔥11
Media is too big
VIEW IN TELEGRAM
🔅 Crazy Text Animation with CSS and SVG
In this video with the topic Crazy Text Animation with CSS and SVG, I will share with everyone an extremely interesting idea to create text animation without using javascript. By combining vector SVG and CSS, we will create an extremely impressive text animation.
👍50❤20🔥9
Please open Telegram to view this post
VIEW IN TELEGRAM
❤51👍23🔥4
Media is too big
VIEW IN TELEGRAM
🔅 This CSS Property Replaces Hundreds of Lines of Code
00:00 - Introduction
00:35 - Starting Code
01:04 - field-sizing Property Basics
04:19 - Caveats
05:05 - Browser Support
00:00 - Introduction
00:35 - Starting Code
01:04 - field-sizing Property Basics
04:19 - Caveats
05:05 - Browser Support
❤36👍12🔥5
Create eye-catching shapes to add some depth and dimension to your website.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤4🔥3
🔅 CSS: Enhancing Interfaces with Animation
🌐 Author: Christina Gorton
🔰 Level: Intermediate
⏰ Duration: 1h 3m
📗 Topics: Interactive Web Content, Cascading Style Sheets
📤 Join Web Development for more courses
🌀 Leverage CSS animations to enhance websites you develop. Examine animation theories, practical uses, and more as you explore the use of movement in UI.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤5
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18👍3🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤21👍5
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍38❤12🔥2