1. First letter drop
We can use :first-letter it to drop the first letter of the text.
p:first-letter {
font-size: 200%;
color: #8A2BE2;
}The:first-letter selector is used to specify the style of the first letter of an element, it only applies to block-level elements. The effect is as follows.
See the Pen Untitled by TeachDeveloper (@TeachDeveloper) on CodePen.
2. Image text wrapping
Shape-outside is a CSS property that allows setting shapes. It also helps define areas where text flows
See the Pen Image text wrapping by TeachDeveloper (@TeachDeveloper) on CodePen.
3. Simplify code with :where()
When applying the same style to multiple elements, the CSS might look like this:
.page div,
.paget .title,
.page #article {
color: red;
}This code doesn’t look very readable, and the :where() pseudo-class comes in handy. The :where() 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 :where():
.page :where(div, .title, #article) {
color: red;
}Does the code look much cleaner?
4. Shadow for transparent images
Have you ever tried adding a box-shadow to a transparent image only for it to look like you have added a border? I think we’ve all been there. The solution to adding shadow effects for transparent images is to use drop-shadow.
The way it works is that the drop-shadow 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.
5. 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. In this example, we are using the animation and `@keyframes` properties to achieve a typewriter effect.
Specifically, for this demo, we implement the steps()property to segment our text animation. First, you have to specify the number steps()which in our case is the character length for the text we wish to animate.
And, second, we use `@keyframes` to declare when the animation is going to start. For example, if you wrote another word after “Typing effect for text” the animation wouldn’t work unless you change the number steps() in the CSS snippet.
That said, this effect isn’t particularly new. However, most developers flock to JavaScript libraries despite the fact that the same result can be achieved using CSS.
See the Pen Typing Effect by TeachDeveloper (@TeachDeveloper) on CodePen.
6. Set a custom cursor
It’s unlikely that you’ll ever need to force your visitors into a unique cursor. At least, not for general UX purposes. Though, one thing to note about the cursor property is that it lets you display images. This is the equivalent of displaying a tooltip but in a photo format.
Some use cases include being able to compare two different photos without needing to render those photos in the viewport. E.g. The cursor property can be used to save real estate in your designs. Since you can lock the custom cursor to a specific div element, it won’t interfere with elements outside of it.
See the Pen Custom Cursor by TeachDeveloper (@TeachDeveloper) on CodePen.
7. Checklist in pure CSS
As I mentioned at the beginning of the article, CSS is maturing at a steady pace. And this demo of a dynamic checklist is a prime example of that.
The way it works is that we use the checkbox input type together with the :checked pseudo-class. And use the transform property to change the state whenever the :checked specification returns true.
You can achieve various things with this approach. E.g. Toggle hidden content when a user clicks on a specific checkbox. It works with input types such as radio and checkbox, but can also be applied to <option> and <select> elements.
See the Pen Checklist in pure CSS by TeachDeveloper (@TeachDeveloper) on CodePen.
Got any questions? Any addition? Feel free to leave a comment.