This question already has answers here:
Is it possible based on CSS to create a circle with gradient border and transparent inner?
(3 answers)
Closed 4 years ago.
First of all, sorry for the very specific question. I'm not that good at CSS yet and I'd need a code help.
I'd like to make the inside circle transparent, without loosing the gradient effect of the border. How can I do it?
I have this spin loader (see the code snippet)
.spin-loader {
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
position: relative;
animation: spin .675s linear 0s infinite normal;
background: #5090bd;
margin-top: 18px;
margin-left: 205px;
}
.spin-loader:before {
content: "";
display: block;
position: absolute;
border-radius: 0 90px 90px 0;
height: 20px;
width: 50%;
top: 0; right: 0;
z-index: 1;
background: #405060;
background-image: -webkit-gradient(linear, left top, left bottom, from(#5090bd), to(#405060));
background-image: -webkit-linear-gradient(top, #5090bd, #405060);
background-image: -moz-linear-gradient(top, #5090bd, #405060);
background-image: -ms-linear-gradient(top, #5090bd, #405060);
background-image: -o-linear-gradient(top, #5090bd, #405060);
background-image: linear-gradient(to bottom, #5090bd, #405060);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#5090bd, endColorstr=#405060);
}
.spin-loader:after {
content: "";
display: block;
position: absolute;
border-radius: 80%;
height: 16px;
width: 16px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: #405060;
}
/* Safari */
#-webkit-keyframes spin {
to {
transform: rotate(360deg);
}
}
#keyframes spin {
to {
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html>
<body>
<div class="spin-loader"></div>
</body>
</html>
Thanks!
You cannot make this spin loader transparent, because there is some trick to get effect of decreasing opacity of rotating stripe, which cannot be done without full cover this loader with background. You can try and see what will happen when you delete or change background for .spin-loader:after.
Related
I'm following a tutorial on youtube on how to create a Glowing Border Animation with CSS
I tried to implement it myself and was pretty successful, however, I encountered a problem which I'm unable to solve. When I view my animation there is an uneven transition. It looks like as if two images are stuck together where the colours transition is cut off.
How can I solve the issue there with my transition looks smooth?
I created a JSFiddle to display what I mean:
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
color: #fff;
font: 300 2rem 'Montserrat';
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
width: calc(100% + 30px);
height: calc(100% + 30px);
top: -15px;
left: -15px;
background: linear-gradient(45deg, #0096FF, #0047AB, #000000, #6082B6, #87CEEB, #00008B, #145DA0, #00008B, #145DA0, #0096FF, #0047AB, #000000, #6082B6, #87CEEB);
background-repeat: repeat;
border-radius: 5px;
background-size: 600%;
animation: border 12s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: 0% 0%;
}
100% {
background-position: 250% 250%;
}
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<div class="box">
Greetings fellow developer!
</div>
Note: The animation looks smooth at first but after about 7ish seconds you encounter the "cut off" where the transition doesn't line up.
Your gradient need to have a kind of repetition to achieve such effect. Make its size 200% 200% then use a repeating gradient where the first color start at 0% and the last one at 50%. Notice how the list of color is repeated twice but in the opposite order.
body {
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
inset: -15px;
background:
repeating-linear-gradient(45deg,
#0096FF 0%, #0047AB, #6082B6, #87CEEB, #00008B,
#00008B, #87CEEB, #6082B6,#0047AB,#0096FF 50%);
border-radius: 5px;
background-size: 200% 200%;
animation: border 2s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: bottom left;
}
100% {
background-position: top right;
}
}
<div class="box">
</div>
I got this shape and trying to achieve this in css3, what I tried so far is:
.door {
width: 150px;
height: 160px;
background-image: linear-gradient(180deg, #234dbc, #b84295);
position: absolute;
top: 100px;
border-radius: 5px;
transform: rotate(17deg) skew(17deg);
background-size: 200% 200%;
animation: Animation 5s ease infinite;
}
#keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:90% 100%}
100%{background-position:10% 0%}
}
<div class="door"></div>
But I couldn't handle this with skew any idea or solution?
You are almost there. Consider a pseudo element to be able to hide the bottom part using overflow:hidden
.door {
width: 100px;
height: 160px;
display: grid;
border-radius: 10px;
overflow:hidden;
transform-origin: bottom;
transform: skewX(-4deg);
}
.door:before {
content:"";
background-image: linear-gradient(180deg, #234dbc, #b84295);
border-radius: inherit;
transform: skewY(17deg);
transform-origin: bottom left;
background-size: 200% 200%;
animation: Animation 5s ease infinite;
}
#keyframes Animation {
50% {
background-position: 90% 100%
}
}
<div class="door"></div>
Always :before solve the problem
.door {
width: 100px;
height: 160px;
background-image: linear-gradient(180deg, #234dbc, #b84295);
position: absolute;
top: 100px;
border-radius: 5px;
background-size: 200% 200%;
animation: Animation 5s ease infinite;
overflow: hidden;
transform: skewX(-2deg)
}
.door::before {
content: "";
position: absolute;
width: 150px;
height: 52px;
background: rgb(248, 248, 248);
top: -30px;
left: 0px;
transform: skewY(18deg);
}
<div class="door"></div>
You should make the :before background like the background of the area to seem like it's transparent
For that i make the background color of the :before rgb(248, 248, 248)
I want to create a gradient border animation starting from the top left to the bottom right. The animation will be used for images within this div.
I tried every degree of angle, but didn't get this to work in the direction I want, it always starts at the right top or at the bottom right.
Also tried it with negative degree values.
.block {
position: relative;
margin: 30px auto 0;
width: 250px;
height: 250px;
background: #272727;
}
.block:before, .block:after {
content: '';
position: absolute;
left: -1px;
top: -1px;
background: linear-gradient(45deg, rgba(0,0,0,0)35%, rgba(0,204,255,1)50%, rgba(0,0,0,0)65%);
background-size: 400%;
width: calc(100% + 2px);
height: calc(100% + 2px);
z-index: -1;
animation: shine 8s linear infinite;
}
#keyframes shine {
to {
background-position: 400% center;
}
}
.block:after {
filter: blur(8px);
}
<div class="block"></div>
Update your code like below:
.block {
position: relative;
margin: 30px auto 0;
width: 250px;
height: 250px;
background: #272727;
}
.block:after {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(-45deg, rgba(0, 0, 0, 0)35%, rgba(0, 204, 255, 1)50%, rgba(0, 0, 0, 0)65%);
background-size: 400% 400%;
z-index: -1;
animation: shine 3s linear infinite;
filter: blur(8px);
}
#keyframes shine {
from {
background-position: 100% 100%
}
to {
background-position: 0 0
}
}
<div class="block"></div>
This question already has an answer here:
Background-image in keyframe does not display in Firefox or Internet Explorer
(1 answer)
Closed 5 years ago.
I need help to make animation like linear gradient using CSS that ends with transparent color on image..
This is an example (if Possible):
Current effect achieved by creating linear gradient transparent-white-transparent and moving background forward/back on :hover.
here's solution for placing image under this animation. but please keep in mind endless animation might be very distractive and annoying for your users
.wrapper {
position: relative;
width: 350px;
height: 150px;
/*border: 2px solid #444;*/
border-radius: 10px;
overflow: hidden;
}
img {
position: relative;
z-index: 0;
width: 100%;
}
.gradient {
transition: background-position .5s;
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
font: 0;
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gradient {
background-image: linear-gradient(to top, transparent 0%, white 51%, transparent 100%);
background-position: center bottom;
}
.gradient:hover {
background-position: center top;
}
.gradient.animated {
animation: gradient 2s infinite;
}
#keyframes gradient {
0% {
background-position: center bottom;
}
50% {
background-position: center top;
}
100% {
background-position: center bottom;
}
}
<div class='wrapper'>
<div href='#' class='gradient'></div>
<img src='http://lorempixel.com/350/150/sports/' />
</div>
<div class='wrapper'>
<div href='#' class='gradient animated'></div>
<img src='http://lorempixel.com/350/150/sports/' />
</div>
and simplier example for better understanding
you can find more in article below
w3schools about CSS3 Gradients
.gradiented {
transition: background-position .5s;
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
width: 200px;
height: 200px;
}
.gradiented {
background-image: linear-gradient(to top, #283048 0%, #859398 51%, #283048 100%);
background-position: center bottom;
}
.gradiented:hover {
background-position: center top;
}
<div href='#' class='gradiented'></div>
I'm using a psuedo element to fade a gradient over another div which has an image as a background for that div.
My html layout is like so:
<div class='portfolio_thumb'>
<div class='portfolio_thumb_caption'></div
</div
and my CSS for those items
.portfolio_thumb {
position: relative;
width: 100%;
height: 300px;
background-size: cover;
}
.portfolio_thumb .portfolio_thumb_caption:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
transform: translate3d(0,50%,0);
}
.portfolio_thumb:hover .portfolio_thumb_caption:before {
transform: translate3d(0,0,0);
opacity: 1;
}
Right now the gradient fades in and starts to slide, but it is shown past the parent div. I only want the gradient shown within the bounds of the portfolio_thumb div. Also, both divs in that html snippet are the same heights. Does anyone have any ideas? I'm going for this kind of approach. http://tympanus.net/Development/HoverEffectIdeas/
Thanks!
Use overflow: hidden on the container to cut-off the gradient.
Use transform: translateY(x%) to move the gradient up and down. As we are not creating 3d animations, there is no point using translate3d, which requires more grunt to run.
The transition smoothly shows and hides the overlay
Complete Example
.portfolio_thumb {
position: relative;
background: url(http://lorempixel.com/output/animals-q-c-640-300-1.jpg);
background-size: cover;
overflow: hidden;
height: 300px;
width: 100%;
max-width: 840px;
margin: 0 auto;
}
.portfolio_thumb .portfolio_thumb_caption:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%);
content: '';
transition: all 0.5s;
transform: translateY(50%);
opacity: 0;
}
.portfolio_thumb:hover .portfolio_thumb_caption:before {
transform: translateY(0);
opacity: 1;
}
<div class='portfolio_thumb'>
<div class='portfolio_thumb_caption'></div>
</div>