I want an animation like this:
(The lower blue line is an image of movement. lol)
I tried to make with cubic-bezier but it didn't work..
I don't know much about css animation, but cubic-bezier can add points other than the first and last?
In my opinion, I feel like I should increase points..
Q. What kind of curve should I use for css animation like this?
That's not possible with CSS animation -Gui Magnani
If you manualy set the animations times and keyframes you can get close to your drawing.
.container {
position: relative;
height: 90vh;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 15px;
height: 15px;
box-shadow: 0px 0px 0px 5px green;
animation: pulse 2s linear infinite;
}
#keyframes pulse {
0% {
box-shadow: 0px 0px 0px 10px green;
width: 1px;
height: 1px;
}
20% {
box-shadow: 0px 0px 0px 100px green;
width: 1px;
height: 1px;
}
30% {
box-shadow: 0px 0px 0px 90px green;
width: 1px;
height: 1px;
}
90% {
box-shadow: 0px 0px 0px 10px green;
width: 300px;
height: 300px;
}
95% {
box-shadow: 0px 0px 0px 0px green;
width: 300px;
height: 300px;
}
100% {
box-shadow: 0px 0px 0px 0px green;
width: 290px;
height: 290px;
}
}
<div class="container">
<div class="circle"></div>
</div>
Related
This question already has answers here:
Box-shadow only on right and left
(3 answers)
Closed 3 years ago.
I currently have global box shadow on a site -
box-shadow: 0 0 5px rgba(0,0,0,.1);
But how do I modify the above so that it only appears on left or right side or both left and right?
Remember that you can use negative values for spread and multiple values for box-shadow.
.shadow {
width: 30%;
height: 40px;
margin: 2rem;
box-shadow:
-5px 0px 5px -6px rgba(0,0,0,1),
5px 0px 5px -6px rgba(0,0,0,1);
}
<div class="shadow"></div>
Another solution could be to use ::before and ::after and filter: blur. The benefits here is that you can transform: rotate the shadows to make it look like the parent element is slightly tilting.
.shadow {
position: relative;
margin: 2rem;
width: 30%;
height: 30px;
background-color: white;
}
.shadow::before,
.shadow::after {
z-index: -1;
content: '';
position: absolute;
top: 2px;
bottom: 2px;
background-color: #000;
width: 2px;
filter: blur(2px);
}
.shadow::after {
right: 0px;
}
.tilting.shadow::before,
.tilting.shadow::after
{
height: 4px;
top: initial;
bottom: 0px;
width: initial;
}
.tilting.shadow::before {
left: 0px;
right: 10px;
transform: rotate(-3deg);
}
.tilting.shadow::after {
left: 10px;
right: 0px;
transform: rotate(3deg);
}
<div class="shadow"></div>
<div class="tilting shadow"></div>
Try this:
box-shadow:
5px 0 5px -2px rgba(0,0,0,.5),
-5px 0px 5px -2px rgba(0,0,0,.5);
I have a div that I've got that's circular using border-radius: 50% what I also want to achieve is mimicking something I've already seen implemented on hover.
spacing between the border and the div.
I've tried adding padding: 5px to the hover but it doesn't create a border that's not on the div.
Code
#sub-section .content .icon-div {
background-color: rgba(204, 202, 202, 0.25);
border-radius: 50%;
width: 90px;
height: 90px;
margin-right: auto;
margin-left: auto;
text-align: center;
padding-top: 13%;
margin-bottom: 2em;
transition: all ease .3s;
}
#sub-section .content .icon-div:hover {
border: 1px solid #f6653c;
background-color: #f6653c;
padding: 5px;
transition: all ease .3s;
}
Here's a quick example using an inset box-shadow, as it's less likely to mess with your layout than animating padding:
(Bare in mind, it's not true transparency, the white inner circle is a set colour, which may or may not fit your need)
#example{
display: block;
width: 100px;
height: 100px;
color: #FFF;
text-align: center;
line-height: 100px;
background-color: #f6653c;
border: 2px solid #f6653c;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);
transition: box-shadow 0.2s linear;
}
#example:hover{
box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,1);
}
<div id="example">Hover me</div>
You could use a radial gradient:
div {
width: 120px;
height: 120px;
border-radius:50%;
border:1px solid #FA532A;
}
.simple-radial {
background: radial-gradient(#FA532A 54px, rgba(204, 202, 202, 0.25) 2px, white 4px);
}
<div class="simple-radial"></div>
I have wasted 2 days to create a shadow effect like here.
You see, the front white buttons look not flat, don't know how to describe. I bet this is because of box shadow effect, inset or something like that. But I can't make the same.
Can anyone help to make such a button with the same design, effect?
My example
.button {
background-size: 400% auto;
background: linear-gradient(to top right, rgb(247, 212, 167), #eef2f3);
border-radius: 7%;
box-shadow: inset 4px -4px 1px 1px rgb(252, 205, 144), inset -4px 4px 1px 1px white, -15px 25px 25px 0px rgba(0, 0, 0, .3);
width: 200px;
height: 200px;
-webkit-transition: all .1s linear;
transition: all .2s linear;
left: 0;
transform: rotate(45deg);
}
<div class="button main-circle"></div>
Here is an idea using some gradient and pseudo elements:
.box {
width: 100px;
height: 100px;
margin: 100px;
border: 3px solid #e0e1e6;
border-radius: 10px;
background: linear-gradient(to right, #b9b7dc, #a7a7c9);
transform: rotate(45deg);
position: relative;
z-index: 0;
box-sizing: border-box;
}
.box:before {
content: "";
position: absolute;
z-index: 2;
top: 30%;
left: -32%;
width: 100px;
height: 100px;
border: 3px solid #fefefe;
border-radius: 10px;
background: linear-gradient(to right, #e0e0e0, #fefefe);
box-sizing: border-box;
}
.box:after {
content: "";
position: absolute;
z-index: 1;
top: 30%;
left: -31%;
width: 100px;
height: 100px;
border-radius: 10px;
background: linear-gradient(to right, rgba(0,0,0,0.3),rgba(0,0,0,0.1));
box-sizing: border-box;
transform: skewY(11deg) scaleX(1.15);
filter: blur(4px);
transform-origin: top left;
}
body {
background: pink;
}
<div class="box"></div>
I'm trying (and failing) to produce a circle
with completely evenly spaced dots on the border.
Making a nicely rounded dotted border is no problem.
But the dots don't quite space out just right.
I've tried many different combinations of div sizes,
dot (border) sizes, radius sizes, etc. There's always
those two dots at the top that aren't spaced evenly.
html,
body {
height: 100%;
width: 100%;
position: fixed;
background-color: #000;
}
.vertz {
position: relative;
margin: 0px;
padding: 0px;
padding-left: -10px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.horz {
width: 300px;
height: 300px;
font-weight: bold;
margin: auto;
}
.shadow {
box-shadow: 0px 0px 10px #888888;
-moz-box-shadow: 0px 0px 10px #888888;
-webkit-box-shadow: 0px 0px 10px #888888;
-o-box-shadow: 0px 0px 10px #888888;
}
.dots {
border: rgba(3, 79, 132, 0.75) dotted 5px;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
-o-border-radius: 200px;
}
<div class="vertz horz dots"></div>
I would like to create this page (see image) with css shadow. Is this possible? So to have the page peel css box shadow bottom left and right and the shadow left and right?
You can do this with pseudo elements :before and :after. Creating two new areas which have their own box-shadows and placing them where required you can create the illusion of the shadow getting bigger as the page goes down.
body {
background: lightgrey;
}
div {
background: white;
margin: 40px auto;
height: 500px;
width: 300px;
position: relative;
padding: 10px;
}
div:before,
div:after {
height: 97%;
z-index: -10;
position: absolute;
content: "";
bottom: 15px;
left: 8px;
width: 30%;
top: 2%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 5px rgba(0, 0, 0, 0.3);
transform: rotate(1deg);
}
div:after {
transform: rotate(-1deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.3);
}
<div>
test
</div>
An alternative is using CSS transforms to change the perspective of a single :before pseudo element.
This was done by Harry **
body {
background: lightgrey;
}
div {
background: white;
margin: 40px auto;
height: 500px;
width: 300px;
position: relative;
padding: 10px;
box-shadow: 10px 0px 5px -10px gray, -10px 0px 5px -10px gray;
}
div:after {
content: '';
position: absolute;
bottom: 10px;
left: 0px;
height: 50%;
width: 100%;
transform-origin: 50% 100%;
transform: perspective(100px) rotateX(1deg);
box-shadow: 5px 0px 10px gray, -5px 0px 10px gray;
z-index: -1;
}
<div></div>
CSS :before & :after