I'm trying to animate a sign up / log in page where if you click on the right side, the right div will move to the left and the left div will move to the right. same in reverse. I'm having trouble playing 2 animations at once, also I haven't really animated in css before.
Image of my site:
My Css:
* {
margin: 0px;
border: 0px;
padding: 0px;
}
#keyframes example {
100% {
left: 0vw;
}
}
#keyframes example2 {
100% {
right: 40vw;
}
}
#right {
height: 100vh;
width: 40vw;
background-color: #363e47;
left: 60vw;
display: block;
position: absolute;
animation: example 0.5s linear forwards;
}
#left {
height: 100vh;
width: 60vw;
background-color: rgb(47, 52, 58);
display: block;
position: absolute;
animation: example2 0.5s linear forwards;
}
My Html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="right"></div>
<div id="left"></div>
</body>
</html>
Related
I am currently coding a front page for my website. I'd like all the text to be inline with each other, but when I increase the font size of one, it adds a padding or margin around it, moving it a little to the right and pushing the text below it down.
Is there any way to solve this?
#import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:ital,wght#0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');
#font-face {
font-family: Roboto-Black;
src: url(/fonts/Roboto-Black.ttf);
}
:root {
--black: Roboto-Black
}
/* INDEX PAGE */
body,html {
height: 100%;
margin: 0;
padding: 0;
}
.index-bg {
background-image: url(/images/joshua-sortino-71vAb1FXB6g-unsplash.jpg);
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 100%;
z-index: 1;
}
.main-fcs {
position: absolute;
top: 30%;
left: 10%;
transform: translate(-10%, -30%);
font-size: 30px;
}
.main-fcs h1 {
font-family: var(--black);
}
<!DOCTYPE html>
<html lang="en" style="max-width: 100%; overflow-x: hidden;">
<head>
<title>website</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta data-hid="description" name="description" content="website">
</head>
<body>
<div class="index-bg"></div>
<div class="main-fcs">
<h1>Custom Websites</h1>
<p>Your fully custom website awaits...</p>
</div>
<div class="main-fcs-btn">
<div class="fcs-btn-bck">
<h2>Get Started</h2>
</div>
</div>
</body>
</html>
I think I have the solution, I simply removed the body {} selector and gave the h2 selector properties that determine its position, if you resize the page it will be in the same place. I gave h2 similar properties that was given to the other class.
#import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:ital,wght#0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');
#font-face {
font-family: Roboto-Black;
src: url(/fonts/Roboto-Black.ttf);
}
:root {
--black: Roboto-Black
}
/* INDEX PAGE */
html {
height: 100%;
margin: 0;
padding: 0;
}
.index-bg {
background-image: url(/images/joshua-sortino-71vAb1FXB6g-unsplash.jpg);
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 100%;
z-index: 1;
}
.main-fcs{
position: absolute;
top: 30%;
left: 10%;
transform: translate(-10%, -30%);
font-size: 30px;
}
h2 {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-10%, -30%);
}
.main-fcs h1 {
font-family: var(--black);
}
<!DOCTYPE html>
<html lang="en" style="max-width: 100%; overflow-x: hidden;">
<head>
<title>website</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta data-hid="description" name="description" content="website">
</head>
<body>
<div class="index-bg"></div>
<div class="main-fcs">
<h1>Custom Websites</h1>
<p>Your fully custom website awaits...</p>
</div>
<div class="main-fcs-btn">
<div class="fcs-btn-bck">
<h2>Get Started</h2>
</div>
</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
that's my first post here. I'm working on a project and one thing block me so i'm trying to ask you if is a solution for this.
I have 3 images with display:flex and justify-content:center. (parrent div)
Then i wanna make them on hover to transform(translate) to same position.
Like, when i hover first image to go left: 200px; and top: 200px; (ex) and same for the rest of two without modify the originaly position from display flex.
Is a easy way of doing that?
Thank you!
Also i wanna make them in JS later but first i wanna make this working fine
That's what i wanna do:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
.img-test1:hover {
transition: 3s;
transform: translate(200px, 200px);
}
.img-test2:hover {
transition: 3s;
transform: translate(200px, 200px);
}
.img-test3:hover {
transition: 3s;
transform: translate(200px, 200px);
}
<!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="./style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<img class ="img-test1" src="./Asset_1.svg" alt="">
<img class ="img-test2" src="./Asset_2.svg" alt="">
<img class ="img-test3" src="./Asset_3.svg" alt="">
</div>
</body>
</html>
for simplest answer, use CSS variables with a calc() function.
one time all the elements!! easy and fast
I commented on the code if you want...
the first element has a --i var with 0, so it will be 0 position x
the second element has a --i var with 1, so it will be -100 position x
the third element has a --i var with 2, so it will be -200 position x
the amazing part about this, is if you want to add more images, it will be easy for you, because the formula is calculated by CSS (not you)
here the fixed code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* here the trick */
--end-position: calc(-100px * var(--i));
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
/* use the DRY method (Dont Repeat Yourself) */
.container img:hover {
transition: 3s;
/* one time for all, that's easy! and fast*/
transform: translate(var(--end-position), 200px);
}
<div class="container">
<img style="--i: 0;" class="img-test1" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<img style="--i: 1;" class="img-test2" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<img style="--i: 2;" class="img-test3" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</div>
To replicate the positioning given in the picture you need to move the first element by 0 in the x direction, the second by -100px, the third by -200px to get them all to translate to under the first one.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100px;
height: 100px;
}
.container {
background-color: red;
height: 400px;
width: 100%;
display: flex;
justify-content: center;
}
.img-test1:hover {
transition: 3s;
transform: translate(0, 200px);
}
.img-test2:hover {
transition: 3s;
transform: translate(-100px, 200px);
}
.img-test3:hover {
transition: 3s;
transform: translate(-200px, 200px);
}
<!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="./style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<img class ="img-test1" src="./Asset_1.svg" alt="">
<img class ="img-test2" src="./Asset_2.svg" alt="">
<img class ="img-test3" src="./Asset_3.svg" alt="">
</div>
</body>
</html>
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>
I created a clip-path circle, but the filter I added seems to be outside the parent element, but I couldn't find a solution. You can see it better from my codepen account. If there is a way to add box-shadow to clip-paths, then you can suggest a solution to the problem. Thank you in advance for your answers.
codepen: https://codepen.io/BerkayAkgurgen/pen/zYKgWXw
.card {
position: relative;
width: 300px;
height: 300px;
// overflow: hidden;
z-index: 2;
background-color: blue;
filter: drop-shadow(-1px 6px 13px black);
}
.circle {
position: absolute;
content: '';
background-color: red;
opacity: 1;
top: -150px;
left:90px;
width: 100%;
height: 100%;
clip-path: circle(50% at 50% 50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Sass - Grid</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<div class="container">
<div class="card">
<div class="circle"></div>
</div>
</div>
</body>
</html>