8 Essential CSS Tips and Tricks Every Developer Should Know
CSS is used to add styling to a web page after setting up the HTML skeleton. Moreover, you can create elegant 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 are sure to take 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 :float selector.
Example: Added a hover effect to a button element.
HTML code:
CSS code:
button:hover {
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}
You can play with this code and add effects like Crossfade, grew up in, distort, etc Make it your own!
CSS fade effect on hover
button{
opacity:0.5;
}
button:hover{
opacity:1;
}
CSS grow 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 container div
You can resize an image to fit a container div using the size, width, and fit to object Properties.
HTML code:
CSS code:
.random-image {
height: 100%;
width: 100%;
object-fit: contain;
}
3. Replace all styles
You can override all other style declarations of an attribute (including inline styles) using the property !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 the rule takes precedence over all others Background color declarations and ensures that the background color will be set to blue rather than green.
4. Truncate text with ellipses
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:
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
5. Use Text Transformation
You can force text to be uppercase, lowercase, or uppercase using the text transformation CSS property.
Uppercase
HTML code:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS code:
.uppercase {
text-transform: uppercase;
}
Tiny
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 the single-line property declaration
You can use CSS shorthand properties to make your code concise and easily readable.
For example, CSS context is a shorthand property that allows you to set the values of Background color, background picture, Background repeat, and background position. Similarly, you can set properties for Character font, frontier, 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;
Shorthand properties are very convenient to use, but there are some tricky things you need to consider (as discussed on MDN Web Docs) when using them.
Tooltips are a way to provide more information about an item when the user moves the mouse pointer over the item.
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;
}
.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 shadow box CSS properties respectively.
CSS text shadow
the text shadow The CSS property adds shadows and layers to text. the text shadow The property accepts a comma-separated list of shadows to apply to the text.
CSS text-shadow property syntax:
/* 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;
To note: The color and blur-radius arguments are optional.
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 shadow box The property is used to apply a shadow to HTML elements.
CSS box-shadow property syntax
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
To note: Blur, smudge and color settings are optional.
For example:
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
If you want to check out the full 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 grab users’ attention. It can give the website a certain elegance and unique feel. Be creative and experiment with some text shadow examples that may match the theme of your website.
Read more
About the Author