Attached you'll find an image explaining what i'd like to accomplish.
I would like to have my background set, over that I would like to have a border that's a bit offset from the background. In some way I need to find a way to animate every single side of the border by it's own.
I would like the top border to animate in from the right, the bottom one from the left. The left one from the bottom and the right one from the top.
This is giving me a big headache. Anybody have any ideas?
What I've done is:
<div id="#mainsection"></div>
The border is created in CSS:
#mainsection:after {
content: '';
position: absolute;
top: 40px;
right: 40px;
bottom: 40px;
left: 40px;
border: 4px solid #96896C;
}
What I've realised is that this is not going to work as I need every border-part as separate items.
You could perhaps use linear gradients and a couple of ::before and ::after pseudo elements. This wont give you entirely separate animations but the horizontal and vertical borders can be animated separately.
body, html {
height: 100%;
}
#mainsection {
height: 100%;
position: relative;
background: url(https://placehold.it/1000x1000) center center;
}
#mainsection:after {
content: '';
position: absolute;
top: 40px;
right: 40px;
bottom: 40px;
left: 40px;
background-image: linear-gradient(black, black), linear-gradient(transparent, transparent), linear-gradient(black, black);
background-repeat: no-repeat;
background-size: 2px 0%, calc(100% - 4px) 100%, 2px 0%;
background-position: left bottom, 0 0, right top;
transition: background-size 1.5s ease;
}
#mainsection:before {
content: '';
position: absolute;
top: 40px;
right: 40px;
bottom: 40px;
left: 40px;
background-image: linear-gradient(black, black), linear-gradient(transparent, transparent), linear-gradient(black, black);
background-repeat: no-repeat;
background-size: 0% 2px, calc(100% - 4px) 100%, 0% 2px;
background-position: left bottom, 0 0, right top;
transition: background-size 2s ease .5s; /* .5s delay */
}
#mainsection:hover:after {
background-size: 2px 100%, calc(100% - 4px) 100%, 2px 100%;
}
#mainsection:hover:before {
background-size: 100% 2px, calc(100% - 4px) 100%, 100% 2px;
}
<div id="mainsection"></div>
A similar solution to #Turnip but by simply using multiple gradient on the same div. And you can control the animation of each one by playing with initial and final values of background-size and background-position:
body {
margin:0;
}
.container {
height: 100vh;
padding:40px;
background:
linear-gradient(#000,#000) top right content-box,
linear-gradient(#000,#000) top right content-box,
linear-gradient(#000,#000) bottom left content-box,
linear-gradient(#000,#000) bottom left content-box,
url(https://placehold.it/1000x1000) center center;
background-size:0 3px,3px 0,0 3px,3px 0,auto;
background-repeat:no-repeat;
transition:2s;
box-sizing:border-box;
}
.container:hover {
background-size:
100% 3px,
3px 100%,
100% 3px,
3px 100%,
auto; /* This is for image */
}
<div class="container"></div>
Then simply adjust the position to control the animation:
body{
margin:0;
}
.container {
height: 100vh;
padding:40px;
background:
linear-gradient(#000,#000) top left content-box,
linear-gradient(#000,#000) top right content-box,
linear-gradient(#000,#000) bottom right content-box,
linear-gradient(#000,#000) bottom left content-box,
url(https://placehold.it/1000x1000) center center;
background-size:0 3px,3px 0,0 3px,3px 0,auto;
background-repeat:no-repeat;
transition:2s;
box-sizing:border-box;
}
.container:hover {
background-size:
100% 3px,
3px 100%,
100% 3px,
3px 100%,
auto; /* This is for image */
}
<div class="container"></div>
Another one:
body {
margin:0
}
.container {
height: 100vh;
padding:40px;
background:
linear-gradient(#000,#000) top content-box,
linear-gradient(#000,#000) right content-box,
linear-gradient(#000,#000) bottom content-box,
linear-gradient(#000,#000) left content-box,
url(https://placehold.it/1000x1000) center center;
background-size:0 3px,3px 0,0 3px,3px 0,auto;
background-repeat:no-repeat;
transition:2s;
box-sizing:border-box;
}
.container:hover {
background-size:
100% 3px,
3px 100%,
100% 3px,
3px 100%,
auto; /* This is for image */
}
<div class="container"></div>
Related
I am trying to make my scrollbar change color,gradient like, when scrolling. Now it is fixed to a gradient color no matter if it is on top or bottom of the page.
Can this happen? Chnge color on scroll?
EDIT:
/* width */
::-webkit-scrollbar {
width: 19px;
}
/* Track */
::-webkit-scrollbar-track {
background: rgba(0,0,0,1);
border-color:black;
border-radius:20px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-image: linear-gradient(to bottom, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: scroll-gradient 5s ease infinite;
background-size: 100% 100%;
border-radius:20px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #7333B1;
}
body {
height:100vw;
}
<body>
<h1 style="height:200px">hello</h1>
</body>
As you can see the bar is static gradient. Is there any way to make the scrolbarr gradient change when scrolling?
I've edited your code a bit, I hope it's what you were looking for.
/* width */
body::-webkit-scrollbar {
width: 19px;
}
/* Added here the linear gradient. From 0% to 100%. Use rgba for better results */
body::-webkit-scrollbar-track {
background: linear-gradient(0deg, #ee7752, #e73c7e 0%, #23a6d5, #23d5ab 100%);
border-color: black;
border-radius: 20px;
}
/* Added background: transparent */
body::-webkit-scrollbar-thumb {
background: transparent;
animation: scroll-gradient 5s ease infinite;
background-size: 100% 100%;
border-radius: 20px;
/* box shadow. If we set it to an enormous value with zero blur, it will cover all space around the scrollbar handle */
box-shadow: 0px 0px 0px 100000vh black;
}
/* You need this? I think no. */
/*::-webkit-scrollbar-thumb:hover {
background: #7333B1;
}*/
/*Changed size to view the changes*/
body {
height: 150vw;
}
<body>
<h1 style="height:200px">hello</h1>
</body>
I am currently making an animation that will apply a gradient mask on an image. The mask is a transparent mask and it will transform from right to left of the image. Here is my code.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100vh;
width: 100vw;
background-color: white;
position: relative;
}
.first {
background-image: url('https://i.ibb.co/17zzm7P/flower.jpg');
background-size:cover;
position: absolute;
height: 100%;
width: 100%;
-webkit-mask-image: linear-gradient(to left, transparent 0px, black 20rem, black);
-webkit-animation: rightToLeft 5s forwards;
}
#keyframes rightToLeft {
0% {
-webkit-mask-position: 100vw 0%;
mask-position: 100vw 0%;
}
100% {
-webkit-mask-position: 0vw 0vw;
mask-position: 0vw 0vw;
}
}
</style>
</head>
<body>
<div class="container">
<div id="first" class="first"> </div>
</div>
</body>
</html>
Basically, the animation works well. However, the mask image is only applied to a specific area when it moves from right to left. Because the mask is transparent, I expect when it moves to the new area, the previous area it passed through is also transparent. How can I do to make the previous area transparent too?
Thank you so much for your time.
You are almost good, you only need to disable the repetition by using mask-repeat: no-repeat
.container {
height: 100vh;
background-color: white;
position: relative;
}
.first {
background-image: url('https://i.ibb.co/17zzm7P/flower.jpg');
background-size: cover;
position: absolute;
height: 100%;
width: 100%;
-webkit-mask-image: linear-gradient(to left, transparent, black 20rem);
-webkit-mask-repeat: no-repeat;
-webkit-animation: rightToLeft 5s forwards;
}
#keyframes rightToLeft {
0% {
-webkit-mask-position: 100vw 0%;
mask-position: 100vw 0%;
}
100% {
-webkit-mask-position: 0vw 0vw;
mask-position: 0vw 0vw;
}
}
body {
margin:0;
}
<div class="container">
<div id="first" class="first"> </div>
</div>
I'm trying to make arc shape of pseudo-element of the parent div, I'm trying to achieve this look by using clip-path, this is simplified example of the look that I'm after:
I'm kinda limited in what I can change in the current markup, background color is dynamic and that's why I need to inherit it in pseudo element and also there is background image in that whole container. That's why I'm trying to do this with pseudo-elements and clip-path. This is what I tried:
div {
position: relative;
background: rgba(0,0,0,0.5);
height: 100px;
width: 100px;
margin: 100px auto;
}
div:before {
content: '';
position: absolute;
z-index: 2;
height: 50px;
width: 50px;
right: -50px;
bottom: 0;
background: inherit;
clip-path: polygon(0 100%, 0 0, 3% 15%, 6% 27%, 11% 34%, 19% 43%, 26% 53%, 35% 63%, 46% 71%, 54% 77%, 65% 83%, 70% 86%, 81% 91%, 91% 95%, 100% 100%);
}
<div></div>
But as you can see it's far from perfect, you can see the points and it doesn't have that smooth arc look. I'm using SCSS, also I'm open to any JS suggestions.
This is a job for mask:
div {
position: relative;
background: rgba(0,0,0,0.5);
height: 100px;
width: 100px;
margin: 100px auto;
}
div:before {
content: '';
position: absolute;
z-index: 2;
height: 50px;
width: 50px;
left:100%;
bottom: 0;
background: inherit;
-webkit-mask:radial-gradient(farthest-side at top right,transparent 99%,#fff 100%);
mask:radial-gradient(farthest-side at top right,transparent 99%,#fff 100%);
}
<div></div>
I am working on a navigation bar. I have uploaded an image in which I have made a red circle. I have to make that shape. How can I make it? How can I create this kind of shape in a single div
Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>CSS Shape</title>
<style>
.triangletwo {
width:100px;
height:100px;
display:inherit;
opacity:0;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
clip-path: polygon(100% 0, 0 0%, 50% 80%);
}
</style>
</head>
<body>
<div style="width: 200px; height: 200px; overflow: hidden; margin: 0px; display: inline-block; clip-path: polygon(100% 0, 0 0%, 50% 80%);">
</div>
<div style="width: 100px; height: 100px; overflow: hidden; background: #6d74a3; margin-left:-100px; display: inline-block;clip-path: polygon(50% 0, 0 80%, 100% 80%);">
</div>
<div style="width: 100px; height: 100px; overflow: hidden; background: #6d74a3; margin-left:-42px; margin-bottom: -20px; display: inline-block; clip-path: polygon(100% 0, 0 0%, 50% 80%);">
<div class="triangletwo" style="display: inline-block;"></div>
</div>
</body>
</html>
Yes, you can create it using a div with text inside. Hope this help
.single-div {
background-color: #a224a2;
color: white;
font-size: 25px;
width: 150px;
height: 100px;
position: relative;
clip-path: polygon(30% 0, 40% 25%, 100% 25%, 70% 99%, 60% 76%, 0 75%);
display: flex;
}
.text {
margin: auto;
}
<div class="single-div">
<span class="text">Home</span>
</div>
.clients-img::after {
content: '';
position: relative;
background-image: url('https://i.stack.imgur.com/Y2vyB.png');
background-repeat: no-repeat;
float: left;
margin-left: 15px;
transition: all 1.8s ease;
width: 135px;
height: 135px;
}
.clients-slider-inside img {
border-radius: 50%;
position: absolute;
padding: 14px;
left: 0px;
top: 0px;
width: 135px;
height: 135px;
}
.clients-img:hover::after {
transform: rotate(360deg) translate(0px);
}
<div class="clients-slider-inside">
<div class="clients-img"> <img src="https://i.stack.imgur.com/tz2aw.png" alt="clients img"> </div>
</div>
On Mouse hover rotate 360 degree and On Mouse out no any effect.
This type gradient border. So can you please help me for perfect rotation in circle.
You can avoid using an image and recreate the gradient using multiple linear-gradient on the background of the container. Then the idea is to rotate the whole container and rotate the image in the opposite direction so you create the effect of background rotation.
.clients-img {
display: inline-block;
position: relative;
border-radius: 50%;
background: linear-gradient(to right, #fff 50%, transparent 50%), linear-gradient(-15deg,#6fda44 25%, #fff 80%);
transition:1s all;
}
.clients-img img {
border-radius: 50%;
width: 135px;
height: 135px;
padding: 15px;
vertical-align: top;
transition:1s all;
}
.clients-img:hover {
transform: rotate(360deg);
}
.clients-img:hover img{
transform: rotate(-360deg);
}
<div class="clients-img"> <img src="https://i.stack.imgur.com/tz2aw.png" alt="clients img"> </div>