Published Jan 17, 2022
Are you using these key CSS methods for a rapid workflow and a beautiful web design?
Readers like you help support MUO. When you make a purchase using links on our site, we may earn an affiliate commission. Read More.
CSS is used to add styling to a webpage after you’ve set up the HTML skeleton. Moreover, you can create slick designs in CSS with just a few lines of code.
Every developer should know these CSS tricks to develop their projects quickly and efficiently. They’re sure to increase your productivity to the next level—let’s get started.
1. Hover Effects
You can add a hover effect to an HTML element using the :hover selector.
Example: Adding hover effect to a button element.
HTML Code:
Hover Over Me
CSS Code:
button:hover {
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}
You can play around with this code and add effects like fade-in, grow-in, skew, and so on. Make it your own!
CSS Fade-in Effect on Hover
button{
opacity:0.5;}
button:hover{
opacity:1;
}
CSS Grow-in Effect on Hover
button:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
2. Resize Images to Fit a div Container
You can resize an image to fit a div container using the height, width, and object-fit properties.
HTML Code:
CSS Code:
.random-image { height: 100%; width: 100%; object-fit: contain;
}
3. Overriding all the Styles
You can override all other style declarations of an attribute (including inline styles) using the !important directive at the end of a value.
HTML Code:
Hello World!
CSS Code:
p { background-color: yellow; }
.className {
background-color: blue !important; }
#idName {
background-color: green;
}
In this example, the !important rule overrides all other background-color declarations and ensures the background color will be set to blue rather than green.
4. Truncate Text With Ellipsis
You can truncate overflowing text with an ellipsis (…) using the text-overflow CSS property.
HTML Code:
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
CSS Code:
(Video) 24+ ESSENTIAL CSS Properties Every Web Developer Should Know
.text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px;
}
Related: The CSS Box Model Explained With Examples
5. Using text-transform
You can force text to be uppercased, lowercased, or capitalized using the text-transform CSS property.
Uppercase
HTML Code:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS Code:
.uppercase { text-transform: uppercase;
}
Lowercase
HTML Code:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS Code:
.lowercase { text-transform: lowercase;
}
Capitalize
HTML Code:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS Code:
.capitalize { text-transform: capitalize;
}
6. Using Single-Line Property Declaration
You can use the shorthand properties in CSS to make your code concise and easily readable.
For example, CSS background is a shorthand property that allows you to define the values of background-color, background-image, background-repeat, and background-position. Similarly, you can define properties for font, border, margin, and padding.
Single-Line Background Property Declaration
background-color: black;background-image: url(images/xyz.png);background-repeat: no-repeat;
background-position: left top;
You can simplify the above declaration to a single line:
background: black url(images/xyz.png) no-repeat left top;
The shorthand properties are very convenient to use, but you need to consider some tricky edge cases (as outlined on MDN Web Docs) while using them.
Tooltips are a way to provide more information about an element when the user moves the mouse pointer over the element.
(Video) 7 CSS Techniques That I Use the MOST!
Right Tooltip
HTML Code:
Right Tooltip
This is the Tooltip text
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;
}
Left Tooltip
HTML Code:
Left Tooltip
This is the Tooltip text
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;
}
Top Tooltip
HTML Code:
Top Tooltip
This is the Tooltip text
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;
}
Bottom Tooltip
HTML Code:
Bottom Tooltip
This is the Tooltip text
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;
}
(Video) 3 useful CSS tricks
.tooltip_div:hover .tooltip { visibility: visible;
}
You can also use the Bootstrap library to create custom Bootstrap tooltips.
8. Add Shadow Effects
You can add CSS shadow effects to texts and elements using the text-shadow and the box-shadow CSS properties respectively.
CSS Text Shadow
The text-shadow CSS property adds shadows and layers to the text. The text-shadow property accepts a comma-separated list of shadows to be applied to the text.
Syntax of the text-shadow CSS Property:
/* 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: The color and blur-radius arguments are optional.
Related: How to Use CSS text-shadow: Tricks and Examples
For example:
background:
#e74c3c;
color:
#fff;
font-family: lato;
text-shadow: 1px 1px rgba(123, 25, 15, 0.5), 2px 2px rgba(129, 28, 18, 0.51), 3px 3px rgba(135, 31, 20, 0.52), 4px 4px rgba(140, 33, 22, 0.53), 5px 5px rgba(145, 36, 24, 0.54), 6px 6px rgba(150, 38, 26, 0.55), 7px 7px rgba(154, 40, 28, 0.56), 8px 8px rgba(158, 42, 30, 0.57), 9px 9px rgba(162, 44, 31, 0.58), 10px 10px rgba(166, 45, 33, 0.59), 11px 11px rgba(169, 47, 34, 0.6), 12px 12px rgba(173, 48, 36, 0.61), 13px 13px rgba(176, 50, 37, 0.62), 14px 14px rgba(178, 51, 38, 0.63), 15px 15px rgba(181, 52, 39, 0.64), 16px 16px rgba(184, 54, 40, 0.65), 17px 17px rgba(186, 55, 41, 0.66), 18px 18px rgba(189, 56, 42, 0.67), 19px 19px rgba(191, 57, 43, 0.68), 20px 20px rgba(193, 58, 44, 0.69), 21px 21px rgba(195, 59, 45, 0.7), 22px 22px rgba(197, 60, 46, 0.71), 23px 23px rgba(199, 61, 47, 0.72), 24px 24px rgba(201, 62, 47, 0.73), 25px 25px rgba(202, 62, 48, 0.74), 26px 26px rgba(204, 63, 49, 0.75), 27px 27px rgba(206, 64, 49, 0.76), 28px 28px rgba(207, 65, 50, 0.77), 29px 29px rgba(209, 65, 51, 0.78), 30px 30px rgba(210, 66, 51, 0.79), 31px 31px rgba(211, 67, 52, 0.8), 32px 32px rgba(213, 67, 52, 0.81), 33px 33px rgba(214, 68, 53, 0.82), 34px 34px rgba(215, 69, 53, 0.83), 35px 35px rgba(216, 69, 54, 0.84), 36px 36px rgba(218, 70, 54, 0.85), 37px 37px rgba(219, 70, 55, 0.86), 38px 38px rgba(220, 71, 55, 0.87), 39px 39px rgba(221, 71, 56, 0.88), 40px 40px rgba(222, 72, 56, 0.89), 41px 41px rgba(223, 72, 57, 0.9), 42px 42px rgba(224, 73, 57, 0.91), 43px 43px rgba(225, 73, 57, 0.92), 44px 44px rgba(225, 73, 58, 0.93), 45px 45px rgba(226, 74, 58, 0.94), 46px 46px rgba(227, 74, 58, 0.95), 47px 47px rgba(228, 75, 59, 0.96), 48px 48px rgba(229, 75, 59, 0.97), 49px 49px rgba(230, 75, 59, 0.98), 50px 50px rgba(230, 76, 60, 0.99);
CSS Box Shadow
The box-shadow property is used to apply a shadow to HTML elements.
Syntax of the box-shadow CSS property
box-shadow
:
[horizontal offset]
[vertical offset]
[blur radius]
[optional spread radius]
[color]
;
Note: The blur, spread, and color parameters are optional.
Related: How to Use CSS box-shadow: Tricks and Examples
For example:
(Video) 5 CSS tricks every Web Developer should know in 2023
box-shadow
:
rgba
(0, 0, 0, 0
.35
) 0
px
5
px
15
px
;
If you want to have a look at the complete source code used in this article, here’s the GitHub repository.
Style Your Website Using Modern CSS Tricks
Adding CSS text shadows to a website is a great way to draw the attention of the users. It can give the website a certain elegance and a unique feel. Get creative and experiment with some text-shadow examples that may align with the theme of your website.
Videos
1. Top 10 Advanced CSS Responsive Design Concepts You Should Know 2. 5 Best CSS Tips and Tricks Every CSS Developer Should Know 🔥 | CSS Tutorial for Beginners 3. Top 10 CSS One Liners That Will Blow Your Mind 4. Learn CSS Position In 9 Minutes 5. 100+ Web Development Things you Should Know 6. 8 HACKS That Make You PRO DEVELOPER [WATCH NOW] | HTML CSS Tricks 2022
Author: Manual Maggio
Last Updated: 01/15/2023
Views: 6394
Rating: 4.9 / 5 (69 voted)
Reviews: 92% of readers found this page helpful
Name: Manual Maggio
Birthday: 1998-01-20
Address: 359 Kelvin Stream, Lake Eldonview, MT 33517-1242
Phone: +577037762465
Job: Product Hospitality Supervisor
Hobby: Gardening, Web surfing, Video gaming, Amateur radio, Flag Football, Reading, Table tennis
Introduction: My name is Manual Maggio, I am a thankful, tender, adventurous, delightful, fantastic, proud, graceful person who loves writing and wants to share my knowledge and understanding with you.
© 2023 Loxyle. All Rights Reserved.