I have this simple CSS spinner, here:
html {
background: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#keyframes k__common-spin-cw {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.wd-spinner {
height: 30px;
width: 30px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.15);
border-width: 2px;
border-radius: 100%;
border-top-color: #00ba8c;
-webkit-animation: k__common-spin-cw 700ms linear infinite;
animation: k__common-spin-cw 700ms linear infinite;
}
<div class="wd-spinner"></div>
Is it possible to have a gradient border with border-radius, and instead of having the tail of the highlighted border-top just abruptly end, make it a nice gradient fade, while also keeping the background transparent?
I have removed the animation and increased the size to make the effect more easily visible.
With a pseudo, I have added a shadow of the same color than the border to create the fade.
Hover on the div and the overflow hidden will be applied, setting the final effect
html {
background: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wd-spinner {
height: 200px;
width: 200px;
border-radius: 100%;
position: relative;
}
.wd-spinner:hover {
overflow: hidden;
}
.wd-spinner:after {
content: "";
position: absolute;
height: 196px;
width: 196px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.15);
border-width: 2px;
border-radius: 100%;
border-top-color: #00ba8c;
}
.wd-spinner:before {
content: "";
position: absolute;
height: 196px;
width: 196px;
top: 2px;
left: 2px;
border-radius: 100%;
box-shadow: -40px -40px 70px -22px #00ba8c;
}
<div class="wd-spinner"></div>
Related
I need to create the border in the image:
Here is my css:
width: 170;
height: 170;
border-radius: 50%;
background:repeating-linear-gradient(300deg, transparent 0 4px, #fff 4px 6px), linear-gradient(300deg, #EC74E7 0%, #EC74E7 35%, #FF3055 80%, #FF3055 100%);
position: relative;
I was trying to do it with gradients overlapping each other, but can't seem to get it right. What I have so far:
Does anyone know how to?
Thanks
Here is an example of using the svg background for border styling.
.circle-one {
position: relative;
margin: 20px;
height: 120px;
width: 120px;
background-color: white;
border-radius: 50%;
cursor: pointer;
float:left;
display: block;
}
.circle-one:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
border: 2px dashed red;
border-radius: 50%;
}
.circle-one:hover:before {
animation: spin-one 10s linear infinite;
}
#keyframes spin-one {
100% {
transform: rotateZ(360deg);
}
}
/* ==================================== */
.circle-two {
position: relative;
margin: 20px;
height: 120px;
width: 120px;
background-color: white;
border-radius: 50%;
cursor: pointer;
float:left;
display: block;
}
.circle-two:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='red' stroke-width='4' stroke-dasharray='6%2c 12' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
border-radius: 50%;
}
.circle-two:hover:before {
animation: spin-one 10s linear infinite;
}
#keyframes spin-two {
100% {
transform: rotateZ(360deg);
}
}
<div class="circle-one"></div>
<div class="circle-two"></div>
May it helps :)
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 1 year ago.
.body {
background-color: #18181a;
color: white;
font-size: 2.5rem;
margin-left: 0%;
border-radius: 5px;
}
.body .card{
background:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,212,255,0) 100%),url("./images/yuuki_mikan_bg.jpg");
background-repeat: no-repeat;
background-position: right;
width: 90%;
height: 80%;
border-radius: 10px;
margin: 10px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
transition: background 0.5s linear;
}
.body .card:hover {
background:linear-gradient(90deg, rgba(0,0,0,0.17690826330532217) 0%, rgba(0,212,255,0) 100%),url("./images/yuuki_mikan_bg.jpg");
background-position: right;
}
.body .card .card_img{
max-width: 80%;
max-height: 95%;
border-radius: 5px;
/* bottom: 9px; */
/* left: -10px; */
/* top: -10px; */
transition: 0.5s;
opacity: 1;
display: flex;
justify-content: flex-start;
align-self: center;
}
.body .card .card_name{
margin-right: 2%;
margin-top: auto;
margin-bottom: auto;
font-size: 2.5rem;
text-shadow: 0px 0px 18px black;
opacity: 1;
}
this is the code im using, whenever i hover over .card, it changes the background color but transition doesn't delay its transition time. If you want more context, this is the website my code is running at https://oniichann.tk/waifus
I believe the only animatable property on a background gradient is background-position.
You may be able to achieve what you're looking for by doing something like the following:
.card {
position: relative;
text-align: center;
color: white;
padding: 100px;
background: url("https://oniichann.tk/waifus/images/bg.jpg");
background-repeat: no-repeat;
background-position: right;
background-size: cover;
}
.card:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0) 100%
);
background-size: 200% 200%;
transition: background-position 0.5s linear;
}
.card:hover:before {
background-position: 100% 50%;
}
<div class="card"></div>
I'm trying to replicate this effect with pure CSS:
So far I've tried doing:
.parent {
height: 90vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hoverable-element {
border: 0.1rem solid #000;
background: #fff;
padding: 1rem 2rem;
transform: translate(0, 0);
box-shadow: 0 0 0 #000;
transition:
box-shadow 200ms ease-out,
transform 200ms ease-out;
}
.hoverable-element:hover {
transform: translate(-0.5rem, -0.5rem);
box-shadow:
0.1rem 0.1rem 0 #000,
0.2rem 0.2rem 0 #000,
0.3rem 0.3rem 0 #000,
0.4rem 0.4rem 0 #000,
0.5rem 0.5rem 0 #000;
}
<div class="parent">
<button class="hoverable-element">Hoverable Button</button>
</div>
But this method repeats a lot of unnecessary code, as well as not properly doing what I intended.
I want the button "shadow" or hover-effect-thingy to be bordered with a white background (as shown in the image). Other than that I'm clueless as to where to start
here is an idea with pseudo element and skew transformation:
.parent {
height: 90vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hoverable-element {
border: 1px solid #000;
background: #fff;
padding: 1rem 2rem;
position: relative;
transition: transform 0.5s;
}
.hoverable-element::before,
.hoverable-element::after {
content: "";
position: absolute;
border: inherit;
transition: inherit;
}
.hoverable-element::before {
height: 1rem;
top: 100%;
left: -1px;
right: -1px;
transform-origin: top left;
transform: skewX(45deg) scaleY(var(--s, 0));
}
.hoverable-element::after {
width: 1rem;
left: 100%;
top: -1px;
bottom: 0;
border-bottom:none;
transform-origin: bottom left;
transform: skewY(45deg) scaleX(var(--s, 0));
}
.hoverable-element:hover {
transform: translate(-0.5rem, -0.5rem);
--s: 1;
}
<div class="parent">
<button class="hoverable-element">Hoverable Button</button>
</div>
I'm trying to replicate a graphical design using css, but I have failed for responsive, I can achieve an static form but with tiny defects (due to putting together two elements).
This is the graphical design:
I prefer it a bit more tilted, like: skew(-40deg). But the idea is to have an inner rounded border that wraps that key-button just like in the image.
The html is simple:
<header>
<nav></nav>
</header>
The css:
body > header > nav {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100vw;
height: 90px;
padding: 10px 0;
text-align: center;
z-index: 1
}
body > header > nav::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 80vw; height: 100%;
background-color: rgb(147, 147, 147);
border-bottom-right-radius: 15px;
transform: skew(-40deg);
transform-origin: 100% 0%;
}
body > header > nav::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 28.7%;
border-top: 7px solid rgb(147, 147, 147);
border-left: 50px solid rgb(147, 147, 147);
height: 75px;
border-top-left-radius: 75px;
transform: skew(-33deg);
}
I've prepared a https://jsfiddle.net/uj4qsf37/
Is there a cleaner way to do this? Like not having to use two elements? With one element it would be easy to make it responsive.
I would do it like this:
.header {
border-top: 20px solid blue;
height:100px;
position: relative;
overflow: hidden;
}
.header:before,
.header:after {
content: "";
vertical-align:top;
display: inline-block;
transform-origin: top right;
transform: skew(-40deg);
}
.header:before {
height: 100%;
width: 50%;
border-radius: 0 0 20px 0;
background: blue;
}
.header:after {
height: 20px;
width: 20px;
margin-left:-1px;
background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}
/*to illustrate different values of skew*/
.header:before,
.header:after {
animation:change 2s linear infinite alternate;
}
#keyframes change{
from{transform: skew(0deg);}
top{transform: skew(-40deg);}
}
<div class="header"></div>
I'm trying to replicate a graphical design using css, but I have failed for responsive, I can achieve an static form but with tiny defects (due to putting together two elements).
This is the graphical design:
I prefer it a bit more tilted, like: skew(-40deg). But the idea is to have an inner rounded border that wraps that key-button just like in the image.
The html is simple:
<header>
<nav></nav>
</header>
The css:
body > header > nav {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100vw;
height: 90px;
padding: 10px 0;
text-align: center;
z-index: 1
}
body > header > nav::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 80vw; height: 100%;
background-color: rgb(147, 147, 147);
border-bottom-right-radius: 15px;
transform: skew(-40deg);
transform-origin: 100% 0%;
}
body > header > nav::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 28.7%;
border-top: 7px solid rgb(147, 147, 147);
border-left: 50px solid rgb(147, 147, 147);
height: 75px;
border-top-left-radius: 75px;
transform: skew(-33deg);
}
I've prepared a https://jsfiddle.net/uj4qsf37/
Is there a cleaner way to do this? Like not having to use two elements? With one element it would be easy to make it responsive.
I would do it like this:
.header {
border-top: 20px solid blue;
height:100px;
position: relative;
overflow: hidden;
}
.header:before,
.header:after {
content: "";
vertical-align:top;
display: inline-block;
transform-origin: top right;
transform: skew(-40deg);
}
.header:before {
height: 100%;
width: 50%;
border-radius: 0 0 20px 0;
background: blue;
}
.header:after {
height: 20px;
width: 20px;
margin-left:-1px;
background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}
/*to illustrate different values of skew*/
.header:before,
.header:after {
animation:change 2s linear infinite alternate;
}
#keyframes change{
from{transform: skew(0deg);}
top{transform: skew(-40deg);}
}
<div class="header"></div>