Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
It is possible to achieve this footer only with css?
Thanks
Please try this:
.container {
background: yellow;
height: 180px;
width: 400px;
}
.box {
width:400px;
height:80px;
background-color: white;
border:1px solid white;
border-width:0 0 13px 0;
margin:1rem auto;
-webkit-border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
-moz-border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
}
<div class="container"><div class="box"></div></div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Here's is link to a website http://newworldorder.com/ , whenever I load the page, I see the background zoom in for like 2 seconds, is it possible to achieve this with css? If yes, how can I do it?
Maybe something like this? Although, it resets to 1x scale at the end.
<style>
div {
background-image: url("https://images.unsplash.com/photo-1547898812-9e25c5a693e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1936&q=80");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
background-position:center-top;
background-position-x: 50%;
background-position-y: 0%;
-webkit-animation: zoomin 5s 1;
}
#-webkit-keyframes zoomin {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
}
}
</style>
<body>
<div style="position:absolute;top:0;bottom:0;left:0;right:0;"></div>
</body>
I don't know what you are really asking, but this might be what you are looking for:
html, body {
background: url("http://placehold.it/200x200") top center no-repeat;
animation: animateBg forwards 2s ease-in;
}
#keyframes animateBg{
from { background-size: 200px; }
to { background-size: 100%; }
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am setting up a new website, and I want to add a CSS hover effect. Can you tell me what to do? I want my image has a zoom hover effect.
.zoom {
padding: 50px;
box-sizing: border-box;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" ></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Many weeks have been spent trying to find how one could make this shape, it needs to be just this shape, hoping for something no overlays that makes it appear like the shape, but instead just slanting the rectangle.
#parallelogram {
margin: 0 auto;
width: 50%;
height: 100px;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
background: blue;
}
<div id="parallelogram">
</div>
#shape {
width: 300px;
height: 75px;
background-color: blue;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
margin: auto;
}
<div id="shape"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Let's say I have animation that bring red square from top to the bottom - thing happens say every 5 seconds. Once the square drops to the bottom after 5 seconds, script will teleport our red square back to the top so the loop could start over again from the top. Thing is it doesn't look natural at all.
What I want to achieve is to start second loop smoothly from bottom to the top, then again from top to the bottom etc. so the movement looks natural and smooth. In other words - red square will bounce from top to the bottom every 5 seconds. Any suggestions?
I think your are looking for that.
May be it will help you.
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 3;
-webkit-animation-direction: alternate;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}
#-webkit-keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
50% {
background-color: green;
bottom: 0px;
top: 200px;
}
100% {
background-color: red;
bottom: 0px;
top: 0px;
}
}
#keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
50% {
background-color: green;
bottom: 0px;
top: 200px;
}
100% {
background-color: red;
bottom: 0px;
top: 0px;
}
}
<div></div>
This question already has answers here:
left and top properties are not animated
(2 answers)
Closed 6 years ago.
Where on earth have I gone wrong with this css animation?
#keyframes home {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
#circle {
animation: home 2s linear infinite;
}
<section id="circle"></section>
Fiddle link
Add position:relative; to your CSS in order to control the top, right, bottom, left properties
#circle {
position:relative;
width: 75px;
height: 75px;
background: blue;
-moz-border-radius: 50%;
-webkit-border-radius:50%;
border-radius: 50%;
animation: home 5s linear infinite;
}
#keyframes home {
0% {left:0px;}
50% {left:400px;}
100% {left:0px;}
}
<div id="circle"></div>