Updated June 27, 2023
Introduction to CSS tricks
The CSS (Cascading Style Sheets) tricks design the front-end user page view beautiful. Instead of using existing default properties in CSS, this trick makes web pages awesome if we slightly change the properties. This tutorial will look into such CSS styles to make our page beautiful. This CSS style logic we write inside the <head> tag and within <style> tag. If we want to know the purpose of logic inside CSS code, we can write inside comment tag (<! —->). The lines we have written inside the comment tag will not be visible to the user. It is the developer’s understanding purpose only. Nowadays, each browser has its format to display CSS output. To avoid this, start the master style sheet; this will reset all the standard browser formats. For this, you must insert the following script at the top of the CSS sheet, which overrides the original theme with your format.
Syntax:
@import url("fileName.css");How do tricks work in CSS?
This CSS trick works based on the style we have given with property and its value. Just observe some of the CSS tricks below.
1. Replacing normal value with smart quotes
This is a really important factor in any website. We use quotation (“”) marks from our keyboard to define coordinates.
But if you insert them into your text to signal the quote, it will become an unusual look, disturbing the professional developer’s eye. That is why we used the “q” tag is highly recommended.
Syntax:
q {
quotes: "“" "”";//normal way
}Syntax:
q:lang(de) {
quotes: "„" "“";//professional way
}2. Scrolling effect
Nowadays make the scrolling awesome using parallax scrolling effect. To use this we have to use “url(http://fonts.googleapis.com/css?)” JavaScript library.
Syntax:
@import url(http://fonts.googleapis.com/css?);3. Multiple Backgrounds
We have seen so many websites with multiple backgrounds. The syntax used will be given below.
Syntax:
selector
{
width: 100%;
height: 400px;
background-image: url(image url), url(image url), linear-gradient(to right, rgba(values), rgba(values));
}4. Blinking the text
To take the attention of the user, we use blinking text. The syntax is given below.
Syntax:
@keyframes blink {
percentage {
background: color name;
}
}
@-webkit-keyframes blink {
{
percentage {
background: color name;
}
}Examples of CSS tricks
Here are the following examples mention below
Example #1 – Quotes Paragraph
code:
<!DOCTYPE html>
<html>
<head>
<style>
.q1{
quotes: "„" "“" "‚" "‘";/*This quotes applied to first paragrph*/
}
p
{
color: green;
border: solid 2px red;
font-size: 22px;
}
.q2 {
quotes: "«" "»" "‹" "›";/*This quotes applied to second paragrph*/
}
</style>
</head>
<body>
<p><q class="q1">The CSS (Cascading Style Sheets) tricks are used to design the front end user pages view beautiful. Instead of using already existed default properties in CSS if we slightly change the properties then this trick makes web pages awesome. In this tutorial we will look into such CSS styles make our page beautiful. This CSS style logic we write inside the head tag and within style tag.</q></p>
<p><q class="q2">If we want to know what is the <q>purpose</q> of logic inside CSS code we can write inside comment tag (<! ---->). The lines which we have written inside the comment tag will not visible to the user. It is developer understanding purpose only. Now a days each browser have their own format to display CSS output. To avoid this start master style sheet, this will reset all the browser standard formats. For this you must insert the following script at the top of the CSS sheet which override the original theme with your own format.</q></p>
</body>
</html>Output:
Example #2 – Parallax Scrolling effect
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.p {
/* Image used for parallax demo */
background-image: url("img_parallax.jpg");
/* Set the min height */
min-height: 450px;
/* This will create parallax effect in CSS */
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
h2
{
color: green;
text-align: center;
}
.div
{
height:700px;
background-color:blue;
font-size:36px;
}
</style>
</head>
<body>
<h2>Scroll down the page to see parallax effect</h2>
<div class="p"></div>
<div class="div">
The CSS (Cascading Style Sheets) tricks are used to design the front end user pages view beautiful. Instead of using already existed default properties in CSS if we slightly change the properties then this trick makes web pages awesome. In this tutorial we will look into such CSS styles make our page beautiful. This CSS style logic we write inside the head tag and within style tag.
</div>
</body>
</html>Output:
Before scroll:
After scroll:
Example #3 – Blinking Text
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Blinking Text</title>
<style>
h2{
color: green;
text-align: center;
}
.b1, .b2{
animation:blinking 1.6s infinite;
font-size: 25px;
}
@keyframes blinking{
0%{ color: red; }
46%{ color: #000; }
61%{ color: transparent; }
95%{ color:transparent; }
100%{ color: #000; }
}
</style>
</head>
<body>
<h2>Tricks for Blinking Text</h2>
<p class="b1">The CSS (Cascading Style Sheets) tricks are used to design the front end user pages view beautiful. Instead of using already existed default properties in CSS if we slightly change the properties then this trick makes web pages awesome.
</p>
<p class="b2">In this tutorial we will look into such CSS styles make our page beautiful. This CSS style logic we write inside the head tag and within style tag.</p>
</body>
</html>Output:
Conclusion
CSS tricks are used to beautify the web page. Quotes, Blinking text, and parallax scrolling text are some tricks to awesome web pages.
Recommended Articles
We hope that this EDUCBA information on “CSS tricks” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
