Related
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.
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 ;
}
I'm helping a friend out with a website and she has pretty specific type of button in mind:
"I would like the buttons to be hexagon shape, with a photo in the middle and actually depress as clicked before moving to the portfolio page."
I've managed to create a rounded square that depresses using CSS and HTML pretty easily, however I can't work out a hexagon. Anyone offer some help here?
Fiddle
HTML:
<a href="#" class="button">
<span>
<p> Jorgie</p></span>
</a>
CSS:
.button {
display: inline-block;
margin: 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
-moz-box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
-moz-transition: -moz-box-shadow .1s ease-in-out;
-o-transition: -o-box-shadow .1s ease-in-out;
transition: box-shadow .1s ease-in-out;
font-size: 20px;
color: #fff;
}
.button span {
display: inline-block;
background-color: black;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
font-family: 'Pacifico', Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);
-webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in- out;
-moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
-o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
transition: background-color .2s ease-in-out, transform .1s ease-in-out;
}
.button:hover span {
background-image:url(jorgie.jpg);
background-repeat:no-repeat;
background-position:center;
text-shadow: 0 -1px 1px rgba(175, 49, 95, .9), 0 0 5px rgba(255, 255, 255, .8);
}
.button:active, .button:focus {
-webkit-box-shadow: 0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
box-shadow: 0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
}
.button:active span {
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
-o-transform: translate(0, 4px);
transform: translate(0, 4px);
}
Here is a hexagon shaped button adapted from the soluion described in this question : Button with pointed edges and shadow :
The hexagon is made with skewed pseudo elements the shadow is made with box-shadows and the transition on the click event is made with CSS:
DEMO
HTML :
<div class="button top">
<div class="button bottom"></div>
</div>
CSS :
.top{
position:relative;
top:0;
margin-left:150px;
width: 45px;
height: 60px;
-webkit-transition: top .1s;
-ms-transition: top .1s;
transition: top .1s;
}
.button:before, .button:after{
position: absolute;
width:70%; height:50%;
content: "";
z-index:-1;
}
.top:before {
left:0; top:0;
-webkit-transform:skewX(-20deg);
-ms-transform:skewX(-20deg);
transform:skewX(-20deg);
background: #469BF9;
box-shadow: -5px 10px 0px -5px #104f96;
z-index:-2;
}
.top:after {
right:0; top:0;
-webkit-transform:skewX(20deg);
-ms-transform:skewX(20deg);
transform:skewX(20deg);
background: #469BF9;
box-shadow: 5px 10px 0px -5px #104f96;
z-index:-2;
}
.bottom:before{
left:0; top:50%; transitions.
-webkit-transform:skewX(20deg);
-ms-transform:skewX(20deg);
transform:skewX(20deg);
background: #1E80F7;
box-shadow: -4px 5px 0px 0px #104f96;
}
.bottom:after{
right:0; top:50%;
-webkit-transform:skewX(-20deg);
-ms-transform:skewX(-20deg);
transform:skewX(-20deg);
background: #1E80F7;
box-shadow: 4px 5px 0px 0px #104f96;
}
.button:after, .button:before{
-webkit-transition: box-shadow .1s;
-ms-transition: box-shadow .1s;
transition: box-shadow .1s;
}
.top:active{
top:5px;
}
.button:active:after, .button:active:before, .button:active .button:before, .button:active .button:after {
box-shadow: 0px 0px 0px 0px #104f96;
}
To my knowledge,a hexagon with full image requires multiple divs as follows
JSfiddle Demo
HMTL
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2">
</div>
</div>
</div>
CSS
.hexagon {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
width: 400px;
height: 200px;
margin: 25px;
visibility: hidden;
overflow: hidden;
}
.hexagon-in1 {
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
overflow: hidden;
}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-image: url(http://placekitten.com/241/241);
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 a {
display: block;
}
Actual 'button down' effects might a little harder.
Frankly, I'd be looking to use an actual image here..rather than unsemantic 'styling' divs for this button.
For hexagon button, here's a FIDDLE
<div id="hexagon"></div>
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
.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;
}