I am following an online video (https://www.youtube.com/watch?v=wjHTKLstbRg) to make a cool looking button I'm near the end of it and it's not doing what it should be doing I have done everything it told me to and even gone through the video 5 times to check everything over please help!
Here is my code:
<!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">
<title>Document</title>
</head>
<body>
<a href="#">
<span>Button</span>
<div class="liquid"></div>
</a>
</body>
</html>
<style>
#keyframes fade {
0% {
transform translate(-50%,-75%) rotate(0deg);
}
100% {
transform translate(-50%,-75%) rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #24252A;
}
a {
position: relative;
padding: 20px 50px;
display: block;
text-decoration: none;
text-transform: uppercase;
width: 200px;
overflow: hidden;
}
a span {
position: relative;
z-index: 1;
color: #fff;
font-size: 20px;
letter-spacing: 8px;
}
a .liquid {
position: absolute;
left: 0;
top: -80px;
width: 200px;
height: 200px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0,0,0,.5);
transition: 0.5s;
}
a .liquid:before,
a .liquid:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%,-75%);
}
a .liquid:before {
border-radius: 45%;
background: rgba(20,20,20,1);
-webkit-animation: fade 5s linear infinite;
}
a .liquid:after {
border-radius: 40%;
background: rgba(20,20,20,1);
-webkit-animation: fade 10s linear infinite;
}
</style>
The format of transform is transform: none|transform-functions|initial|inherit;, so change it to :
#keyframes fade {
0% {
transform : translate(-50%,-75%) rotate(0deg);
}
100% {
transform : translate(-50%,-75%) rotate(360deg);
}
}
Related
I'm trying to move my in front my CSS animation background and set it below the buttons i tried adjusting the z-index of my text area and the animations, i gave an id to the text area and a and tried to modify that in CSS but none of this worked and it stills hidden back there, a I'm relative new and i don't know what i have to do, this is my first post so please let me know if i did something wrong.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Fantasy.css"/>
<title>Fantasy Name Generator(Test)</title>
</head>
<body>
<div className="container">
<img class="img" id="img3">
<img class="img" id="img2">
<img class="img" id="img1">
</div>
<div class="buttons">
<button class="elven_button" id="elvenFemButton"type="button">Elves</button>
<button class="human_button" type="button">Human</button>
<button class="dwarf_button" type="button">dwarf</button>
</div>
<div class="textArea">
<textarea id="areaOfText"></textarea>
</div>
<script src="ElvenFem.js"></script>
</body>
</html>
CSS:
.textArea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 4px;
background-color:black;
font-size: 16px;
resize: none;
z-index: -1;
position: relative;
}
.buttons{
position: absolute;
}
.elven_button {
background-color: springgreen;
transition: background-color .5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.elven_button:hover{
background-color: palegreen;
cursor:url("../Media/joke3.cur"), default;
}
.dwarf_button{
background-color: rgb(187, 182, 182);
transition: background-color .5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.dwarf_button:hover{
background-color: rgb(248, 248, 247);
cursor:url("akary_Hammer.cur"),default;
}
.human_button{
background-color: chocolate;
transition: background-color.5s;
font-size: 16px;
padding: 14px 40px;
border-radius: 12px ;
}
.human_button:hover{
background-color: wheat;
cursor: url("humanD1.cur"),default;
}
.textarea {
position: relative;
top: 40px; left: 40px;
}
.container{
position: relative;
display: block;
width: 100%;
max-width: 400px;
height: 280px;
margin: 0 auto;
z-index: 2;
}
.img{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-animation: fade 24s infinite;
animation: fade 24s infinite;
}
#img1{
animation-delay: 0s;
background-image: url('city1.jpg');
}
#img2{
background-image: url('human2.jpg');
animation-delay: 8s;
}
#img3{
background-image: url('morgoth_ungoliath.jpg');
animation-delay: 16s;
}
#-webkit-keyframes fade {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
34% {
opacity: 0;
}
88% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
34% {
opacity: 0;
}
88% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.wrapper {
position: relative;
}
.pseudo-img {
position:absolute;
top: 100px;
height:200px;
width: 200px;
background-color:black;
color:orangered;
z-index: 1;
}
.textArea {
position: absolute;
color:white;
top: 200px;
left: 80px;
height: 100px;
width:100px;
z-index:2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Fantasy.css"/>
<title>Fantasy Name Generator(Test)</title>
</head>
<body>
<div className="wrapper">
<div className="container">
<div class="pseudo-img">My animation</div>
<img class="img" id="img3">
<img class="img" id="img2">
<img class="img" id="img1">
</div>
<div class="buttons">
<button class="elven_button" id="elvenFemButton"type="button">Elves</button>
<button class="human_button" type="button">Human</button>
<button class="dwarf_button" type="button">dwarf</button>
</div>
<div class="textArea">
<p id="areaOfText">My text</p>
</div>
</div>
<script src="ElvenFem.js"></script>
</body>
</html>
Are you looking for something like this?
I think you by accident named the class .textarea instead of textArea give it a background-color and some content inside the p tag to see it clearly
I am trying text animations on my home page and the text slides are not working. I have tried other methods but span: before seems to be almost workable. However, I see the code is exactly working on an Sublime Text but does not work for me in Visual Studio.
The CSS
body{
margin:0;
padding:0;
background-color: rgb(65, 51, 187);
font-family:Verdana, Tahoma, sans-serif;
}
.wrapper{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.wrapper h2{
padding: 0;
margin: 0;
color:#fff;
text-shadow: 0 2px 0 rgba(0,0,0,0.5);
font-size: 60px;
}
.wrapper p{
color: #fff;
font-size: 18px;
margin: 0;
line-height: 35px;
}
.wrapper a{
background: crimson;
color: #fff;
text-decoration: none;
padding: 10 px 25 px;
border-radius: 5px;
display: inline-block;
margin-top: 30px;
}
span::before{
content: '';
animation: animate infinite 8s;
}
#keyframes animate{
0% {
content: 'A programmer';
}
33%{
content: 'An architect';
}
66%{
content: 'A developer';
}100%
{
content: 'An Automater';
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "style3.css"
<title>Document</title>
</head>
<body>
<div class = "wrapper">
<h2>I am a <span></span></h2>
<p>This is a trial for working out sliding texts</p>
Contact me
</div>
</body>
</html>
I have displayed the content but it still does not work.The problem could mostly be in the CSS Span::before. I know probably I am missing something very minimal. Please assist.
Changing a pseudo element's content does not work in some browsers (e.g. Safari on IOS) so here is a more general method, animating the opacity of span elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "style3.css">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
background-color: rgb(65, 51, 187);
font-family:Verdana, Tahoma, sans-serif;
}
.wrapper{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.wrapper h2{
padding: 0;
margin: 0;
color:#fff;
text-shadow: 0 2px 0 rgba(0,0,0,0.5);
font-size: 60px;
}
.wrapper p{
color: #fff;
font-size: 18px;
margin: 0;
line-height: 35px;
}
.wrapper a{
background: crimson;
color: #fff;
text-decoration: none;
padding: 10 px 25 px;
border-radius: 5px;
display: inline-block;
margin-top: 30px;
}
h2 div, h2 div span {
position: absolute;
display: inline-block;
overflow: visible;
white-space: nowrap;
}
span {
animation: animate infinite 8s;
animation-delay: calc((var(--n) - 1) * 2s);
position: absolute;
opacity: 0;
}
h2 span:nth-child(1) {
--n: 1;
}
h2 span:nth-child(2) {
--n: 2;
}
h2 span:nth-child(3) {
--n: 3;
}
h2 span:nth-child(4) {
--n: 4;
}
#keyframes animate{
0% {
opacity: 1;
}
25% {
opacity: 1;
}
25.1% {
opacity: 0;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class = "wrapper">
<h2>I am <div><span>A programmer</span><span>An architect</span><span>A developer</span><span>An automater</span></div></h2>
<p>This is a trial for working out sliding texts</p>
Contact me
</div>
</body>
</html>
Like the title says, I spent something like an hour and I can't figure why it is not working.
I just wanted to change the color and the background-color while hovering the button(a), but, even if in other sites I have no problem with similar code, in this one it doesn't seem to work.
Please help I'm going mad.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio 2</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Main -->
<section id="main">
<div class="container">
<p>Hello, my name is</p>
<p><span>M</span>ateusz <span>L</span>ipski</p>
MY PORTFOLIO
</div>
</section>
<!-- End Main -->
</body>
</html>
CSS
#import url("https://fonts.googleapis.com/css2?
family=Dosis:wght#200;300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Dosis", sans-serif;
}
span {
color: rgb(9, 189, 165);
font-weight: 600;
}
.program {
font-size: 1.2rem;
margin-bottom: 25px;
}
/* Main */
#main {
position: relative;
background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
background-size: cover;
background-position: top-center;
z-index: -1;
}
#main::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.3;
z-index: -1;
}
#main .container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
#main .container p {
position: relative;
color: transparent;
font-size: 2.5rem;
font-weight: 500;
margin-right: 300px;
line-height: 4rem;
animation: p_reveal 0.1s ease forwards;
}
#main .container p:first-of-type {
animation-delay: 1.2s;
}
#main .container p:nth-of-type(2) {
animation-delay: 2.7s;
}
#main .container span {
color: transparent;
animation: span_reveal 0.1s ease forwards;
animation-delay: 2.7s;
}
#main .container p::after {
content: "";
position: absolute;
height: 100%;
width: 0;
left: 0;
background-color: rgb(9, 189, 165);
overflow: hidden;
animation: box_reveal 1.5s ease forwards;
}
#main .container p:first-of-type::after {
animation-delay: 0.5s;
}
#main .container p:nth-of-type(2)::after {
animation-delay: 2s;
}
#main .container a {
padding: 10px 30px;
margin-right: 300px;
margin-top: 30px;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.2rem;
text-decoration: none;
border: 3px solid rgb(9, 189, 165);
color: rgb(9, 189, 165);
}
#main .container a:hover {
color: white;
background-color: rgb(9, 189, 165);
}
/* End Main */
You have an z-index on your main, thus you are not able to hover over your element.
if you set that z-index on your main to 1 for example, it will work.
/* Main */
#main {
position: relative;
background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
background-size: cover;
background-position: top-center;
z-index: -1;
}
edit: this block to be exact.
Having an issue in which the body (and thus the rest of the containers on the page) are working fine on the responsive / fullscreen monitor mode, but when I toggle the device toolbar to see what it looks like on mobile, there is a noticable section to the right which i have no idea what/how/why it is there. Upon inspecting element it points to the html element but i have the width set to 100% and tried 100vw but nothing seems to work.
I am guessing it has something to do with the way %'s and vw's behave on mobile or possibly the way width works but am stumped and any help would be appreciated
EDIT: Reproducible code for the error (removed most other sections but the problem applies to all of them if i add it back
HTMLFILE:
<!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" href="style.css" />
<link rel="manifest" href="favicon_io (1)/" />
<title>David Chin Personal Website</title>
</head>
<!-- Header Section-->
<body>
<section class="header">
<div class="header-container">
<div class="col-1">
<h2 class="expand">Dev</h2>
<h2 class="expand">Chin</h2>
</div>
<div class="col-2">
<img src="assets/img/test.png" alt="test" />
</div>
</div>
</section>
<script src="assets/js/main.js"></script>
</body>
</html>
CSS FILE:
html {
margin: 0;
padding: 0;
width: 100%;
border: 10px solid red;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Roboto Mono", monospace;
border: 10px solid blue;
box-sizing: border-box;
background: pink;
}
.section-intro {
margin-left: 10%;
}
.header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 90vh;
width: 100%;
animation: 0.5 header ease 1.25s;
}
#media only screen and (min-width: 768px) {
.header {
display: flex;
}
}
.header-container {
display: flex;
flex-direction: row;
width: 100%;
margin: 0;
}
.header-container .col-1 {
display: flex;
flex-direction: column;
width: 50%;
animation: fadein 0.8s linear forwards;
}
.header-container .col-2 img {
opacity: 0;
animation: 0.5s fadein ease 1.25s;
animation-fill-mode: forwards;
}
.header-container h2 {
margin-block-start: 0;
margin-block-end: 0;
}
.header-container .col-2 {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
z-index: -1;
}
.header-container .expand {
color: black;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 15rem;
white-space: nowrap;
width: 1ch;
animation: 0.5s expand ease-in-out;
animation-delay: 1.25s;
animation-fill-mode: forwards;
transform: translateX(50vw);
text-shadow: 2px 2px 6px grey;
}
/* Short term fix on text overflow */
#keyframes expand {
0% {
width: 1ch;
font-size: 15rem;
}
80% {
min-width: 330px;
}
100% {
font-size: 7rem;
transform: translateX(20vw) translateY(8rem);
min-width: 330px;
}
}
.header-container .img {
border: 2px solid black;
padding: 3rem;
background: rgba(0, 0, 0, 0);
opacity: 0;
animation: 1s fadein linear;
animation-delay: 1.25s;
animation-fill-mode: forwards;
max-width: 375px;
max-height: 375px;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
I'm trying to let the animation pause in the last keyframe, so if the lines are at 50% of the page they will stay there and not go back to the first keyframe.
Also is css the best way to do this or is there a easier way to solve this?
The css:
body, html {
height: 100%;
text-align: center;
margin: 0;
}
body {
background-color: royalblue;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid white;
top: 50%;
animation: loader 4s ease;
}
.line1 {
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
left: 20%;
animation: lines 5s infinite ease;
}
.line2 {
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
right: 20%;
animation: lines 5s infinite ease;
}
#keyframes lines {
0% { height: 10px; }
25% { height: 10px; }
50% { height: 50%; }
75% { height: 50%; }
100% { height: 50%;
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused; }
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loader1 - by Thom</title>
<!-- Custom loading-thom -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<span class="line1"></span>
<span class="line2"></span>
</body>
</html>
You could use animation-fill-mode property with forwards as value.
CSS
.line1{
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
left: 20%;
animation: lines 5s forwards ease;
}
.line2{
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
right: 20%;
animation: lines 5s forwards ease;
}
DEMO HERE
What you are looking for is something called animation-fill. You can read more about it here: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
So essentially:
.line1,
.line2 {
animation-fill: forwards;
}
Also make sure that the animation-fill is declared after the animation rule.
SOLUTION 1:
Your can change animation-fill to forward
SOLUTION 2:
use jquery
<script>
$(document).ready(function(){
var half = $(document).height()/2;
setTimeout(function(){
$('.line1 , .line2').animate({height:half});
},1000);
});
In DEMO below, press Run in jsFiddle;
DEMO: https://jsfiddle.net/0andyke4/5/