Css or Cascading Style Sheets is used to describe or present a document written in markup Language like HTML with a style sheet language.
For Example:
<!doctype html>
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
}
h1 {
color: red;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
text-align:center;
color:white;
}
</style>
</head>
<body>
<h1>CSS</h1>
<p>This is a centered text.</p>
</body>
</html>
With the help of CSS Tricks we can turn a simple Web Page into a smart well designed web page that can make your property more expressive and passionate. CSS can save your time and work, with the help of external CSS file that can be a master file to describe multiple web page at once.
CSS can be used to define styles for different sizes (responsive web design) and screen resolutions even with a master file that can save time and extra work.
CSS can be styled in three ways:
Today i am going to share some mind blowing CSS tricks and techniques with example that you can use in your own web page easily. Please go through all example Available on the page
Progressive loader
CSS Progressive loader can be used in various places while loading something.
Code Here:
<body>
<div class="content">
<div class="progress-loader"></div>
</div>
</body>body {
margin: 0;
padding: 2px;
animation: pulse 5s infinite;
}
.content {
position: relative;
width: 90%;
margin: 280px auto;
padding: 20px 40px;
border-radius: 0px;
box-sizing: border-box;
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
}
.progress-loader {
position: relative;
display: inline-block;
width: 100%;
height: 10px;
background: #020202;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.progress-loader:after {
content: '';
position: absolute;
left: 0;
width: 0;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: progress 5s infinite;
}
@keyframes progress {
0% {
width: 0;
background: #a28089;
}
25% {
width: 40%;
background: #ffd500;
}
50% {
width: 60%;
background: #f72a4c;
}
75% {
width: 75%;
background: #d0bdf4;
}
100% {
width: 100%;
background: #494d5f;
}
}
@keyframes pulse {
0% {
background: #a28089;
}
25% {
background: #ffd500;
}
50% {
background: #f72a4c;
}
75% {
background: #d0bdf4;
}
100% {
background: #494d5f;
}
}Shimmer Effect
Shimmer effect is a special kind of loader and on trending nowadays , This CSS loader can be used on any kind of layout where you want to let user know that the data you are looking for is getting loaded. Shimmer effect is one of powerful CSS trick that can make your layout more expressive and passionate Let me give you an example:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card br">
<div class="content-box">
<div class="row mt-2">
<div class="col-md-3">
<div class="profile content-animate"></div>
</div>
<div class="col-md-9 pl-5">
<div class="content-animate br content w80"></div>
<div class="content-animate br content"></div>
<div class="content-animate br content"></div>
<div class="content-animate br content"></div>
<div class="content-animate br content"></div>
</div>
</div><hr>
<div class="row mt-2">
<div class="col-md-3">
<div class="profile content-animate"></div>
</div>
<div class="col-md-9 pl-5">
<div class="content-animate br content w80"></div>
<div class="content-animate br content"></div>
<div class="content-animate br content"></div>
<div class="content-animate br content"></div>
<div class="content-animate br content"></div>
</div>
</div><hr>
<div class="row mt-2">
<div class="col-md-3">
<div class="profile content-animate"></div>
</div>
<div class="col-md-9 pl-5">
<div class="content-animate br content w80"></div>
<div class="content-animate br content"></div>
<div class="content-animate br content"></div>
<div class="content-animate br content"></div>
<div class="content-animate br content"></div>
</div>
</div><hr>
</div>
<div>
</div>
</div>
</div>.br {
border-radius: 0px;
}
.w80 {
width: 45%;
}
.card {
border: 2px solid #fff;
box-shadow:0px 0px 10px 0 #a9a9a9;
padding: 30px 40px;
width: 80%;
margin: 50px auto;
}
.content-box {
width: 0px;
animation: fullView 0.5s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.profile {
height: 200px;
width: 200px;
border-radius: 9%;
}
.content {
height: 10px;
background: #777;
margin-top: 30px;
}
@keyframes fullView {
100% {
width: 100%;
}
}
.content-animate {
animation : shimmer-effect 2s infinite linear;
background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #d2d6d9 36%);
background-size: 1000px 100%;
}
@keyframes shimmer-effect {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.main-box {
background-image: linear-gradient(to right, #ebebeb calc(50% - 100px), #c5c5c5 50%, #ebebeb calc(50% + 100px));
background-size:0;
height: 200px;
position:relative;
overflow:hidden;
}
.main-box::before {
content:"";
position:absolute;
top:0;
right:0;
width:calc(200% + 200px);
bottom:0;
background-image:inherit;
animation:moveBox 2s linear infinite;
}
@keyframes moveBox{
to {
transform:translateX(calc(50% + 100px));
}
}Sliding Tabs
Sliding tabs in CSS you can use to show different sections in one screen or in other words you can use web page as fragments using sliding tabs in CSS. With the help of this CSS Trick can make your sliding layout more presentable.
Let me show you an example:
HTML
<body>
<div class="sliding-container">
<div class="radio-tabs">
<input type="radio" id="tab-radio-1" name="radio-tabs" checked>
<label class="slid-tab" for="tab-radio-1">Step <span class="sliding-notification">1</span></label>
<input type="radio" id="tab-radio-2" name="radio-tabs">
<label class="slid-tab" for="tab-radio-2">Step<span class="sliding-notification">2</span></label>
<input type="radio" id="tab-radio-3" name="radio-tabs">
<label class="slid-tab" for="tab-radio-3">Step<span class="sliding-notification">3</span></label>
<span class="sliding-glider"></span>
</div>
</div>
</body>
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
font-family: "inter", sans-serif;
background-color: #0057ff8a;
}
.sliding-container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.radio-tabs {
display: flex;
position: relative;
background-color: #fff;
box-shadow: 0 0 1px 0 rgb(233 234 236 / 15%),
0 6px 12px 0 rgb(241 244 248 / 15%);
padding: 0.75rem;
border-radius: 99px;
}
.radio-tabs * {
z-index: 2;
}
input[type="radio"] {
display: none;
}
.slid-tab {
display: flex;
align-items: center;
justify-content: center;
height: 54px;
width: 200px;
font-size: 1.25rem;
font-weight: 500;
border-radius: 99px;
cursor: pointer;
transition: color 0.15s ease-in;
}
.sliding-notification {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
margin-left: 0.75rem;
border-radius: 50%;
background-color: #0057ff8a;
transform: 0.15s ease-in;
}
input[type="radio"]:checked + label {
color: #111;
}
input[type="radio"]:checked + label > .sliding-notification {
background-color: #111;
color: #fff;
}
input[id="tab-radio-1"]:checked ~ .sliding-glider {
transform: translateX(0);
}
input[id="tab-radio-2"]:checked ~ .sliding-glider {
transform: translateX(100%);
}
input[id="tab-radio-3"]:checked ~ .sliding-glider {
transform: translateX(200%);
}
.sliding-glider {
position: absolute;
display: flex;
height: 54px;
width: 200px;
background-color: #0057ff8a;
z-index: 1 !important;
border-radius: 99px;
transition: 0.25s ease-out;
}
@media (max-width: 700px) {
.radio-tabs {
transform: scale(0.6);
}
}
Color Mode
With the help of CSS we can provide multi color mode for better user experiences. Dark mode is very popular CSS Trick that can make a website more user friendly. with the help of this easy CSS trick you can make your Web page with multi color mode so that can help user to find the site more friendly
Here is an example:
HTML
<body>
<input type="checkbox" id="switch">
<label for="switch" class="switch"></label>
<section class="dark-color-mode"></section>
</body>.switch::before {
display: block;
color: white;
content: "TUrn on the light";
margin-top: 1rem;
font-size: 2rem;
font-weight: 100;
}
.dark-color-mode {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
transition: all .3s ease-in-out;
opacity: 0;
background: white;
mix-blend-mode: difference;
}
input[type="checkbox"]:checked~.dark-color-mode {
opacity: 1;
}
input[type="checkbox"]:checked::after {
right: 0;
left: auto;
background: #ffffff;
color: black;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
content: 'On';
}
input[type="checkbox"] {
z-index: 1;
-webkit-appearance: none;
width: 5rem;
height: 1.6rem;
border: 1px solid rgba(160, 160, 160, 1);
border-radius: 1rem;
position: relative;
}
input[type="checkbox"]::after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 50%;
height: 100%;
background: #514878;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
content: 'Off';
display: flex;
align-items: center;
justify-content: center;
color: white;
}Summary
In this section, we had created some mind blowing CSS tips and tricks with example. we learnt how we can create some of most popular CSS effect using CSS transition effect that provide a way to control animation speed while changing CSS properties.
We can use CSS transition property to control over the CSS animations so that we can configure transition property at its best according to the our requirement.
.jpg)
0 Comments