Css style

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.

USE VIDEO OF THE DAY

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;
}

Related: The CSS box model explained with examples

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 a few things you need to consider delicate cases (as shown 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 Boot 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.

Related: How to use CSS text-shadow: tips 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 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.

Related: How to use CSS box-shadow: tips and examples

For example:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

If you want to check out the complete source code used in this article, here is 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.


Examples of CSS text shadows
11 Examples of CSS Text Shadows to Try on Your Website

You can do a lot with text shadow effects in CSS, but it can be hard to know exactly what is possible. Get help with these visual examples.

Read more


About the Author