There is h1 tag in the body which has Some Text Hello Some Text.
But while executing the word Hello is missed. Why?.
On view-source: it shows that there is a word written.
How to solve that?
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-color: red*/
}
.clr {
color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 30s infinite linear;
}
#-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}
.awesome {
font-family: futura;
font-style: italic;
color:#313131;
font-size:45px;
font-weight: bold;
position: absolute;
-webkit-animation:colorchange 20s infinite alternate;
}
#-webkit-keyframes colorchange {
0% {
color: blue;
}
10% {
color: #8e44ad;
}
20% {
color: #1abc9c;
}
30% {
color: #d35400;
}
40% {
color: blue;
}
50% {
color: #34495e;
}
60% {
color: blue;
}
70% {
color: #2980b9;
}
80% {
color: #f1c40f;
}
90% {
color: #2980b9;
}
100% {
color: pink;
}
}
<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class=""><div class="container"><br /><br /><center><b><h2 class="clr">नमस्ते</h2><br /><h1 class="clr">Some Text <span class="awesome">HELLO</span> Some Text</h1></b></center></div></body></html>
There is h1 tag in the body which has Some Text Hello Some Text.
But while executing the word Hello is missed. Why?.
On view-source: it shows that there is a word written.
How to solve that?
The Tidy Js fiddle
First you have to correct your markup as you have obsolete tags and don't use absolute position. Then simply put back the text-fill to initial.
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-color: red*/
}
.clr {
text-align:center;
font-weight:bold;
color: #f35626;
background-image:linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: hue 30s infinite linear;
}
#keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}
.awesome {
font-family: futura;
font-style: italic;
color: #313131;
font-size: 45px;
font-weight: bold;
-webkit-background-clip: initial;
-webkit-text-fill-color: initial;
animation: colorchange 20s infinite alternate;
}
#keyframes colorchange {
0% {
color: blue;
}
10% {
color: #8e44ad;
}
20% {
color: #1abc9c;
}
30% {
color: #d35400;
}
40% {
color: blue;
}
50% {
color: #34495e;
}
60% {
color: blue;
}
70% {
color: #2980b9;
}
80% {
color: #f1c40f;
}
90% {
color: #2980b9;
}
100% {
color: pink;
}
}
<div class="container">
<h2 class="clr">नमस्ते</h2>
<h1 class="clr">Some Text <span class="awesome">HELLO</span> Some Text</h1>
</div>
Simply remove position absolute of .awesome
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-color: red*/
}
.clr {
color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 30s infinite linear;
}
#-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}
.awesome {
font-family: futura;
font-style: italic;
color:#313131;
font-size:45px;
font-weight: bold;
-webkit-animation:colorchange 20s infinite alternate;
}
#-webkit-keyframes colorchange {
0% {
color: blue;
}
10% {
color: #8e44ad;
}
20% {
color: #1abc9c;
}
30% {
color: #d35400;
}
40% {
color: blue;
}
50% {
color: #34495e;
}
60% {
color: blue;
}
70% {
color: #2980b9;
}
80% {
color: #f1c40f;
}
90% {
color: #2980b9;
}
100% {
color: pink;
}
}
<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class=""><div class="container"><br /><br /><center><b><h2 class="clr">नमस्ते</h2><br /><h1 class="clr">Some Text <span class="awesome">HELLO</span> Some Text</h1></b></center></div></body></html>
You have position:absolute; on your .awesome. If this is removed, you will see the text.
.awesome {
font-family: futura;
font-style: italic;
color:#313131;
font-size:45px;
font-weight: bold;
-webkit-animation:colorchange 20s infinite alternate;
}
Replace this In this I removed Position:absolute;
Related
After each typing text animation, the next text is slightly moved to the right. How do I make sure that the text keeps aligned left? "text-align: left" and "margin-left:0" do not work. When I include "margin-right: 100%" it keeps aligned left, but each text comes on a new line, which is not what I want.
.text_1 {
animation: text1;
max-width: 12.5em;
padding-bottom: 0.1em;
}
.text_2 {
animation: text2;
max-width: 9.1em;
padding-bottom: 0.1em;
}
.text_3 {
animation: text3;
max-width: 5.3;
padding-bottom: 0.1em;
}
.text_4 {
animation: text4;
max-width: 15;
padding-bottom: 0.1em;
}
.text_5 {
animation: text5;
max-width: 15.2;
padding-bottom: 0.1em;
}
.text_1,
.text_2,
.text_3,
.text_4,
.text_5 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after,
.text_2::after,
.text_3::after,
.text_4::after,
.text_5::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
#keyframes text5 {
0%,
80%,
100% {
width: 0;
}
85%,
95% {
width: 15.2em;
}
}
#keyframes text4 {
0%,
60%,
80%,
100% {
width: 0;
}
65%,
75% {
width: 15em;
}
}
#keyframes text3 {
0%,
40%,
60%,
100% {
width: 0;
}
45%,
55% {
width: 5.3em;
}
}
#keyframes text2 {
0%,
20%,
40%,
100% {
width: 0;
}
25%,
35% {
width: 9.1em;
}
}
#keyframes text1 {
0%,
20%,
100% {
width: 0;
}
5%,
15% {
width: 12.5em;
}
}
#keyframes caret {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
h1 {
font-family: Segoe UI Black;
}
h2 {
font-family: Segoe UI Black;
}
h3 {
font-family: Segoe UI Black;
}
h4 {
font-family: Segoe UI Black;
}
h5 {
font-family: Segoe UI Black;
}
h6 {
font-family: Segoe UI Black;
}
.container-text {
padding-top: 5em;
padding-left: 5em;
padding-bottom: 30em;
margin-top: 3;
}
.container-fluid {
margin-top: 5em;
}
#title {
font-size: 3em;
}
#subtitle {
font-size: 2.5em;
font-family: Segoe UI Light;
margin-bottom: 1em;
background: red;
}
#subsubtitle {
font-size: 1.5em;
font-family: Segoe UI Light;
color: #BFBFBF;
margin-bottom: 1em;
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 container-text">
<h1 id="title">Title</h1>
<h2 id="subtitle">
<span class="text_1">Tailor your marketing strategy</span>
<span class="text_2">Gauge public opinion</span>
<span class="text_3">Study trends</span>
<span class="text_4">Explore variables like demographics</span>
<span class="text_5">Monitor sentiment related to a topic</span>
</h2>
</div>
</div>
</div>
You could apply a flex-box style to the parent container ( the h2#subtitle ) and align the contents to the start of the flex-box
.text_1 {
animation: text1;
max-width: 12.5em;
padding-bottom: 0.1em;
}
.text_2 {
animation: text2;
max-width: 9.1em;
padding-bottom: 0.1em;
}
.text_3 {
animation: text3;
max-width: 5.3;
padding-bottom: 0.1em;
}
.text_4 {
animation: text4;
max-width: 15;
padding-bottom: 0.1em;
}
.text_5 {
animation: text5;
max-width: 15.2;
padding-bottom: 0.1em;
}
.text_1,
.text_2,
.text_3,
.text_4,
.text_5 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after,
.text_2::after,
.text_3::after,
.text_4::after,
.text_5::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
/* flexbox on parent */
h2#subtitle{
display:flex;
flex-direction:row;
align-items:flex-start;
}
#keyframes text5 {
0%,
80%,
100% {
width: 0;
}
85%,
95% {
width: 15.2em;
}
}
#keyframes text4 {
0%,
60%,
80%,
100% {
width: 0;
}
65%,
75% {
width: 15em;
}
}
#keyframes text3 {
0%,
40%,
60%,
100% {
width: 0;
}
45%,
55% {
width: 5.3em;
}
}
#keyframes text2 {
0%,
20%,
40%,
100% {
width: 0;
}
25%,
35% {
width: 9.1em;
}
}
#keyframes text1 {
0%,
20%,
100% {
width: 0;
}
5%,
15% {
width: 12.5em;
}
}
#keyframes caret {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
h1 {
font-family: Segoe UI Black;
}
h2 {
font-family: Segoe UI Black;
}
h3 {
font-family: Segoe UI Black;
}
h4 {
font-family: Segoe UI Black;
}
h5 {
font-family: Segoe UI Black;
}
h6 {
font-family: Segoe UI Black;
}
.container-text {
padding-top: 5em;
padding-left: 5em;
padding-bottom: 30em;
margin-top: 3;
}
.container-fluid {
margin-top: 5em;
}
#title {
font-size: 3em;
}
#subtitle {
font-size: 2.5em;
font-family: Segoe UI Light;
margin-bottom: 1em;
background: red;
}
#subsubtitle {
font-size: 1.5em;
font-family: Segoe UI Light;
color: #BFBFBF;
margin-bottom: 1em;
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 container-text">
<h1 id="title">Title</h1>
<h2 id="subtitle">
<span class="text_1">Tailor your marketing strategy</span>
<span class="text_2">Gauge public opinion</span>
<span class="text_3">Study trends</span>
<span class="text_4">Explore variables like demographics</span>
<span class="text_5">Monitor sentiment related to a topic</span>
</h2>
</div>
</div>
</div>
An example of what I want (the main text eg. subscribe): https://sounddrout.com/
My code basically has a repeating typewriter effect on it and it just goes from right to left. Although I want it to do so but in a centered fashion (Check the website linked as an example). I want it to come out from the middle so its equal on both sides and expands out. Think like the center thing in google docs.
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Text*/
.font {
font-family: 'Source Sans Pro', monospace;
}
.mid {
text-align: center;
}
.txtsize {
font-size: 40px;
}
h1 {
width: max-content;
position: relative;
font-size: 40px;
display: grid;
}
.textbody {
margin: 120px;
font-family: "Source Sans Pro", sans-serif;
display: grid;
place-content: center;
text-align: center;
background: var(--bg-color);
font: 200;
}
/*typwriter*/
:root {
--bg-color: hsl;
--typewriterSpeed: 5s;
--blinkLength: 650ms;
--typewriterCharacters: 20;
}
/* Type Writer Effect */
h1::before,
h1::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
h1::before {
background: white;
animation: typewriter var(--typewriterSpeed) steps(20) infinite;
}
h1::after {
width: 0.1em;
background: black;
animation: typewriter var(--typewriterSpeed) steps(20) infinite;
}
#keyframes typewriter {
from {
left: 0%;
}
45% {
left: 100%;
}
65% {
left: 100%;
}
85% {
left: 0%;
}
to {
left: 0%;
}
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<body>
<div class="textbody">
<h1>
Subscribe To FuryRex09
</h1>
</div>
</body>
Any ideas?
Sorry if I wasn't very clear I had a lot of trouble explaining my issue.
P.S here's a Codepen - https://codepen.io/furyrex09/pen/bGaybOe (;
if you can use JavaScript . this we be lot easier to do .
$("#typed").typed({
strings: ["This is first.", "This is second.", "Add any text you like here."],
typeSpeed: 100,
startDelay: 0,
backSpeed: 60,
backDelay: 2000,
loop: true,
cursorChar: "|",
contentType: 'html'
});
#import url('https://fonts.googleapis.com/css?family=Work+Sans');
html, body {
height: 100vh;
font-family: 'Work Sans', sans-serif;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-size: cover;
background: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
margin: 0;
}
.type-wrap {
font-size: 50px;
padding: 20px;
}
/* the above is for styling puposes only */
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
#keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
<div class="type-wrap">
<span id="typed" style="white-space:pre;" class="typed">
</span>
</div>
Here's my solution to this:
// TYPEWRITER //
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["YouTuber", "Writer", "Designer", "Creator", "Programmer", "Gamer"]
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000;
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if(charIndex < textArray[textArrayIndex].length) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
cursorSpan.classList.remove("typing");
setTimeout(erase, newTextDelay);
}
}
function erase() {
if(charIndex > 0) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent = textArray[textArrayIndex].substring(0,charIndex-1);
charIndex--;
setTimeout(erase, erasingDelay)
}
else {
cursorSpan.classList.remove("typing");
textArrayIndex++;
if(textArrayIndex>=textArray.length) textArrayIndex=0;
setTimeout(type, typingDelay + 800);
}
}
document.addEventListener("DOMContentLoaded", function() {
if(textArray.length) setTimeout(type, newTextDelay + 250);
});
/* Text */
h1 {
position: relative;
font-size: 40px;
}
.textbody {
margin-top: 100px;
font-family: "Source Sans Pro", sans-serif;
font-weight: bold;
background: var(--bg-color);
font: 200;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.typed-text {
font-weight: normal;
color: #dd7732;
}
/* Root */
:root {
--bg-color: hsl;
--typewriterSpeed: 5s;
--blinkLength: 825ms;
--typewriterCharacters: 20;
}
/* Type Writer Effect */
.cursor {
display: inline-block;
width: 3px;
background-color: #ccc;
margin-left: 0.1rem;
animation: blink 1s infinite;
}
.cursor.typing {
animation: none;
}
#keyframes blink {
0% {background-color: #ccc;}
49% {background-color: #ccc; }
50% {background-color: transparent; }
99% {background-color: transparent; }
100% {background-color: #ccc; }
}
<body>
<div class="textbody">
<h1>
I am a <span class="typed-text"></span><span class="cursor typing"> </span>
</h1>
</div>
<script src="main.js"></script>
</body>
I'm trying to make my button fade in with keyframes but it isn't working and I know I'm doing something wrong. I ended up getting the animated text to work but this is giving me a headache and I cannot find info anywhere that has helped me... I'm new to web development so don't be too harsh on me or my (probably ugly and unorganized) code lol. I'm trying to learn as much as I can, so if you can please explain why it isn't working and why something else might? Thanks guys <3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<title>Welcome! | Video Editing by Scottis</title>
</head>
<body>
<!-- Header -->
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<!-- Buttons -->
<style>
.btn {
background-color: white;
color: rgb(133, 4, 255);
text-align: center;
font-size: 15px;
font-weight: bold;
margin-right: -250px;
margin-top: 600px;
margin-left: 515px;
padding: 30px;
}
</style>
</head>
<body>
<button class="btn">Portfolio</button>
<button class = "btn">Pricing</button>
<button class="btn">Contact</button>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span{
color: white;
text-transform: uppercase;
display: block;
}
.text1{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0%{
margin-bottom: -20%;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
85%{
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
#keyframes button {
0%{
opacity: 0%;
}
0%{
opacity: 0%;
}
25%{
opacity: 25%;
}
50%{
opacity: 50%;
}
75%{
opacity: 75%;
}
100%{
opacity: 100%;
}
}
You have some issues with your code first off. You are repeating both the head and body tags out of proper valid html sequence. Have a close look at the following page and resource from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
As to your issue with keyframes, define the class you wish to control with the sequence in your css and add the animation with a unique call name, I used fadeIn. Below I have added Mozilla, webkit, opera and ms #keyframe animations for opacity. I am defining the animation to start the timer (3 seconds) #keyframe 0% { opacity: 0; } , then end at 100% { opacity: 1; }. I add multiple kits for different browsers.
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Start class for buttons animation fadeIn ease */
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* End of animation keyframes */
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span {
color: white;
text-transform: uppercase;
display: block;
}
.text1 {
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0% {
margin-bottom: -20%;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
85% {
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<button class="btn">Portfolio</button>
<button class="btn">Pricing</button>
<button class="btn">Contact</button>
How do I make font awesome icons change colour automatically like rainbow. In my current code, the text is changing colours but I want the icon to change colours too.
You can find a code example here:
#import url(https://fonts.googleapis.com/css?family=Pacifico);
#import url('https://fonts.googleapis.com/css?family=Anton');
h1, h2{
text-align:center;
}
h1{
color:rgba(100, 50, 255, .8);
font-family: 'Pacifico', cursive;
color:#212121;
}
.rainbow {
/* Font options */
font-family: 'Pacifico', cursive;
text-shadow: 2px 2px 4px #000000;
font-size:40px;
/* Chrome, Safari, Opera */
-webkit-animation: rainbow 5s infinite;
/* Internet Explorer */
-ms-animation: rainbow 5s infinite;
/* Standar Syntax */
animation: rainbow 5s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
30%{color: CadetBlue;}
40%{color: yellow;}
50%{color: coral;}
60%{color: green;}
70%{color: cyan;}
80%{color: DeepPink;}
90%{color: DodgerBlue;}
100%{color: orange;}
}
/* Internet Explorer */
#-ms-keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
30%{color: CadetBlue;}
40%{color: yellow;}
50%{color: coral;}
60%{color: green;}
70%{color: cyan;}
80%{color: DeepPink;}
90%{color: DodgerBlue;}
100%{color: orange;}
}
/* Standar Syntax */
#keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
30%{color: CadetBlue;}
40%{color: yellow;}
50%{color: coral;}
60%{color: green;}
70%{color: cyan;}
80%{color: DeepPink;}
90%{color: DodgerBlue;}
100%{color: orange;}
}
body{
background-color:#607D8B;
}
.container{
background-color:#E0F2F1;
padding:10px;
border-radius:15px;
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);
}
<div class="container">
<h1>SIMPLE CSS RAINBOW TEXT</h1>
<h2 class="rainbow">Rainbow Text</h2>
</div>
Below you can see that I just reused your code to change the color of a font awesome icon.
Changing color of a font awesome icon is similar to that of a text, i.e. using color
In the below snippet I just assigned the class rainbow to the font awesome icon.
.rainbow {
/* Chrome, Safari, Opera */
-webkit-animation: rainbow 5s infinite;
/* Internet Explorer */
-ms-animation: rainbow 5s infinite;
/* Standar Syntax */
animation: rainbow 5s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes rainbow {
0% {
color: orange;
transform: rotate(360deg);
}
10% {
color: purple;
}
20% {
color: red;
}
30% {
color: CadetBlue;
}
40% {
color: yellow;
}
50% {
color: coral;
}
60% {
color: green;
}
70% {
color: cyan;
}
80% {
color: DeepPink;
}
90% {
color: DodgerBlue;
}
100% {
color: orange;
}
}
/* Internet Explorer */
#-ms-keyframes rainbow {
0% {
color: orange;
transform: rotate(360deg);
}
10% {
color: purple;
}
20% {
color: red;
}
30% {
color: CadetBlue;
}
40% {
color: yellow;
}
50% {
color: coral;
}
60% {
color: green;
}
70% {
color: cyan;
}
80% {
color: DeepPink;
}
90% {
color: DodgerBlue;
}
100% {
color: orange;
}
}
/* Standar Syntax */
#keyframes rainbow {
0% {
color: orange;
transform: rotate(360deg);
}
10% {
color: purple;
}
20% {
color: red;
}
30% {
color: CadetBlue;
}
40% {
color: yellow;
}
50% {
color: coral;
}
60% {
color: green;
}
70% {
color: cyan;
}
80% {
color: DeepPink;
}
90% {
color: DodgerBlue;
}
100% {
color: orange;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<i class="fas fa-exclamation-triangle rainbow fa-7x"></i>
EDIT: Updated the post to answer OP's second question which is in the comment section'
Just give a class of rainbow:
#import url(https://fonts.googleapis.com/css?family=Pacifico);
#import url('https://fonts.googleapis.com/css?family=Anton');
h1,
h2 {
text-align: center;
}
h1 {
color: rgba(100, 50, 255, .8);
font-family: 'Pacifico', cursive;
color: #212121;
}
.rainbow {
/* Font options */
font-family: 'Pacifico', cursive;
text-shadow: 2px 2px 4px #000000;
font-size: 40px;
/* Chrome, Safari, Opera */
-webkit-animation: rainbow 5s infinite;
/* Internet Explorer */
-ms-animation: rainbow 5s infinite;
/* Standar Syntax */
animation: rainbow 5s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes rainbow {
0% {
color: orange;
}
10% {
color: purple;
}
20% {
color: red;
}
30% {
color: CadetBlue;
}
40% {
color: yellow;
}
50% {
color: coral;
}
60% {
color: green;
}
70% {
color: cyan;
}
80% {
color: DeepPink;
}
90% {
color: DodgerBlue;
}
100% {
color: orange;
}
}
/* Internet Explorer */
#-ms-keyframes rainbow {
0% {
color: orange;
}
10% {
color: purple;
}
20% {
color: red;
}
30% {
color: CadetBlue;
}
40% {
color: yellow;
}
50% {
color: coral;
}
60% {
color: green;
}
70% {
color: cyan;
}
80% {
color: DeepPink;
}
90% {
color: DodgerBlue;
}
100% {
color: orange;
}
}
/* Standar Syntax */
#keyframes rainbow {
0% {
color: orange;
}
10% {
color: purple;
}
20% {
color: red;
}
30% {
color: CadetBlue;
}
40% {
color: yellow;
}
50% {
color: coral;
}
60% {
color: green;
}
70% {
color: cyan;
}
80% {
color: DeepPink;
}
90% {
color: DodgerBlue;
}
100% {
color: orange;
}
}
body {
background-color: #607D8B;
}
.container {
background-color: #E0F2F1;
padding: 10px;
border-radius: 15px;
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75);
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="rainbow">
<section id="hand">
<div class="row fontawesome-icon-list">
<div class="fa-hover col-md-3 col-sm-4"><i class="rainbow fa fa-hand-grab-o" aria-hidden="true"></i> <span class="sr-only">Example of </span>hand-grab-o <span class="text-muted">(alias)</span></div>
</div>
I have a heading text and a button below it. When I hover on button, the text into the heading and the button is shaking. I fixed it with the css property backface-visibility and then the text into the elements was blurred. How to solve this problem without the blurry effect ?
e.g. https://codepen.io/yozhikk/pen/odJVeY
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777777;
padding: 30px;
}
.header {
position: relative;
height: 95vh;
background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 131, 0.8)), url(../img/hero.jpg);
background-size: cover;
background-position: top;
clip-path: polygon( 0% 0%, 0% 100%, 100% 75vh, 100% 0%)
}
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.heading-primary {
color: #ffffff;
text-transform: uppercase;
margin-bottom: 60px;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.heading-primary-main {
font-weight: 400;
font-size: 60px;
letter-spacing: 35px;
display: block;
animation: moveInLeft 1.5s ease-out
}
.heading-primary-sub {
font-weight: 700;
font-size: 20px;
letter-spacing: 17.4px;
display: block;
animation: moveInRight 1.5s ease-out
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.btn:link,
.btn:visited {
text-decoration: none;
text-transform: uppercase;
display: inline-block;
border-radius: 100px;
padding: 15px 40px;
transition: all .2s;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.btn:hover {
transform: translateY(-3px);
}
.btn:active {
transform: translateY(-1px);
}
.btn {}
.btn-white {
background-color: #fff;
color: #777777;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px)
}
80% {
transform: translateX(10px)
}
100% {
opacity: 1;
transform: translate(0)
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px)
}
80% {
transform: translateX(-10px)
}
100% {
opacity: 1;
transform: translate(0)
}
}
<header class="header">
<div class="logo-box">
<img src="img/logo-white.png" alt="" class="logo">
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">outdoors</span>
<span class="heading-primary-sub">is where live happens</span>
</h1>
Discover our tours
</div>
Remove these lines:
.btn:hover {
transform: translateY(-3px);
}
.btn:active {
transform: translateY(-1px);
}
They move the button up on hover / active for no apparent reason, which I assume is the shaking you are talking about. So just not doing that should fix it.
Give the same property you added to the hover state to the initial state but make it invisible. If you give the hover state (border : 2px solid and pink;) add it in the initial state but you can make the color transparent( border: 3px solid transparent;) so it won't show before hovering on it