I've set up a landing page for practice, where an h1 + a paragraph slide in, and a "Read More" button slowly appears. I've also set it up so that when you hover over the "Read More" button, it rotates 180 degrees on the y axis. However, my problem is that the left border vanishes when I hover over. Here's what it looks like when this happens:
The text is flipped because I rotated it on the Y axis, but the left (well, actually right because it's flipped) border vanishes. Any ideas on why?Here's my code:
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #12475f;
color: white;
line-height: 1.6;
text-align: center;
}
.container {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase {
height: 300px;
}
#showcase h1 {
font-size: 50px;
line-height: 1.3;
position: relative;
animation-name: heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes heading {
0% {top: -50px;}
100% {top: 200px}
}
#content {
position: relative;
animation-name: content;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes content {
0% {right: 100%;}
100% {right: 0;}
}
.btn {
display: inline-block;
text-decoration: none;
padding: 1rem 2rem;
border: white 1px solid;
margin-top: 40px;
color: white;
opacity: 0;
animation-name: btn;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
transition-property: transform;
transition-duration: 1s;
}
.btn:hover {
transform: rotateY(180deg);
}
#keyframes btn {
0% {opacity: 0;}
100% {opacity: 1;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="landing.css">
<title>Landing Page</title>
</head>
<body>
<header id="showcase">
<h1>Welcome To My Site</h1>
</header>
<div id="content" class="container">
<p>(pause) You thought wrong, dude. (He shoots and Marty falls to the ground.) (Tannen laughs and walks over to where Marty lays motionless on the ground. Doc watches Tannen then looks down at Marty in disbelief.) Ahh, thank ya. (Tannen stops just in front of Marty. He points his gun down at Marty meaning to finish him off. Suddenly Marty kicks the gun out of Tannen's hand. He stands up to face Tannen. Tannen throws a punch and nearly breaks his hand. Marty lifts his poncho to reveal the stove door that he put on as a bullet-proof vest. He saw the same thing in the Clint Eastwood movie that Biff was watching in the other 1985 time line.</p>
</div>
Read More
</body>
</html>
I'm new to web design, so the solution is probably obvious. However, I just can't figure out why this is happening. Please Help!
Thanks,
Lyfe
I think the problem that occurs when "hovering" is the css line at the class btn:
.btn {
padding: 1rem 2rem;
}
I also noticed that It seems okay with your code snippet until I tested it in https://codepen.io. The border-left you are referring to be the problem seems to be border-bottom to us.
I made some changes prior to your code:
You can visit this pen and play over the code.
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #12475f;
color: white;
line-height: 1.6;
text-align: center;
}
.container {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
#showcase {
height: 300px;
}
#showcase h1 {
font-size: 50px;
line-height: 1.3;
position: relative;
animation-name: heading;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes heading {
0% {top: -50px;}
100% {top: 200px}
}
#content {
position: relative;
animation-name: content;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes content {
0% {right: 100%;}
100% {right: 0;}
}
span {
padding: 1rem 2rem;
}
.btn {
width: auto;
height: 60px;
line-height: 60px;
display: inline-block;
text-decoration: none;
/* padding: 1rem 2rem; */
border: white 1px solid;
margin-top: 40px;
color: white;
opacity: 0;
animation-name: btn;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
transition-property: transform;
transition-duration: 1s;
}
.btn:hover {
transform: rotateY(180deg);
}
#keyframes btn {
0% {opacity: 0;}
100% {opacity: 1;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="landing.css">
<title>Landing Page</title>
</head>
<body>
<header id="showcase">
<h1>Welcome To My Site</h1>
</header>
<div id="content" class="container">
<p>(pause) You thought wrong, dude. (He shoots and Marty falls to the ground.) (Tannen laughs and walks over to where Marty lays motionless on the ground. Doc watches Tannen then looks down at Marty in disbelief.) Ahh, thank ya. (Tannen stops just in front of Marty. He points his gun down at Marty meaning to finish him off. Suddenly Marty kicks the gun out of Tannen's hand. He stands up to face Tannen. Tannen throws a punch and nearly breaks his hand. Marty lifts his poncho to reveal the stove door that he put on as a bullet-proof vest. He saw the same thing in the Clint Eastwood movie that Biff was watching in the other 1985 time line.</p>
</div>
<a href="#" class="btn">
<span>Read More</span>
</a>
</body>
</html>
The below code stops the border from disappearing:
.btn {
width: 150px;
}
Related
I used <div> to make a color changing background, but the background covers the image I have. How can I make the <div> stay in the background?
(Btw I know in my code there's 2 sections for color but deleting either of them makes the colors not work.) Here's what it looks like when run: https://the-hampsterdog-dance.glitch.me/
thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DANCE THE NIGHT AWAY</title>
<img
src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809"
width="140"
height="100"
alt="DANCE THE NIGHT AWAY"
/>
<div id="dog"></div>
<style>
#-webkit-keyframes bg-animation {
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
animation: change 10s infinite;
}
#-webkit-keyframes change{
25%{background-color: blue;}
50%{background-color: green;}
75%{background-color: purple;}
}
#dog {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-animation: change 10s infinite;
}
</style>
</body>
</head>
</html>
You could either move the dog image inside <div id="dog"></div> or target the body rather than #dog for the background color animation. Both approaches will work.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<title>DANCE THE NIGHT AWAY</title>
<img
src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809"
width="140"
height="100"
alt="DANCE THE NIGHT AWAY"
/>
<div id="dog"></div>
<style>
#-webkit-keyframes bg-animation {
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
animation: change 10s infinite;
}
#-webkit-keyframes change{
25%{background-color: blue;}
50%{background-color: green;}
75%{background-color: purple;}
}
body {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
-webkit-animation: change 10s infinite;
}
</style>
</body>
</html>
Elements later inside the DOM (Document Object Model, essentially your HTML) usually are positioned on top of elements earlier. So the easiest solution is to switch the order of your img and div.
If this is not possible for whatever reason, you can change the layering in CSS using z-index. The higher it’s value, the more the affected element gets on top. E.g. for #dog:
z-index: 99;
You could do something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DANCE THE NIGHT AWAY</title>
<style>
.foreground {
z-index: 790909;
}
body{
-webkit-animation: change 10s infinite;
}
#-webkit-keyframes bg-animation {
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
animation: change 10s infinite;
}
#-webkit-keyframes change {
25% {
background-color: blue;
}
50% {
background-color: green;
}
75% {
background-color: purple;
}
}
#dog {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<img class="foreground" src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809" width="140" height="100" alt="DANCE THE NIGHT AWAY" />
<div id="dog"></div>
</body>
</html>
I'm trying to animate slowly appearing text in css and I can't make it fluid... It consists of 3 words and will smoothly do the first word, but the next 2 words just pop into existence.
This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Not really my first website</title>
</head>
<body>
<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>
</body>
</html>
.header{
width: 100%;
top: 50%;
position: top;
left: 40%;
border-bottom: 5px solid greenyellow;
overflow: hidden;
animation: animate 2s linear forwards;
}
.header h1 {
color: green;
}
#keyframes animate {
0% {
width: 0px;
height: 0px;
}
20% {
width: 50px;
height: 0px;
}
50% {
width: 50px;
height: 80px;
}
}```
No need for height in the keyframe, the problem is that the h1 is a block element and it breaks the words because of width 0px, but if you put in a white-space: nowrap; it should be fine, also position: top; is not valid, not sure what your trying there.
PS i you want he h1 to be green, first the element then the class selector h1.header {color: green;}
.header {
white-space: nowrap;
overflow: hidden;
border-bottom: 5px solid greenyellow;
animation: animate 2s linear forwards;
}
h1.header {
color: green;
}
#keyframes animate {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>
If I get your means correctly It's because you have use 50px width in your key frame and it can only appear first word you can change that
I've been searching this question on Stack Overflow. I've tried but my text align doesn't work, it's just null. tried to use display: block, width: 100% and whatever I could find, but I unfortunately got no luck. I got no error messages whatsoever. as of right now, I have no clue on what is causing it
#import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
/*bg*/
img.bg {
min-height: 100%;
min-width: 104px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
h1{
font-family: 'Source Sans Pro', sans-serif;
color: white;
text-shadow: 0px 0px 40px #690000;
font-size: 112px;
padding-bottom: 20px;
text-align: center;
display: block;
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>e</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script.js"></script>
</body>
</html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes example {
from {background-color: red;}
to {background-color: orange;}
}
</style>
</head>
<body>
<h1 class="center">Denied</h1>
<div></div>
</body>
</html>
So, if you are learning web development then it's ok to make mistakes.
The thing you were doing wrong is just the whole format of the code
body,html,head
These are just used 1 time and you just used them as divs
What you should have done was like this -
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>e</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
body {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes example {
from {
background-color: red;
}
to {
background-color: orange;
}
}
</style>
</head>
<body>
<div>
<h1 class="center">Denied</h1>
</div>
</body>
<script src="script.js"></script>
</html>
CSS
#import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap");
/*bg*/
img.bg {
min-height: 100%;
min-width: 104px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
h1 {
font-family: "Source Sans Pro", sans-serif;
color: white;
text-shadow: 0px 0px 40px #690000;
font-size: 112px;
padding-bottom: 20px;
text-align: center;
display: block;
width: 100vw;
}
Your syntax of writing the code was very wrong
and I think you would have wanted the heading h1 inside the div like this-
<div>
<h1 class="center">Denied</h1>
</div>
and not leaving the div empty for no reason at all
After all this the main thing due to which you were not able to center it through text-align: center; was, you just had to take width as 100vw and not 100%
`width: 100vw;`
means you are taking the width of the element in respect of the screen means-
if you are viewing your website through a desktop whose width = 600px then your <h1 class="center">Denied</h1> width will be equal to the width of the screen which is 600px
At Last I would suggest you see the syntax of the html and css properly
A Quick Tip - if you are using VSCode for writing code you can just write ! on an empty HTML file and it will automatically write the HTML template with `head, body,HTML and all that stuff.
You have pasted your html code twice in your answer and this is making a mess to understand your code. Although your question is quite simple and I have answered in as simplest way as I can.
You should set text-align property to a parent div or span instead of direct HTML tag.
And while giving animation please don't give it a width if you want you items to be at center, for clarity see the attached snippet
.denied{
width:100%;
text-align: center;
}
body {
background-color: red;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes example {
from {
background-color: red;
}
to {
background-color: orange;
}
}
<div class="denied">
<h1>Denied</h1>
</div>
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 2 years ago.
First of all, I'm talking of background and not background-color. I looked around on stack-overflow but this solution but this is for images. Though I won't prefer creating an image of gradient and using this method. It might just blur up the original image as the image size would be variable.
The fade effect I want works with background-color but there seems no way to use linear-gradient in background color.
Here is my code:
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
animation-name: div-text-hover;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#keyframes div-text-hover {
0% {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
}
100% {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
}
}
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
When I hover my mouse on the DIV it should change the background to the above gradient with FADE effect.
But when I hover, the background changes instantly like this:
I want that background to fade-in slowly and not so sharply with pure CSS without Jquery or anything else. Just like when we use background-color
. I found no way to do this with background.
EDIT: I tried out adding #keyframes every 10% and it's still sharply changes opacity every frame. And it's not efficient to type of the same lines 60 times to get 60fps :-(
For this, you can use transition but transition does not work for linear-gradient so I'm changing here opacity of ::after pseudo element. button name will not show that why i used z-index for stack order.
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
position: relative;
z-index: 1;
overflow: hidden;
}
#div-text::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity 1s ease;
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
opacity: 0;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
position: relative;
z-index: 3;
}
#div-text:hover::after{
opacity: 1;
}
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
I think, it will be helpful for you.
I am sure This will help You.I just changed the keyframe and place that linear-gradiant in hover section.
#keyframes div-text-hover {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
background-size: 400% 400%;
-webkit-animation: div-text-hover 2s ease infinite;
animation: div-text-hover 2s ease infinite;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
</body>
</html>
I also ran into same problem a while ago, and didn't get an answer. Turns out it is because background's linear gradient property is not animatable, just like background-img. There are some workarounds though:
Stack 2 gradients on top of each other and animate the opacity of the top one. This is given in detail here : https://medium.com/#dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
What I used is that create a gradient that is 2 times the width of screen and animate the position of the gradient.
I think in your code, the animation is working but your both the linear gradients have same values of color, hence you cant see it working. In short it is like changing gradient from white to white, which is working but there is no visual change.
Instead you can try this :-
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
animation: hover-animation 2s infinite ease-in;
}
#keyframes hover-animation{
0%{
background: #2d2e31;
}
100%{
background: linear-gradient(45deg,#36D8FF, #00acee, #66757f);
}
}
I too am a beginer so this is not a perfect code. So you might want to make changes to it.
And sorry if i have made any mistake.Let me know how it works out.
Thank you.
I was trying to animate an html object to move from one position to another using css and I'm running into some strange issues. Whenever I implement the animation the object disappears. I also was working with an animation that fades a shadow in and out and that one works fine so I'm not sure what the issue is. Tried running in both Chrome and Safari, and including the webkit animation command just to make sure it wasn't the issue, which it shouldn't be because the fade ran fine without it. Let me know if you see what's wrong thanks!
CSS:
body{
margin-top: 0px;
background-color: black;
font: 12px Tahoma, Geneva, sans-serif;
color: rgb(0,0,0);
}
#fall{position: fixed; left: 0px; bottom: 0px; z-index: -1;}
#c1{position: absolute; top: 10px; left: 10px; border-radius: 50%; width: 10px; height: 10px; z-index: 10;
animation: fall 3s ease infinite; -webkit-animation: fall 3s ease infinite; background-color: white;
}
#keyframes swell{
from {box-shadow: 10px -10px black;}
to {box-shadow: 10px -10px 10px white;}
}
#keyframes fall{
from{left: 10px;}
to{left: 200px;}
}
#-webkit-keyframes fall{
from{left: 10px;}
to{left: 200px;}
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive</title>
<link href="main.css" rel="stylesheet"/>
</head>
<body>
<img src="images/smallfall.jpg" id="fall">
<div class="circle" id="c1"></div>
</body>
</html>