How to Inherit properties in css? I have a class:
.drop-shadow-red {
font-size: 1.5vh;
padding: 0.4vh 0.7vh;
background: url(../images/redInvert.png) no-repeat center left;
background-position: 8px 50%;
background-size: 2vh;
background-color: rgba(250, 210, 50, 0.9);
font-weight: bold;
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
-moz-border-radius: 12px 12px 0 0;
border-radius: 0.1vh 0;
height: auto;
max-width: 100%; /* Max Width of the popover (depending on the container!) */
z-index: 99;
animation: blinkBorder .6s step-end infinite alternate;
animation-timing-function: ease-in-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
And I want now to create another class .drop-shadow-yellow that has all properties like .drop-shadow-red but the only change is that background-color is yellow. How to optimize the code to not duplicate so much code, like:
.drop-shadow-yellow {
font-size: 1.5vh;
padding: 0.4vh 0.7vh;
background: url(../images/redInvert.png) no-repeat center left;
background-position: 8px 50%;
background-size: 2vh;
background-color: yellow; /* <-------------------------------------- */
font-weight: bold;
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
-moz-border-radius: 12px 12px 0 0;
border-radius: 0.1vh 0;
height: auto;
max-width: 100%; /* Max Width of the popover (depending on the container!) */
z-index: 99;
animation: blinkBorder .6s step-end infinite alternate;
animation-timing-function: ease-in-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
Just create a class with all properties but background-color and name it for example drop-shadow.
Now you just create additional classes like red-bg and add background-color: red and pass the drop-shadow class as well as the background class to an object.
Example:
CSS:
.drop-shadow {
font-size: 1.5vh;
padding: 0.4vh 0.7vh;
background: url(../images/redInvert.png) no-repeat center left;
background-position: 8px 50%;
background-size: 2vh;
font-weight: bold;
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
-moz-border-radius: 12px 12px 0 0;
border-radius: 0.1vh 0;
height: auto;
max-width: 100%; /* Max Width of the popover (depending on the container!) */
z-index: 99;
animation: blinkBorder .6s step-end infinite alternate;
animation-timing-function: ease-in-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
.red-bg{
background-color: rgba(250, 210, 50, 0.9);
}
HTML:
<div class="drop-shadow red-bg">Foo Bar!</div>
If you want to change only one property do it inline style and take everything else from the css.
Related
I purchased a template which have left side Bar with below properties :
.sidebar {
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
font-family: "Roboto", sans-serif;
background: #fdfdfd;
width: 300px;
overflow: hidden;
display: inline-block;
height: calc(100vh - 70px);
position: fixed;
top: 70px;
left: 0;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
z-index: 11 !important;
and content have below Properties :
margin: 80px 315px 0 315px;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
I want to know how can I move Side bar from left to right of the content?
Note :By adding left:1040px of 100% to side bar ,it will move to left but will not be responsive to changing screen size.
I am playing around with animating shadow. I want it to work like this: When i click on box, i want class of "shadow" to be added. When it does, i want to animate shadow like it is lifting up, and when removed class, i want shadow to disappear the same way it appears (reverse). I have created keyframes and set the blur and opacity to change.
One thing i notice is, the animation is not smooth, it goes by steps. Why is it so? I want shadow animation to be smooth.
Second, how to create that shadow will also disappear in reverse when class is removed?
Here is my code so far:
const box = document.querySelector(".box");
function shadowHandle(){
box.classList.toggle("shadow");
}
box.addEventListener("click", shadowHandle);
body{
margin: 100px;
}
.box{
width: 100px;
height: 300px;
background-color: red;
}
#-webkit-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
#-moz-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
#keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
.shadow {
animation: shadow 2s forwards; /* CSS3 */
-moz-animation: shadow 2s forwards; /* Firefox */
-webkit-animation: shadow 2s forwards; /* Webkit */
}
<div class="box shadow"></div>
I think using a transition is the way to go here. It will animate back "mid-animation".
here's an example with :hover, but you can use an added class as well.
.box{
width: 100px;
height: 100px;
background: silver;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-in-out;
}
.box:hover {
box-shadow: -4px 0px 40px rgba(0, 0, 0, 1);
}
<div class="box">
</div>
You don't need Keyframes. This is much more easier with transition
const box = document.querySelector(".box");
function shadowHandle(){
box.classList.toggle("shadow");
}
box.addEventListener("click", shadowHandle);
body{
margin: 100px;
}
.box{
width: 100px;
height: 300px;
background-color: red;
box-shadow: none;
transition: all 1s ease;
}
.box.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
<div class="box"></div>
This can be simply achieved through transition
Follow the snippet below:
Add the box-shadow to class shadow
now add CSS transition to the `.box.
transition: all 1s linear
This will animate all css properties which can be animated
For a duration of 1s
In a linear rate. Other values are ease ease-in ease-out, etc
Play around and find out.
const box = document.querySelector(".box");
function shadowHandle() {
box.classList.toggle("shadow");
}
box.addEventListener("click", shadowHandle);
body {
margin: 100px;
}
.box {
width: 100px;
height: 300px;
background-color: red;
transition: all 1s linear;
}
.shadow {
box-shadow: -4px 0px 40px rgba(0, 0, 0, 1);
}
<div class="box"></div>
Added another animation class no-shadow with reverse styles.
#-webkit-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
#-moz-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
#keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
.no-shadow {
animation: no-shadow 2s forwards; /* CSS3 */
-moz-animation: no-shadow 2s forwards; /* Firefox */
-webkit-animation: no-shadow 2s forwards; /* Webkit */
}
const box = document.querySelector(".box");
function shadowHandle(){
box.classList.toggle("shadow");
box.classList.toggle("no-shadow");
}
box.addEventListener("click", shadowHandle);
body{
margin: 100px;
}
.box{
width: 100px;
height: 300px;
background-color: red;
}
#-webkit-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
#-moz-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
#keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
.shadow {
animation: shadow 2s forwards; /* CSS3 */
-moz-animation: shadow 2s forwards; /* Firefox */
-webkit-animation: shadow 2s forwards; /* Webkit */
}
#-webkit-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
#-moz-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
#keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
.no-shadow {
animation: no-shadow 2s forwards; /* CSS3 */
-moz-animation: no-shadow 2s forwards; /* Firefox */
-webkit-animation: no-shadow 2s forwards; /* Webkit */
}
<div class="box shadow"></div>
I am trying to show a CSS3 animation as a loader-animation when I navigate to one of my subpages.
I am using keyframe animation on rotateY.
The issue is that on Firefox, while navigation to another page, the animation does work, but its very jerky and choppy.
While on Chrome and Safari, the same animation works smoothly and perfectly.
Here is a fiddle:
http://jsfiddle.net/p6mgxpbo/
HTML:
<div class="gb-loading">
<div id="animatedElem" class="pin-c">
<div class='pin'></div>
</div>
<div class="pin-mirror"></div>
<div id="gb-lb" class="load-bounce"></div>
</div>
CSS:
.gb-loading {
position: fixed;
left: 0;
right: 0;
top: 50%;
bottom: 0;
width: 70px;
height: 70px;
margin: auto;
z-index: 101;
margin-top: -100px;
}
.pin-c {
width: 70px;
height: 70px;
position: absolute;
top: 0;
left: 0;
z-index: 11;
-webkit-animation: pulsate 1.5s linear infinite;
-moz-animation: pulsate 1.5s linear infinite;
-o-animation: pulsate 1.5s linear infinite;
animation: pulsate 1.5s linear infinite;
}
.pin {
width: 70px;
height: 70px;
background-color: #34baab;
position: absolute;
left: 0;
top: 0;
-webkit-border-radius: 50% 50% 50% 0;
border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.pin-mirror {
width: 70px;
height: 70px;
background-color: #003146;
position: absolute;
left: 0;
bottom: -48px;
z-index: -1;
-webkit-border-radius: 50% 0 50% 50%;
border-radius: 50% 0 50% 50%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.pin:after {
content: '';
width: 25px;
height: 25px;
margin: 22px 0 0 22px;
background-color: #003146;
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.load-bounce {
width: 25px;
height: 25px;
position: absolute;
left: 65px;
background-color: #003146;
-webkit-transform: translateZ(0.5);
-moz-transform: translateZ(0.5);
transform: translateZ(0.5);
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-animation: bounce .5s linear infinite alternate;
-moz-animation: bounce .5s linear infinite alternate;
-o-animation: bounce .5s linear infinite alternate;
animation: bounce .5s linear infinite alternate;
}
#-webkit-keyframes pulsate {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
#-moz-keyframes pulsate {
0% {
-moz-transform: rotateY(0deg);
}
100% {
-moz-transform: rotateY(360deg);
}
}
#keyframes pulsate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
#-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(-40px);
}
}
#keyframes bounce {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(-40px);
}
}
#-moz-keyframes bounce {
0% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(-40px);
}
}
The jerk only comes when Its there on a page which is loading other resources. I am trying to use this element as a pre-loading animation. So it's on the page until the rest of the page is loading. I also have google maps on the same page. So, while the browser is downloading other resources, till that time the animation jerks. You'll not be able to see the jerk on the fiddle.
Need some insights on how to fix this.
Thanks in advance !!
P.S: I did go through a lot of answers related to this on StackOverflow and tried searching on Google, but to no avail.
Sadly, this is something that you will not be able to fix, amend or control with browsers. You will have to use some form of hack to get it to work or confuse the system into doing what you want, but from a normal render, it won't work.
What you could possibly do is add a delay to the animation.
-webkit-animation: pulsate 0.8s linear 10ms infinite;
-moz-animation: pulsate 0.8s linear 10ms infinite;
-o-animation: pulsate 0.8s linear 10ms infinite;
animation: pulsate 0.8s linear 10ms infinite;
JSFiddle Example
What this will do is let the page render, paint and display, then it will wait for 100ms (0.1s) before starting the animation.
If this doesn't work, then it's down to FF not rendering animations as cleanly as Chrome or some other browsers and that is simply a browser issue and will be exceedingly difficult to get round.
Every browser has a completely different tree, render and paint process for displaying HTML & CSS to your monitor. Gecko (FF) and WebKit (Chrome) both use completely different methods and processes to display the page and sadly, when it comes to doing animations, Gecko has the tiniest amount of lag when starting up the animation which is why you see the small bit of lag/jerkiness when the animation begins.
Webkit flow
Gecko flow
As you can see from the above flows, both flows are completely different and the way that the DOM is loaded in, rendered, painted and then displayed is completely different.
Hope this help clears up the issue.
I've added one of the best pieces of information for you to read up on about browser rendering. It's always good to have an understanding of how browsers work when working on the front-end.
How modern browsers work
I am using keyframes with box-shadow to create an animation. Then, I am using the animation command to select the keyframe name and define some detailes on the animation (duration, delay etc...).
#myanimation{
animation: x 1s 1 ease-out ;
-webkit-animation: x 1s 1 ;
-webkit-backface-visibility: hidden;
-moz-animation: x 1s 1;
-o-animation: x 1s 1 ;
}
I will not post my keyframe, because its long. However, even though my animation duration is only 1 seconds, I am experiencing lags.
I tried everything to fix the lags, I added linear,ease-in-out etc.. all kinds of tags to the animation commnad but unsuccessful.
At the end, I just
deactivated the add-ons
(since add-ons also reduce the performance of firefox especially add-ons that block add-ons). After deactivating all my add-ons, it worked perfectly.
For some reason when you animate with Skew(0.1deg) it is not choppy.
This is on firefox 91.0 (64bit).
.test {
animation: breath2 0.8s linear 10ms infinite alternate;
}
#keyframes breath2 {
0% { transform: skewX(0.1deg) scaleX(1) translateY(-10px)}
100% { transform: skewX(0.1deg) scaleX(0.95) translateY(10px)}
}
.button {
border: 1px solid green;
height: 50px;
width: 150px;
border-radius: var(--border-radius);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
font: 15px sans-serif;
font-weight: 300;
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
-webkit-animation: breath2 0.8s linear 10ms infinite alternate;
animation: breath2 0.8s linear 10ms infinite alternate;
cursor: pointer;
margin-top: 10px;
text-decoration: none;
}
.button:before {
content: "";
display: block;
width: calc(100% - 10px);
height: calc(50px - 8px);
left: 5px;
top: 3px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: var(--border-radius-before);
}
.button.fire {
border-color: #ffeca8;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 138, 48, 0.6)), to(rgba(240, 96, 29, 0.6)));
background-image: linear-gradient(to bottom, rgba(255, 138, 48, 0.6), rgba(240, 96, 29, 0.6));
-webkit-box-shadow: 0 0 0px rgba(255, 138, 48, 0.6), 0 0px 3px rgba(240, 96, 29, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
box-shadow: 0 0 0px rgba(255, 138, 48, 0.6), 0 0px 3px rgba(240, 96, 29, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #ffeca8;
}
.button.fire::before {
-webkit-box-shadow: inset 0 0 20px #ffeca8;
box-shadow: inset 0 0 20px #ffeca8;
}
.button.ice {
border-color: #a8ecff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(48, 138, 255, 0.6)), to(rgba(29, 96, 240, 0.6)));
background-image: linear-gradient(to bottom, rgba(48, 138, 255, 0.6), rgba(29, 96, 240, 0.6));
-webkit-box-shadow: 0 0 0px rgba(48, 138, 255, 0.6), 0 0px 3px rgba(29, 96, 240, 0.6), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
box-shadow: 0 0 0px rgba(48, 138, 255, 0.6), 0 0px 3px rgba(29, 96, 240, 0.6), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
color: #a8ecff;
}
.button.ice::before {
-webkit-box-shadow: inset 0 0 20px #a8ecff;
box-shadow: inset 0 0 20px #a8ecff;
}
.button.blaze {
border-color: #ffa8a8;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(156, 20, 20, 0.6)), to(rgba(240, 29, 29, 0.6)));
background-image: linear-gradient(to bottom, rgba(156, 20, 20, 0.6), rgba(240, 29, 29, 0.6));
-webkit-box-shadow: 0 0 0px rgba(156, 20, 20, 0.6), 0 0px 3px rgba(240, 29, 29, 0.6), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
box-shadow: 0 0 0px rgba(156, 20, 20, 0.6), 0 0px 3px rgba(240, 29, 29, 0.6), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
color: #ffa8a8;
}
.button.blaze::before {
-webkit-box-shadow: inset 0 0 20px #ffa8a8;
box-shadow: inset 0 0 20px #ffa8a8;
}
.button.nature {
border-color: #b7ffa8;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(9, 134, 15, 0.6)), to(rgba(36, 240, 29, 0.6)));
background-image: linear-gradient(to bottom, rgba(9, 134, 15, 0.6), rgba(36, 240, 29, 0.6));
-webkit-box-shadow: 0 0 0px rgba(9, 134, 15, 0.6), 0 0px 3px rgba(36, 240, 29, 0.6), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
box-shadow: 0 0 0px rgba(9, 134, 15, 0.6), 0 0px 3px rgba(36, 240, 29, 0.6), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
color: #b7ffa8;
}
.button.nature::before {
-webkit-box-shadow: inset 0 0 20px #b7ffa8;
box-shadow: inset 0 0 20px #b7ffa8;
}
.button:hover {
text-decoration: none;
}
.button:hover.fire {
-webkit-box-shadow: 0 0 10px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
box-shadow: 0 0 10px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
}
.button:hover.fire:before {
-webkit-box-shadow: inset 0 0 50px 0 #ffeca8;
box-shadow: inset 0 0 50px 0 #ffeca8;
}
.button:hover.ice {
-webkit-box-shadow: 0 0 10px rgba(48, 138, 255, 0.8), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
box-shadow: 0 0 10px rgba(48, 138, 255, 0.8), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
}
.button:hover.ice:before {
-webkit-box-shadow: inset 0 0 50px 0 #a8ecff;
box-shadow: inset 0 0 50px 0 #a8ecff;
}
.button:hover.blaze {
-webkit-box-shadow: 0 0 10px rgba(156, 20, 20, 0.8), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
box-shadow: 0 0 10px rgba(156, 20, 20, 0.8), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
}
.button:hover.blaze:before {
-webkit-box-shadow: inset 0 0 50px 0 #ffa8a8;
box-shadow: inset 0 0 50px 0 #ffa8a8;
}
.button:hover.nature {
-webkit-box-shadow: 0 0 10px rgba(9, 134, 15, 0.8), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
box-shadow: 0 0 10px rgba(9, 134, 15, 0.8), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
}
.button:hover.nature:before {
-webkit-box-shadow: inset 0 0 50px 0 #b7ffa8;
box-shadow: inset 0 0 50px 0 #b7ffa8;
}
.button:hover + .button:hover {
margin-top: 15px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.breathingMain {
-webkit-animation: breath2 2s 0.5s infinite alternate;
animation: breath2 2s 0.5s infinite alternate;
}
#-webkit-keyframes breath {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0.95);
transform: scaleX(0.95);
}
}
#keyframes breath {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0.95);
transform: scaleX(0.95);
}
}
.test {
-webkit-animation: breath2 0.8s linear 10ms infinite alternate;
animation: breath2 0.8s linear 10ms infinite alternate;
}
#-webkit-keyframes breath2 {
0% {
-webkit-transform: skewX(0.1deg) scaleX(1) translateY(-10px);
transform: skewX(0.1deg) scaleX(1) translateY(-10px);
}
100% {
-webkit-transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
}
}
#keyframes breath2 {
0% {
-webkit-transform: skewX(0.1deg) scaleX(1) translateY(-10px);
transform: skewX(0.1deg) scaleX(1) translateY(-10px);
}
100% {
-webkit-transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
}
}
#-webkit-keyframes breath2_orig {
0% {
-webkit-transform: skewX(-10deg) scaleX(1);
transform: skewX(-10deg) scaleX(1);
}
100% {
-webkit-transform: skewX(-10deg) scaleX(0.95);
transform: skewX(-10deg) scaleX(0.95);
}
}
#keyframes breath2_orig {
0% {
-webkit-transform: skewX(-10deg) scaleX(1);
transform: skewX(-10deg) scaleX(1);
}
100% {
-webkit-transform: skewX(-10deg) scaleX(0.95);
transform: skewX(-10deg) scaleX(0.95);
}
}
/*# sourceMappingURL=buttons.css.map */
<div class="container">
<button class="button ice">Button</button>
</div>
Sorry for the long snippet (my first contribution :) )
.button1{
background: #E68A00 url(wooden.jpg) repeat-x;
border: 2px solid #eee;
height: 28px;
width: 115px;
margin: 50px 0 0 50px;
padding: 0 0 0 7px;
overflow: hidden;
display: block;
text-decoration:none;
font-family: 'Sacramento', cursive;
color : white;
font-size: 30px;
/*Rounded Corners*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
pg.button1{
position:relative;
left:300px;
top:0px;
}
p2.button1{
position:absolute;
right:0px;
top:150px;
}
p3.button1{
position:absolute;
right:0px;
top:200px;
}
.button1:hover {
width: 200px;
}
I have tried changing the element positions yet it doesn't work ! it just sits on one part of the screen. how do i make it to show on my desired position ?
pg, p2, p3 are not proper HTML tags. probably you created ID's with such names then change it to:
#pg .button1 {}
Either select position absolute or relative.
To understand my situation better, please head over to this fiddle and take a look. The preview pane of the fiddle shows a preview of the menu I am building.
When you click on the menu 'Channels" the menu simply shows up without any transition effect. I have no idea why.
This is the relevant code:
.dropdown-menu {
position: absolute;
top: 36px;
left: 0px;
z-index: 1000;
display: none;
width: 550px;
padding: 0;
margin: 0;
list-style: none;
background-color: #ffffff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
color: #222;
/* See? */
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
Any idea as to what I am doing wrong there?
That is because the javascript is NOT CHANGING THE HEIGHT of your element (the element that appears after clicking.). Your css applies transition animation ONLY TO HEIGHT CHANGES.
your javascript changes display:none; of your element to display:block; that is why you dont see any transition effect from the css.
If it isn't obvious, I am using Twitter Bootstrap for the dropdown menu. And the transition effect that I was trying to achieve comes with the Collapse plugin, and not Dropdowns.
Check this link http://jsfiddle.net/rakesh_vadnal/7VuGY/1/
OLD CSS:
.dropdown-menu {
position: absolute;
top: 36px;
left: 0px;
z-index: 1000;
display: none;
width: 550px;
padding: 0;
margin: 0;
list-style: none;
background-color: #ffffff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
color: #222;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
height: 0;
}
.open > .dropdown-menu {
display: block;
height: auto;
}
Updated CSS:
.dropdown-menu {
position: absolute;
top: 36px;
left: 0px;
z-index: 1000;
width: 550px;
padding: 0;
margin: 0;
list-style: none;
overflow:hidden;
background-color: #ffffff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
color: #222;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
height: 0;
}
.open > .dropdown-menu {
display: block;
height:145px;
}