I have a problem, I want to make my login page background image rotated. I have problem with style code because of following code ;
body{font-family:Arial, Helvetica, sans-serif;font-size:13px;background:#020307 url(/media/images/bg.jpg) no-repeat ;background-position:top center ;color:#fff;}
And in that i need to insert this code ;
#myDIV {
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
50% {-webkit-transform: rotate(180deg);}
}
/* Standard syntax */
#keyframes mymove {
50% {transform: rotate(180deg);}
}
I know i cant right now just add the secound code in first code, but i try to combine them but it rotate all the background content not the background image. Can someone please give me a tips how to make it work only on background image ? Right now i need to just option to rotate background image. Will configure the code later to my specifications.
Thanx and sorry for bad English!
You can do like following way:
body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
position: relative;
height:500px;
width:100%;
}
body::before {
animation: 5s ease 0s normal none infinite running mymove;
background: #020307 url(/media/images/bg.jpg) no-repeat scroll center top;
color: #fff;
content: "";
height: 100%;
position: absolute;
width: 100%;
z-index: -9999;
}
#myDIV {
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: coral;
color: white;
}
Here is your edited code. Check Fiddle
Related
I'm trying to create a loading DIV that has a border that looks like an indeterminate progress ring spinner.
I'm pretty close based on one of the examples on https://css-tricks.com/gradient-borders-in-css/
This is great when the border doesn't rotate. When you set the border in the :before element to match the transparent border in the gradient-box element then the static gradient border looks perfect.
However, once the animation is added, because the whole :before element rotates you get a pretty odd effect - as shown in the example below.
.gradient-box {
display: flex;
align-items: center;
width: 90%;
margin: auto;
max-width: 22em;
position: relative;
padding: 30% 2em;
box-sizing: border-box;
border: 5px solid blue;
color: #FFF;
background: #000;
background-clip: padding-box; /* !importanté */
border: solid 5px transparent; /* !importanté */
border-radius: 1em;
}
.gradient-box:before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
margin: -35px; /* !importanté */
border-radius: inherit; /* !importanté */
background: conic-gradient(#0000ff00, #ff0000ff);
-webkit-animation: rotate-border 5s linear infinite;
-moz-animation: rotate-border 5s linear infinite;
-o-animation: rotate-border 5s linear infinite;
animation: rotate-border 3s linear infinite;
}
#keyframes rotate-border {
to {
transform: rotate(360deg);
}
}
html { height: 100%; background: #000; display: flex; }
body { margin: auto; }
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Loading DIV Test</title>
</head>
<body>
<div id="loadingBox" class="gradient-box">
<p>Loading.</p>
</div>
</body>
I've tried playing about with overflow: hidden; but the border just disappears.. is there any way to 'mask' the :before element in a way that whatever is behind this loading Div is still visible behind it and so that the border stays as its intended width?
Basically, my goal is that the colour gradient in the border rotates to give the effect of a spinning/rotating edge.
I like your original idea with using overflow: hidden, but to make it work I had to include an extra wrapper div.
The outer wrapper defines a padding which serves as the display area for the gradient border
The inner div is just the content box with a black background
.loading-box-container {
--size: 200px;
--radius: 10px;
position: relative;
width: var(--size);
height: var(--size);
padding: var(--radius);
border-radius: var(--radius);
overflow: hidden;
}
.loading-box {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #000;
border-radius: var(--radius);
}
.loading-box-container::before {
content: '';
width: 150%; /* The upscaling allows the box to fill its container even when rotated */
height: 150%;
position: absolute;
top: -25%; left: -25%;
background: conic-gradient(#0000ff00, #ff0000ff);
animation: rotate-border 5s linear infinite;
}
#keyframes rotate-border {
to {
transform: rotate(360deg);
}
}
<div class="loading-box-container">
<div class="loading-box">
<p>Loading</p>
</div>
</div>
An alternative: Using #property
There's a much more elegant solution using #property, but unfortunately it only works on Chrome. I'm including here in case one day it becomes more universally supported or support for other browsers isn't important for your use case.
The conic-gradient function has a parameter that allows you to specify at what angle the gradient starts. If we can animate just that parameter, perhaps using a CSS variable, then we can animate the border with just a single div and without actually rotating anything.
Unfortunately, without some hinting the browser doesn't know how to transition a CSS variable. Therefore, we use #property to indicate the variable is an angle, telling the browser how to transition it.
#property --rotation {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.loading-box {
--size: 200px;
--radius: 10px;
position: relative;
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #000;
border-radius: var(--radius);
margin: var(--radius);
}
.loading-box::before {
--rotation: 0deg;
content: '';
width: calc(100% + 2 * var(--radius));
height: calc(100% + 2 * var(--radius));
border-radius: var(--radius);
position: absolute;
top: calc(-1 * var(--radius)); left: calc(-1 * var(--radius));
background: conic-gradient(from var(--rotation), #0000ff00, #ff0000ff);
animation: rotate-border 5s linear infinite;
z-index: -1;
}
#keyframes rotate-border {
to {
--rotation: 360deg;
}
}
<div class="loading-box">
<p>Loading</p>
</div>
CanIUse for #property indicates this will only work in Chrome and Edge as of this post.
Hi is this what you are looking for?
What I did was I added a new div which will be the "mask" as well as a container div for both the mask and the loadingBox.
I then sized the mask to be a little larger than your visible area, make it a transparent background, and then gave it a large outline the same color as your background to effectively mask out a border. I then fiddled with z-indexs of the mask, the loadingbox and the before. I also added some actual borders on mask to box it out into a nice shape.
Take a look:
.gradient-box {
display: flex;
align-items: center;
width: 90%;
margin: auto;
max-width: 22em;
position: relative;
padding: 30% 2em;
box-sizing: border-box;
border: 5px solid blue;
color: #FFF;
background: #000;
background-clip: padding-box; /* !importanté */
border: solid 5px transparent; /* !importanté */
border-radius: 1em;
}
.gradient-box:before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -3;
margin: -35px; /* !importanté */
border-radius: inherit; /* !importanté */
background: conic-gradient(#0000ff00, #ff0000ff);
-webkit-animation: rotate-border 5s linear infinite;
-moz-animation: rotate-border 5s linear infinite;
-o-animation: rotate-border 5s linear infinite;
animation: rotate-border 3s linear infinite;
}
#keyframes rotate-border {
to {
transform: rotate(360deg);
}
}
html { height: 100%; background: #000; display: flex; }
body { margin: auto; }
.mask {
position: absolute;
box-sizing: border-box;
background-color: transparent;
outline: 65px solid black;
height: 100%;
width: 100%;
border: 2px solid black;
border-left: 7px solid black;
border-right: 7px solid black;
z-index: -1;
}
.container {
position: relative;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Loading DIV Test</title>
</head>
<body>
<div class="container">
<div class="mask"></div>
<div id="loadingBox" class="gradient-box">
<p>Loading.</p>
</div>
</div>
</body>
So basically, I am trying to create a progress bar. In this example, I will just change the colors I was using to red, green and blue instead since that's obviously easier to understand than a load of hex values. Effectively, what I am going for is for the progress bar to have this RGB gradient background that gives the impression the gradient is moving from left to right, to signify that there is still activity (i.e. that the site hasn't frozen). I've tried a few things, starting with just setting background: linear-gradient(120deg, red, green, blue) and animating the background-position CSS property to simulate the gradient moving. However, once at the end of the animation, the progress bar jumped from being mostly blue (i.e. the end of the gradient), right back to green...I then tried manually-reflecting the gradient in the form rgbgr - i.e. background: linear-gradient(120deg, red, green, blue, green, red) and, while this looks better, there is still jumpiness. Finally, I tried using the repeating-linear-gradient CSS function - i.e. background: repeating-linear-gradient(120deg, red, green, blue, green, red). This is the closest to what I'm aiming for, but in the example, you can see the gradient colors 'jumping', rather than animating smoothly
html, body{
height: 100%;
background: #222;
overflow: hidden;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
*{
color: white;
font-family: 'Tahoma', sans-serif;
}
#wrapper {
height: 50px;
width: 400px;
position: relative;
background: #131313;
}
p{
text-align: center;
position: absolute;
width: 100%;
}
#bar {
background: repeating-linear-gradient(120deg, red,green,blue, green, red);
background-repeat:repeat-x;
height: 100%;
position: absolute;
background-size: 400% 100%;
-webkit-animation: AnimationName 3s linear infinite;
-moz-animation: AnimationName 3s linear infinite;
animation: AnimationName 3s linear infinite;
}
#-webkit-keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#-moz-keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
<div id="wrapper">
<div id="bar" style="width: 50%"></div>
<p>Downloading 5 of 10</p>
</div>
I've seen this effect on many sites before, so I assume it's possible in CSS. If anyone can point me in the right direction, I'd appreciate it. Thanks!
You can do it like below and it will work with any angle you want:
body {
background: #222;
}
.wrapper {
--d:100px;
--angle:120deg;
--sinus:0.866; /* = sinus(angle) */
height: 50px;
width: 400px;
position: relative;
z-index:0;
background: #131313;
text-align: center;
line-height:50px;
color: white;
margin:5px;
}
.wrapper::before {
content:"";
height: 100%;
left:0;
width:var(--w);
position: absolute;
z-index:-1;
background: repeating-linear-gradient(var(--angle), red, green, blue, green, red var(--d));
background-size: calc(var(--d)/var(--sinus)) 100%;
animation: AnimationName 2s linear infinite reverse;
}
#keyframes AnimationName {
0% {
background-position: calc(var(--d)/var(--sinus)) 0;
}
}
<div class="wrapper" style="--w:50%;">
Downloading 5 of 10
</div>
<div class="wrapper" style="--w:70%;--d:200px;--angle:45deg;--sinus:0.707">
Downloading 5 of 10
</div>
<div class="wrapper" style="--w:80%;--d:50px;--angle:-30deg;--sinus:0.5">
Downloading 5 of 10
</div>
You need to run the animation a bit longer before looping back.
#keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:-33% 50%} /* instead of 0% 50% */
}
I also changed the gradient angle to 90deg because the initial value makes the start and end of the gradient not matching very well
/* instead of 120deg */
background: repeating-linear-gradient(90deg, red,green,blue, green, red);
html, body{
height: 100%;
background: #222;
overflow: hidden;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
*{
color: white;
font-family: 'Tahoma', sans-serif;
}
#wrapper {
height: 50px;
width: 400px;
position: relative;
background: #131313;
}
p{
text-align: center;
position: absolute;
width: 100%;
}
#bar {
background: repeating-linear-gradient(90deg, red,green,blue, green, red);
background-repeat:repeat-x;
height: 100%;
position: absolute;
background-size: 400% 100%;
animation: AnimationName 3s linear infinite;
}
#keyframes AnimationName {
0%{background-position:100% 50%}
100%{background-position:-33% 50%}
}
<div id="wrapper">
<div id="bar" style="width: 50%"></div>
<p>Downloading 5 of 10</p>
</div>
Two questions:
I found a pretty cool font animation on Codepen, but lost the link for it. I have been looking for it online for the past hour and with no luck!
But anyways, there is a issue with this code. Firefox won't give me the results I want. I have tried adding -moz- to most of the code, but the same background image appears like in the picture I have below.
Is this just not possible with Firefox?
My second question is: I wanted the font to change text with a kind of fade in effect when you hover over a button. I managed that but the animation on the hover text does not move. I am guessing this is because there are two animations attached to the div; is there a way around this?
How can I fix these issues? Thanks for your time.
.font{
position:fixed;
width: 100%;
left: 5%;
top: 5%;
}
.font:before{
position:absolute;
content:"TEST";
top: -10px;
font: 700 5em/1 "Orbitron", sans-serif;
letter-spacing: 0;
padding:.25em 0.325em;
display: block;
margin: 0 auto;
text-shadow: 0 0 80px rgba (255,255,255,.5);
background: url(https://media.24ways.org/2008/02/pattern-howto01.gif) repeat-y;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-moz-animation: aitf 10s linear infinite;
-moz-transform: translate3d(0,0,0);
-moz-backface-visibility: hidden;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: aitf 10s linear infinite;
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}
#keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
#-webkit-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
#-moz-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.icon {
position: relative;
width: 50px;
height: 50px;
top: 150px;
border-radius: 50%;
border: solid 5px black;
cursor: pointer;
font-size: 30px;
text-align: center;
vertical-align: middle;
line-height: 50px;
margin: 0 0.8%;
background: #730A0C;
}
.icon:hover ~ .font:before{
content:"TEST2";
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;
background-position: center;
}
/*Fade Inn Animation*/
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*Fade Inn Animation*/
<div class="icon"> </div>
<div class="font"> </div>
The text-fill-color property is not available in Firefox until Firefox 48 comes out in August of 2016. The only browers that support this property right now are Chrome, Safari, and Opera using the -webkit- prefix.
I needed spinning effect on hover of that square, what i can get is written below.
HTML
<div class="mainSquare">
<div class="firstInnerSquare">
<div class="lastInnerSquare">
Hello
</div>
</div>
</div>
CSS
.mainSquare{
width:160px;
height:160px;
background:black;
margin: 50px auto;
padding:25px;
}
.firstInnerSquare{
width:110px;
height:110px;
background:red;
padding:25px;
}
.lastInnerSquare{
text-align:center;
width:110px;
padding: 46px 0px;
background:white;
}
Fiddle
Hope to get help.
You can do this by using a single element and two pseudos. Make the 2 pseudo elements larger than the container element, position them behind the container and add a rotate animation to them.
Note: This is only a base sample that would help you get started. I would leave the fine tuning part for you to handle. You can read more about the CSS animation properties in this MDN page.
.shape {
position: relative; /* used to position the pseudos relative to the parent */
height: 100px;
width: 100px;
background: white;
border: 1px solid;
margin: 100px; /* required because children are larger than parent */
}
.shape:after,
.shape:before {
position: absolute;
content: '';
}
.shape:before {
height: 125%; /* make one pseudo 25% larger than parent */
width: 125%;
top: -12.5%; /* 25/2 to make sure its center is same as the parent's */
left: -12.5%; /* 25/2 to make sure its center is same as the parent's */
background: red;
z-index: -1; /* send it behind the parent */
}
.shape:after {
height: 150%; /* make this pseudo larger than the parent and the other pseudo */
width: 150%;
top: -25%; /* 50/2 to make sure its center is same as the parent's */
left: -25%; /* 50/2 to make sure its center is same as the parent's */
background: black;
z-index: -2; /* send it behind both the parent and other pseudo */
}
/* add animation when hovering on parent */
.shape:hover:before {
animation: rotate 3s linear infinite;
}
.shape:hover:after {
animation: rotate-rev 3s linear infinite;
}
#keyframes rotate {
to {
transform: rotate(359deg); /* some browsers don't display spin when it is 360 deg */
}
}
#keyframes rotate-rev {
to {
transform: rotate(-359deg); /* reverse direction rotate */
}
}
<div class='shape'></div>
Here's one with the original structure and just one keyframe statement:
All that needs changing, per div, is the animation duration and direction. The "middle" div's timing needs to be 50% of the outer/inner.
.mainSquare {
width: 160px;
height: 160px;
background: black;
margin: 50px auto;
padding: 25px;
animation: spin 2s infinite linear;
}
.firstInnerSquare {
width: 110px;
height: 110px;
background: red;
padding: 25px;
animation: spin 1s infinite linear reverse;
}
.lastInnerSquare {
text-align: center;
width: 110px;
padding: 46px 0px;
background: white;
animation: spin 2s infinite linear;
}
#keyframes spin {
to {
transform: rotate(1turn);
}
}
<div class="mainSquare">
<div class="firstInnerSquare">
<div class="lastInnerSquare">
Hello
</div>
</div>
</div>
i have to show text effects on page load of website i.e to Animate div from top to middle of page only with Css without jquery or java script.
my div css
#body_welcome_content{ width:450px; margin: 205px auto 0; font-size:48px; font-family: 'Playball', cursive; text-align:center; color:#FFF; margin-top:35px; text-shadow: 0px 1px 0px #000;
}
help me out as new to CSS. also make sure for inter browser compatibility so that it works on all browsers.[Without jquery]
Thanks in advance
You can simply do that using #keyframes
Demo
div {
width: 300px;
height: 300px;
background: red;
animation: centerme 2s;
-webkit-animation: centerme 2s;
position: absolute;
z-index: 999; /* To ensure that box is always on the top */
animation-fill-mode: forwards; /* So that box doesn't move back to default place*/
-webkit-animation-fill-mode: forwards;
}
#keyframes centerme {
0% {left: 0; top: 0;}
100% {left: 50%;top: 50%;margin-top: -150px;margin-left: -150px;}
/* Left and Top are 50% with margins which are half of width and height */
}
#-webkit-keyframes centerme {
0% {left: 0;}
100% {left: 50%;margin-left: -150px;}
}