5 Practical CSS tips you can apply today β¨
Use :πππππ-ππππππ to drop the first letter of the text.
π:πππππ-ππππππ {
ππππ-πππ£π: πΈ00%;
πππππ: #πΎπ°πΈπ±π΄πΈ;
}
π:πππππ-ππππππ {
ππππ-πππ£π: πΈ00%;
πππππ: #πΎπ°πΈπ±π΄πΈ;
}
The :πππππ-ππππππ selector is used to specify the style of the first letter of an element; it only applies to block-level elements.
Image text wrapping
βShape-outsideβ is a CSS property that allows setting shapes. It also helps define areas where text flows
βShape-outsideβ is a CSS property that allows setting shapes. It also helps define areas where text flows
Simplify code with :π ππππ()
When applying the same style to multiple elements, the CSS might look like this:
.ππππ πππ,
.πππππ .πππππ,
.ππππ #πππππππ {
πππππ: πππ;
}
When applying the same style to multiple elements, the CSS might look like this:
.ππππ πππ,
.πππππ .πππππ,
.ππππ #πππππππ {
πππππ: πππ;
}
This code doesnβt look very readable, and the :π ππππ() pseudo-class comes in handy. The :π ππππ() pseudo-class function accepts a selector list as its argument and will select all elements that can be selected by any rule in the selector list.
The above code can be written like this using :π ππππ()
.ππππ :π ππππ(πππ, .πππππ, #πππππππ) {
πππππ: πππ;
}
.ππππ :π ππππ(πππ, .πππππ, #πππππππ) {
πππππ: πππ;
}
Shadow for transparent images
The solution to adding shadow effects for transparent images is to use ππππ-ππππππ .
The solution to adding shadow effects for transparent images is to use ππππ-ππππππ .
The way it works is that the ππππ-ππππππ property follows the alpha channels of the given image. As such, the shadow is based on the shape inside the image rather than being displayed outside of it.
Typing effect for text
Web designs are getting more creative by the minute. And with the help of CSS animation features, you can make your web pages feel alive. You can use such animations and `@πππ’ππππππ` properties to achieve a typewriter effect.
Web designs are getting more creative by the minute. And with the help of CSS animation features, you can make your web pages feel alive. You can use such animations and `@πππ’ππππππ` properties to achieve a typewriter effect.
That's a wrap!
If you enjoyed this thread:
1. Follow me @codedamncom for more of these
2. RT the tweet below to share this thread with your audience
If you enjoyed this thread:
1. Follow me @codedamncom for more of these
2. RT the tweet below to share this thread with your audience
Loading suggestions...