15 Cool CSS tricks with examples
Below are useful CSS examples which you might find useful for your blogs or websites. You can view live on jsfiddle and make and test changes.
1. To Add Hover Effect to an Element (Useful for Buttons and Images)
If we want to display custom style for some HTML element when mouse pointer hovers that, we can define the style by adding :hover to a style definition. In the example below, the <div class=”first”> element, when hovered by mouse pointer, changes its style per .first:hover definition:
<html>
<head>
<style>
div {
justify-content: center;
width: 100px;
height: 50px;
float: left;
}
.first {
background: blue;
}
.first:hover {
border: 5px solid black;
}
.second {
margin-left: 10px;
background: red;
}
</style>
</head>
<body>
<div class="first">A</div>
<div class="second">B</div>
</body>
</html>
2. To Attract User’s Attention
To attract user’s attention to an HTML control, an animation may be used. In the example below, a circular border appears, enlarges and disappears repetitively in order to attract attention:
jsfiddle – attract user attention
<html>
<head>
<style>
@keyframes radial-pulse {
0% {
box-shadow: 0 0 0 0px rgba(0.6, 0, 0, 0.5);
}
100% {
box-shadow: 0 0 0 30px rgba(0.6, 0, 0, 0);
}
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
color: black;
font-weight: bold;
font-family: Arial;
background: rgba(100, 0, 255, 0.75);
border-radius: 50%;
animation: radial-pulse 2s infinite;
}
</style>
</head>
<body>
<div>Focus</div>
</body>
</html>
3. Use SVG for Background Images
SVG stands for Scalable Vector Graphics. It is an XML-based vector representation of graphics. SVG are inherently scalable. The use of SVG renders clear and sharp background images, irrespective of size and scale:
.bground {
background: url(kiwi.svg);
}
4. To Shape the Text in Correlation with the Shape of a Nearby
Use shape-outside style property to define a shape for the text to take up near a portion of an image, for example, so as to give an effect of non-linear text wrap beside the image:
.circular {
width: 400px;
float: left;
shape-outside: circle(70%);
}
5. To Transition the Color of a Link Gradually upon Hover and Release
Use transition style properties to implement slow color transitions for elements when they are hovered and when they are released out of hover. The example below defines transition style properties for anchor links for various classes of web browsers:
jsfiddle – hover effect on link
<html>
<head>
<style>
a {
color: #cfcfcf;
-webkit-transition: color 0.5s ease-in;
/*Safari and Chrome */
-o-transition: color 0.5s ease-in;
/* Opera */
-moz-transition: color 0.5s ease-in;
/* Firefox */
}
a:hover {
color: #00b;
font-weight:bold;
}
</style>
</head>
<body> <a href="#q1">Link</a></body>
</html>
5. To Match Empty or Non-Empty <div> for Selective Styling
Elements can also be styled based upon whether their specific attributes are set. The example below is such an application. Here we style <div> tags differently based upon whether a value is present for their data-attr attribute:
jsfiddle – selective <div> styling
<html>
<head>
<style>
div {
border: 1px solid gray;
height: 100px;
margin: 10px;
width: 100px;
}
/* Selector for empty attribute */
div[data-attr=''] {
background: grey;
}
/* Selector for non-empty attribute */
div:not ([data-attr='']) {
background: blue;
}
</style>
<body>
<div data-attr=""></div>
<div data-attr="value"></div>
<div data-attr="value"></div>
</body>
</html>
6. To Add “.” to the End of the Last List Item and “,” to Others
We can decorate a list by appending a comma to each but last of the items and a period to the last item. See the example below:
jsfiddle – customize list elements <ul>, <li>
<html>
<head>
<style>
ul>li:not(:last-child)::after {
content: ",";
}
ul>li:last-child::after {
content: ".";
}
</style>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</body>
</html>
7. 3D Button with CSS
Using border style properties in a creative manner, we may decorate elements to look like 3-dimensional buttons. The example below shows the style definition for such a 3D button. However, this button has not been animated for hover and other events, but that is quite possible to implement if required:
<html>
<head>
<style>
div#button {
background: #888;
width: 200px;
border: 5px solid;
border-color: #999 #777 #777 #999
}
</style>
</head>
<body>
<div id="button">Button</div>
</body>
</html>
8. The Order of Classes in CSS Versus the Order in HTML Element
The order of class definitions in CSS decides the class to be effectively applied to an HTML element, not the order of the classes used in the element. See the example below. Herein blue color from .classn style definition is effective:
jsfiddle – order of css classes
<html>
<head>
<style>
.class2 {
color: orange
}
.class1 {
color: green
}
.classn {
color: blue
}
</style>
</head>
<body>
<div class="classn class2 class1">div body is classn blue</div>
</body>
</html>
9. To Caption the First Letter of Paragraph Text
Use ::first-letter or :first-letter to elongate the first letter of paragraph. CSS2 supports only :first-letter whereas CSS3 supports both. For example:
jsfiddle – caption first letter of paragraph
<html>
<head>
<style>
p:first-letter {
font-size: 200%;
color: #8A2BE2;
}
</style>
</head>
<body>
<p>First letter is captioned.</p>
</body>
</html>
10. To Capitalize the First Letter of Each Word in Text
Use text-transform: capitalize. Other style values are uppercase and lowercase. See the example for capitalize:
jsfiddle – capitalize first letter of each word
<html>
<head>
<style>
p {
text-transform: capitalize
}
</style>
</head>
<body>
<p>First letter is capital.</p>
</body>
</html>
11. Set Custom Style to the Element in Focus
Nowadays it is a common practice to highlight the currently selected input field of a form using style definitions. This way user need not move mouse pointer to and fro to explicitly retry to focus the desired field even when that was previously selected. Nor does the user need to “tab around” through the fields using Tab or Shift+Tab. See the example below:
input:focus { border: 2px solid green; }
Example:
<html>
<head>
<style>
input:focus {
border: 2px solid green;
}
</style>
</head>
<body>
<form> <input type="text" id="b" name="b" value="50"> <input type="text" id="a" name="a" value="1000"> </form>
</body>
</html>
12. To Avoid Borders around Active Links
When we have clicked on an anchor link to visit a target page or section, the activated link gets a dotted border around itself. If we want to keep the link clean and clear without such a border, we can define an outline style. For example:
<html>
<head>
<style>
a:active,
a:focus {
outline: dotted;
}
</style>
</head>
<body> <a href="">Test Link</a></body>
</html>
13. To “Frame” a Photo
This trick is going to bring smiles to many faces. To frame a photo, maybe of yours or of your family and pets, as a photo frame maker down the lane would, use border and padding style definitions. Remember this trick helps you frame your photos on web pages, not on wood and cardboard:
<html>
<head>
<style>
img {
border: 10px solid #444;
padding: 3px;
}
</style>
</head>
<body> <img src="https://www.bitarray.io/wp-content/uploads/2019/02/bitarray.i0.png" alt="bitarray logo"></body>
</html>