Hey there, folks. Welcome back to my blog! If you guys think CSS is only used to ‘prettify’ a website or adding some colors to a text or simply make cool bouncing animations, then you may have to rethink what CSS is really capable of.
This article is gonna tell you all about some awesome tricks of CSS that are gonna be really useful.
So without any further ado, let's get started!
1. Curving Text Around a Floating Image using Shape-outside
It is a CSS property that allows shapes to be set. It also helps to define an area for text to flow around. Here's how to do it:
.any-shape {
width: 300px;
float: left;
shape-outside: circle(50%);
}
2. The magic Combo
This little combo can actually prevent most of the bad-layout problems that you can encounter in HTML. We don't really want horizontal sliders or absolute-positioned items doing what they want, right? Neither do we want margins and padding randomly everywhere. So here's the magic combo for you guys ;)
* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}
Sometimes “display:block” would not be useful but in most cases, you will treat < a > and < span > as blocks like others. So, in most cases, it's actually gonna help you!
3. Splitting both HTML and CSS
This is more like a “workflow” type of trick. I would suggest that you create different CSS files while developing, and only, in the end, merge them. For example, one for desktop and one for mobile, etc. At the end, you have to merge them because it will help to minimize the number of HTTP requests your website does.
The same principle can be applied to HTML. If you’re not developing in SPA environments like Gatsby then PHP can be used to include pieces of HTML code. For example, you’d want to keep a “/modules” folder that will contain the navigation bar, the footer, etc in separate files. Therefore if any change is required, you don’t have to edit it on every single page. The more you can modularize, the better the results will be.
4. ::first-letter
It applies styles to the very first letter of your block-level element. Thanks to this, we can introduce effects that are familiar to us from print or paper magazines. Without this pseudo-element, we would have to create many spans to achieve this effect. For example:
Here's how to do it;
p.intro:first-letter {
font-size: 100px;
display: block;
float: left;
line-height: .5;
margin: 15px 15px 10px 0 ;
}
5. The Four Core Properties
CSS animation provides a relatively simple way to smoothly transition between large number of properties. Good solid animated interfaces are dependent on a smooth and fluid experience. In order to maintain a good performance in our animation timelines, we’ll have to limit our animated properties to the following core four:
Scale – transform:scale(2)
Rotation – transform:rotate(180deg)
Position – transform:translateX(50rem)
Opacity – opacity: 0.5
Animating properties such as border-radius, heights/widths or margins will affect browser layout methods whereas the animation of backgrounds, colours or box shadows will affect browser paint methods. All these will drop your FPS (FramesPerSecond) considerably. You can use these properties to yield some interesting effects but they should be used sparingly to maintain a good performance.
6. Using variables for keeping things consistent
A good method to maintain consistency is to use CSS variables or preprocessor variables to pre-define your animation timing.
:root{ timing-base: 1000;}
Setting a baseline animation or transition duration without defining a unit affords us the flexibility to call this duration within a calc() function. This duration could vary from our base CSS variable but it will always be a simple modification of this number and will always maintain a consistent experience.
7. Conic-gradient
Ever wondered if you could create a pie chart only using CSS? Well, the good news is that you actually can! This can be done using the conic-gradient function. This function creates an image consisting of a gradient with set color transitions rotated around a central point. You can do this by using the following lines of code:
.piechart {
background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%);
border-radius: 50%;
width: 300px;
height: 300px;
}
8. Change the Text Selection color
To change the Text Selection color, we use**::selection **. It is a pseudo-element that overrides at the browser level to replace the text highlight color with a color that you choose. The effect can be seen once you select the content with the cursor.
::selection {
background-color: #f3b70f;
}
9. Hover effects
Hover effects are commonly used for buttons, text links, bock sections of your site, icons, etc. If you want something to change colors when someone hovers their mouse over it just use the same CSS, but with the addition of **:hover **to it and change the styling. Here's how you can do it;
.m h2{
font-size:36px;
color:#000;
font-weight:800;
}
.m h2:hover{
color:#f00;
}
This changes the color of your h2 tag from black to red when someone hovers over it. It's quite useful as you don’t have to declare the font-size or weight again if you don't want to change it. It only changes whatever property you specify.
10. Drop Shadow
Adding this property results in a much better shadow effect to the transparent images. You can perform this with the given lines of code.
.img-wrapper img{
width: 100% ;
height: 100% ;
object-fit: cover ;
filter: drop-shadow(30px 10px 4px #757575}
11. Centering Divs with place-items
Centering div elements is one of the most fearsome tasks that we have to perform. But fear not my friends, you can center any div with a couple of lines of CSS. Just don’t forget to set display:grid; for the parent element and then use place-items property like done below.
main{
width: 100% ;
height: 80vh ;
display: grid ;
place-items: center center;
}
12. Centering Divs with Flexbox
We already centered items using place-items. But now we have our hands on a classic problem, centering divs with flexbox. To do this, let's look at the example below:
<div class="center h-48">
<div></div>
</div>
.center {
display: flex;
align-items: center;
justify-content: center;
}
.center div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #b8b7cd;
}
Firstly, we need to make sure the parent container holds the circle i.e. flex-container. Inside it, we have a simple div to make our circle. We need to use the following important properties that are related to flexbox:
display: flex; This makes sure that the parent container has a flexbox layout.
align-items: center; This makes sure that the flex children are aligned to the center of the cross-axis.
**justify-content: center; **This makes sure that the flex children are aligned to the center of the main-axis .
After that, we have the commonly used circle CSS code. As now the circle is both vertically and horizontally centered, try it out!
Conclusion
These CSS tricks may have made you curious and encourage you to learn more about CSS syntax. We use various resources just to perform simple tasks. It's not like that is bad, but if you are more familiar with CSS tricks, sometimes you can change your ways and perform tasks more efficiently. I hope this was useful to you guys and make sure to add your own twist to each of these CSS tricks ;)
Happy Coding🌸