8 Essential CSS Tips and Tricks EVERY Developer Should Know
If you want to add styling and beauty to a web page, try the CSS methods discussed below. You will also learn a few lines of code to create slick designs in CSS. Developers using these CSS tricks enhance efficiency, speed, and productivity.
- Resize Images
This trick comes in handy when you want to resize an image using the object-fit, width, and height properties.
The HTML code for this function is:
<img class=”random-image” src=”https://picsum.photos/200/300″ />
While the CSS code is:
.random-image {
height: 100%;
width: 100%;
object-fit: contain;
}
- Use Ellipsis to Truncate Text
The “text-overflow” property helps you replace any overflowing text with an ellipsis.
The HTML code for the trick is:
<p class=”text”>
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
</p>
The CSS Code is:
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
- Hover Effects
If you want to add a hover effect to your HTML element, use the “:hover selector.” The HTML Code for the effect is;
<button>Hover Over Me</button>
The CSS Code is;
button:hover {
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}
Feel free to tweak these codes to add effects like skew, grow-in, fade-in, etc.
Use the codes below to apply the Grow-in effect on Hover;
button:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
Similarly, the code below will help you apply the Fade-in effect on hover;
button{
opacity:0.5;
}
button:hover{
opacity:1;
}
- Override All the Styles
You can override all the styles in your data if you put the “!important” command at the end of the values.
The HTML Code for the function is:
<p class=”className” id=”idName” style=”background-color: orange;”>
Hello World!
</p>
The CSS Code is:
p {
background-color: yellow;
}
.className {
background-color: blue !important;
}
#idName {
background-color: green;
}
By applying the “!important” rule, you override previous settings, including the background color.
- Text-Transform
Text-transform is a CSS property through which you can force text to be capitalized, lowercased, or uppercased.
Use the codes below to change your text into Uppercase.
HTML Code:
<p class=”uppercase”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
CSS Code:
.uppercase {
text-transform: uppercase;
}
Use the codes below to change your text into Lowercase.
HTML Code:
<p class=”lowercase”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
CSS Code:
.lowercase {
text-transform: lowercase;
}
Use the codes below to capitalize your text.
HTML Code:
<p class=”capitalize”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
CSS Code
.capitalize {
text-transform: capitalize;
}
- Shadow Effects
Adding the shadow effect to your text makes it more appealing. This trick also helps you distinguish between values in your input. Simply use the box-shadow and text-shadow CSS properties.
If you want to add layers and shadows to the text, use the CSS text-shadow property that applies to a list separated by commas.
Here’s the code for the function;
/* You can use 4 arguments with the text-shadow CSS property:
offset-x, offset-y, blur-radius, and color */
/* offset-x | offset-y | blur-radius | color */
text-shadow: 2px 2px 4px red;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #18fa3e 1px 2px 10px;
Note that you can edit or remove the blur-radius and color arguments.
If you want to apply the function to HTML elements, use the box-shadow property code below.
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
similarly, you can exclude the color, spread, and blur parameters.
- Additional Tips
These are also called the Tooltips and provide additional details whenever you hover the cursor over a value. Normally, there are tooltips on the right, left, top, and bottom.
Below are HTML and SCC codes for each option.
Top Tooltip
CSS Code
body {
text-align: center;
}
.tooltip_div {
margin-top: 100px;
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
HTML Code:
<div class=”tooltip_div”>Top Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
Bottom Tooltip
CSS Code:
body {
text-align: center;
}
.tooltip_div {
margin-top: 100px;
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
HTML Code:
<div class=”tooltip_div”>Bottom Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
Right Tooltip
CSS Code:
body {
text-align: center;
}
.tooltip_div {
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
HTML Code:
<div class=”tooltip_div”>Right Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
Left Tooltip
CSS Code:
body {
text-align: center;
}
.tooltip_div {
position: relative;
display: inline-block;
}
.tooltip_div .tooltip {
visibility: hidden;
width: 170px;
background-color: blue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Positioning the tooltip */
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip_div:hover .tooltip {
visibility: visible;
}
HTML Code:
<div class=”tooltip_div”>Left Tooltip
<span class=”tooltip”>This is the Tooltip text</span>
</div>
- Single-Line Property Declaration
The CSS has shorthand properties to make your code readable and concise.
For instance, you can use the CSS “background” property to clearly define background-position values, background-repeat, background image, and background color. Besides, you can change padding, margin, border, and font properties.
You can simplify a single-line background property declaration such as the one below;
background-color: black;
background-image: url(images/xyz.png);
background-repeat: no-repeat;
background-position: left top;
to a single line as in below;
background: black url (images/xyz.png) no-repeat left top;
Use These Modern CSS Tricks to Style Your Website
Incorporating these tricks into a website will significantly draw the users’ attention. They give the website a unique feel and a certain elegance. Experiment with some if not all of these examples to align data with your website’s theme.
