CSS3 Text Effects..

Developer
Unmesh Shukla
Size
2,557 Kb
Views
32,384
  1. CSS3 Text Effects.. Previews
  2. CSS3 Text Effects.. HTML Codes
  3. CSS3 Text Effects.. CSS Codes

How do I make an css3 text effects..?

Just a simple effect on hovering and clicking the text.. :). What is a css3 text effects..? How do you make a css3 text effects..? This script and codes were developed by Unmesh Shukla on 03 September 2022, Saturday.

CSS3 Text Effects.. Previews
IQ Test

CSS3 Text Effects.. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Text Effects..</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=*);
body
{ font-family:calibri;
}
div
{ top:103px; opacity:0.4; position:absolute; color:white; text-align:center; font: 170px jokerman; text-shadow:1px 1px 5px #dddddd,2px 2px 5px #ffffff,3px 3px 5px #ffffff,4px 4px 5px #ffffff,5px 5px 5px #ffffff,6px 6px 5px #adadad,7px 7px 5px #adadad,8px 8px 5px #adadad,9px 9px 5px #adadad,10px 10px 5px #adadad,11px 11px 5px ,12px 12px 5px ; transition:opacity 500ms linear,text-shadow 500ms ease-in-out,color 300ms linear;
}
div:hover
{ opacity:0.8; text-shadow:1px 1px #454545; color:red; text-shadow:0px 0px 20px #000000; animation:myanim 100ms infinite linear;
}
div:active
{ opacity:0.8; text-shadow:1px 1px 5px #000000,2px 2px 5px #000000,3px 3px 5px #000000,4px 4px 5px #000000,5px 5px 5px #000000,6px 6px 50px #000000,7px 7px 5px #000000,8px 8px 5px #000000,9px 9px 5px #000000,10px 10px 5px #000000,11px 11px 5px #000000,12px 12px 5px #000000,13px 13px 5px #000000,14px 14px 5px #000000,15px 15px 5px #000000,16px 16px 5px #000000,16px 16px 5px #000000,17px 17px 5px #000000,18px 18px 5px #000000,19px 19px 5px #000000;
}
@keyframes myanim
{ 10%{transform:scale(1)rotate(0deg);} 20%{transform:scale(1)rotate(-3deg);} 80%{transform:scale(1)rotate(3deg);} 100%{transform:scale(1)rotate(0deg);}
}
div:nth-child(1)
{ left:10%;
}
div:nth-child(2)
{ left:28%;
}
div:nth-child(3)
{ left:50%;
}
div:nth-child(4)
{ left:70%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> Hover and Click on the text below
<span>
<div>L</div><div>O</div><div>S</div><div>T</div>
</span>
</body>
</html>

CSS3 Text Effects.. - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=*);
body
{ font-family:calibri;
}
div
{ top:103px; opacity:0.4; position:absolute; color:white; text-align:center; font: 170px jokerman; text-shadow:1px 1px 5px #dddddd,2px 2px 5px #ffffff,3px 3px 5px #ffffff,4px 4px 5px #ffffff,5px 5px 5px #ffffff,6px 6px 5px #adadad,7px 7px 5px #adadad,8px 8px 5px #adadad,9px 9px 5px #adadad,10px 10px 5px #adadad,11px 11px 5px ,12px 12px 5px ; transition:opacity 500ms linear,text-shadow 500ms ease-in-out,color 300ms linear;
}
div:hover
{ opacity:0.8; text-shadow:1px 1px #454545; color:red; text-shadow:0px 0px 20px #000000; animation:myanim 100ms infinite linear;
}
div:active
{ opacity:0.8; text-shadow:1px 1px 5px #000000,2px 2px 5px #000000,3px 3px 5px #000000,4px 4px 5px #000000,5px 5px 5px #000000,6px 6px 50px #000000,7px 7px 5px #000000,8px 8px 5px #000000,9px 9px 5px #000000,10px 10px 5px #000000,11px 11px 5px #000000,12px 12px 5px #000000,13px 13px 5px #000000,14px 14px 5px #000000,15px 15px 5px #000000,16px 16px 5px #000000,16px 16px 5px #000000,17px 17px 5px #000000,18px 18px 5px #000000,19px 19px 5px #000000;
}
@keyframes myanim
{ 10%{transform:scale(1)rotate(0deg);} 20%{transform:scale(1)rotate(-3deg);} 80%{transform:scale(1)rotate(3deg);} 100%{transform:scale(1)rotate(0deg);}
}
div:nth-child(1)
{ left:10%;
}
div:nth-child(2)
{ left:28%;
}
div:nth-child(3)
{ left:50%;
}
div:nth-child(4)
{ left:70%;
}
CSS3 Text Effects.. - Script Codes
CSS3 Text Effects.. - Script Codes
Home Page Home
Developer Unmesh Shukla
Username unmeshpro
Uploaded September 03, 2022
Rating 3
Size 2,557 Kb
Views 32,384
Do you need developer help for CSS3 Text Effects..?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Unmesh Shukla (unmeshpro) Script Codes
Name
More Simple Loaders..
Simple Opening SCSS Cubes
A veriiiiii simple loader
Again a simple single-element loader..
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!