I am trying to use boostrap mixin for box-shadow and transition as below in my less file:
.service-box {
.box-shadow(3px 3px 1px rgba(195, 195, 195, 0.4));
.transition(0.4s);
}
Lets look at its compiled css:
.service-box {
-webkit-box-shadow: 3px 3px 1px rgba(195, 195, 195, 0.4);
box-shadow: 3px 3px 1px rgba(195, 195, 195, 0.4);
-webkit-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
-o-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
You can see above mixin not compiling properly, isn't it?
Can anybody tell what the reason for this? Thank you.
Here is what worked for me for Bootstrap v5
#include transition(bottom .5s cubic-bezier(0, 1, 0, 1), background-color .25s ease-in);
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 have this audio control and i am trying to change even the color of the player but i can't target it i found some posts talking about doing this using javascript is that the only way to write css for it.
<audio controls class="radio-audio">
<source src="" type="audio/mpeg"></audio>
i tried to write some code like this found it somewhere on the internet but still i don't see any changes.
it is all hover and focus not doing much
.radio-audio:hover, .radio-audio:focus, .radio-audio:active {
-webkit-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
.radio-audio {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow: 2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
}
I have prepared you on codepen.io a model with all the css tags to access the graphics properties of an audio object
link
Currently there is no way to style HTML5 players using CSS. Instead, you can turn off the control attribute, and implement your own controls using JS. If you don't want to do it yourself, you can use something like jPlayer.
I have one problem about visibility. I have to create this DEMO from fiddle.
If you click my demo you can see there is a one image. When you hoverover mouse this image then bubble will open. But if you come with the mouse to the left of the image blank bubble opens again. How can I fix this problem ?
.balon
{
position: absolute;
width: 345px;
height: auto;
padding: 3px;
background: #FFFFFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: #d8dbdf solid 1px;
-webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
-moz-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
visiblility: hidden;
opacity:0;
margin-left: -345px;
z-index:5;
-webkit-transition: all .3s ;
-moz-transition: all .3s ;
-ms-transition: all .3s ;
-o-transition: all .3s ;
transition: all .3s ;
}
.balon:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
right: -10px;
top: 16px;
}
.vizyon_bg:hover .balon
{
opacity:1;
visibility:visible;
z-index:5;
transition: opacity .5s linear .5s;
-webkit-transition: opacity .5s linear .5s;
-moz-transition: opacity .5s linear .5s;
-ms-transition: opacity .5s linear .5s;
}
Dude i found the solution! just replace your balon's CSS and you're done! you have wrong z-index :}
I've created JSFiddle for you! http://jsfiddle.net/9pgqc24c/
.balon
{
position: absolute;
width: 345px;
z-index:-99999;
height: auto;
padding: 3px;
background: #FFFFFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: #d8dbdf solid 1px;
-webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
-moz-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
visiblility:hidden;
opacity:0;
margin-left:-345px;
z-index:-1;
-webkit-transition: all .3s ;
-moz-transition: all .3s ;
-ms-transition: all .3s ;
-o-transition: all .3s ;
transition: all .3s ;
}
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;
}
I am trying to change the background and text color with the css3 transition effects when hovering over a button, but only the text color is changing and not the background color. Here is my jsfiddle code and here is my css :
.input-submit
{
margin: 12px 0 2px
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(224, 224, 224)));
background-image: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
background-image: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
background-image: -o-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
background-image: linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
border: 0;
font-weight: normal;
color: #333;
text-shadow: 0 1px 0 white;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
width: 60px;
border-image: initial;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.input-submit:hover
{
cursor:pointer;
margin: 12px 0 2px;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(145, 191, 1)), to(rgb(111, 149, 1)));
background-image: -webkit-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
background-image: -moz-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
background-image: -o-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
background-image: linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
border: 0;
font-weight: normal;
color: #fff;
text-shadow: 0 1px 0 white;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
width: 60px;
border-image: initial;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
That's quite a block of CSS you've got there! As far as I'm aware, no browsers allow transitions of css gradients yet. Since your backgrounds aren't solid colors, you can't transition them.