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>
Related
This question already has answers here:
Dashed border animation in css3 animation
(7 answers)
Closed 7 months ago.
I'm trying to animate a border of a logo that's just two letters. I can't figure out how to animate the border of my logo so I resorted to creating 4 divs with different borders (top, down, left, right) and animate them one by one. However, the animation isn't seamless as it keeps snapping back to its original location, and the div wrapper I created can't contain the animation overflowing outside.
I'm new to css animations so I'm wondering if there is a way to make an animated moving dashed border for a logo.
Here's my jsfiddle (first time using jsfiddle so let me know if the link doesnt work)
/* div border for top */
.logo-border-up {
background-color: transparent;
border-top: 10px dashed #252422;
width: 5rem;
height: 10px;
position: absolute;
animation: animate-up 1s linear infinite;
}
#keyframes animate-up {
0% {
transform: translatex(0%);
}
100% {
transform: translatex(100%);
}
Edit: I managed to solve it. Thanks to this stackoverflow Dashed border animation in css3 animation
To eliminate the animation snapping back to the beginning when it reaches the end, a minor modification can be applied to your existing code:
position: relative
Your animation will now be contained within <div class="logo-wrapper">.
As the moving border is just a visual clue rather than part of the content here is a snippet which draws and animates it using pseudo elements rather than putting extra elements into the DOM.
linear-gradients are used to draw background images of dashes which are repeated in the horizontal or vertical direction as appropriate.
The background positions are then animated using CSS keyframes.
The after and before pseudo elements are made slightly bigger than the wrapper and positioned so the borders are slightly outside.
The logo characters are centered within the wrapper using flex.
Sizing of the dashes is done relative to the size of the wrapper rather than mixing px and rem values which can make things difficult to adjust relatively (rem can be changed for example).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Logo</title>
<style>
body {
background-color: #FFFCF2;
}
.logo-wrapper {
width: 5rem;
aspect-ratio: 1 / 1;
roverflow: hidden;
position: relative;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
font-family: 'Poppins', sans-serif;
font-size: 3rem;
text-decoration: none;
font-weight: 700;
color: #252422;
/* border: 0.5rem dashed #252422; */
}
.logo-wrapper::before,
.logo-wrapper::after {
content: '';
position: absolute;
top: -5%;
left: -5%;
width: 110%;
aspect-ratio: 1 / 1;
overflow: hidden;
animation: var(--name) 2s linear infinite;
}
.logo-wrapper::before {
background-image: linear-gradient(to right, #252422 0 50%, transparent 50% 100%), linear-gradient(to right, transparent 0 50%, #252422 50% 100%);
background-size: 25% 6.25%;
background-repeat: repeat no-repeat;
background-position: 0 0, 100% 100%;
--name: horizMove;
}
.logo-wrapper::after {
background-image: linear-gradient(#252422 0 50%, transparent 50% 100%), linear-gradient(transparent 0 50%, #252422 50% 100%);
background-size: 6.25% 25%;
background-repeat: no-repeat repeat;
background-position: 100% 0, 0 100%;
--name: vertMove;
}
#keyframes horizMove {
0% {
background-position: 0 0, 100% 100%;
}
100% {
background-position: 100% 0, 0 100%;
}
}
#keyframes vertMove {
0% {
background-position: 100% 0, 0 100%;
}
100% {
background-position: 100% 100%, 0 0;
}
}
/*
.logo-border-up {
background-color: transparent;
border-top: 10px dashed #252422;
width: 5rem;
height: 10px;
position: absolute;
animation: animate-up 1s linear infinite;
}
*/
#keyframes animate-up {
0% {
transform: translatex(0%);
}
100% {
transform: translatex(100%);
}
}
#keyframes animate-down {
0% {
transform: translatex(0%);
}
100% {
transform: translatex(-100%);
}
}
</style>
</head>
<body>
<nav>
<div class="logo-wrapper">
<div class="logo-border-up"></div>
bt
</div>
</nav>
</body>
</html>
Note: setting all background colors as is done in the code given in the question can lead to unexpected results. This snippet has removed that and put the background color on the 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>
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>
Overview
I have a #container element which houses a centered element .center.
This web-app will be fullscreen on a number of monitors of various width and height; some portrait and some landscape.
The .center element is significantly smaller than its parent #container, and on larger screens, it sits in the middle with lots of space between the wrapper and the edges, both horizontally and vertically.
Issue
I am trying to figure out a way to expand the .center so that it scales (all its contents scaling equally, including images and font size) until either:
its width is equal to the width of #container, or
its height is equal to the height of #container
I am aware of the CSS3 transform: scale() functions, however as the height and width of the #container is unknown and variable, I don't know how to scale all elements dynamically.
How can this be achieved?
Code
#container {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: rgb(37, 66, 141);
background: -moz-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
background: radial-gradient(ellipse at center, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25428d', endColorstr='#000000', GradientType=1);
}
#wrapper {
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
height: 100%;
width: 100%;
text-align: center;
z-index: 2;
}
#wrapper .center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
* {
color: white;
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.62em;
}
#logo {
margin: 40px 0;
}
#pulsor {
-webkit-animation: pulsate 60s linear 0s infinite;
-moz-animation: pulsate 60s linear 0s infinite;
-animation: pulsate 60s linear 0s infinite;
text-shadow: 0 0 8px #ccc;
}
#-webkit-keyframes pulsate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes pulsate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes pulsate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
body,
html {
margin: 0;
padding: 0;
}
<div id="container">
<div id="overlay"></div>
<div id="wrapper">
<div class="center">
<h1>Tonight at</h1>
<div id="logo"><img src="http://design.ubuntu.com/wp-content/uploads/logo-ubuntu_cof-orange-hex.png" id="pulsor" width="280"></div>
<h2>Theatre</h2>
<p>19:30 - Les Miserables</p>
<p>20:30 - A cheeky Indian take-away</p>
<p></p>
<h2>Devant Room</h2>
<p>17:30 - My Favourite Books with JK Rowling</p>
<p>18:00 - Look! I did a sleight of hand! Just kidding with Lennart Green</p>
<p>19:30 - Old people grumbling about the number of steps to the Theatre</p>
</div>
</div>
</div>
If you want to scale everything you can use em or pt to set sizes for everything including image widths and padding. Then you can use vw or vmin on the font size to scale everything according to screen size.
padding:1em;
width:30em;
font-size:2vw;
Here is an example:
https://jsfiddle.net/5ezu2gLu/
Also, you can control the minimum and maximum sizes, on whatever you wish. More info here: http://madebymike.com.au/writing/precise-control-responsive-typography/
Try these changes:
Remove the center DIV from your HTML.
And change the following CSS:
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: rgb(37, 66, 141);
background: -moz-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
background: radial-gradient(ellipse at center, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25428d', endColorstr='#000000', GradientType=1);
}
#wrapper {
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
#logo img {
max-width: 100%;
}
Here's an updated EXAMPLE
This basically scales the elements as the viewport width is reduced, however, I would advise using #media() queries to be more precise when scaling fonts etc.
I currently have a sphere shape but, I'm trying to think of a way on how to rotate it in a circle on my website this is my current code:
<style>
b.ball {
display: block;
width: 200px;
height: 200px;
margin: 30px auto 0;
background-color: #3b4ba3;
border-radius: 50%;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
}
<style>
<b class="ball"></b>
The code above puts a shape on the page.
How Would I rotate this sphere so it spins around? Not around the whole page but just in it's own area, not the entire page though. I've Googled it and I have not anything that particularly addresses this question that I've seen yet.
You can use css-animations:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
to animate a transform:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms
Just add in:
.ball {
animation: spin 3s linear infinite;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
You'll need to use prefixes though, which I've included in the demo: http://jsfiddle.net/99bds/