I used LESS to create this CSS glass shelf for a new website I just finished designing and developing - http://www.meridianapps.com.
A Pen by o'holloran on CodePen.
I used LESS to create this CSS glass shelf for a new website I just finished designing and developing - http://www.meridianapps.com.
A Pen by o'holloran on CodePen.
<div class="shelf"> | |
<div class="bookend_left"></div> | |
<div class="bookend_right"></div> | |
<div class="reflection"></div> | |
</div> |
//Colors | |
@color1: #d1d8de; //top surface | |
@color2: #596c7c; //front edge | |
@color3: #ffffff; //page color | |
//Mixins | |
.box-shadow (@shadow1, @shadow2: transparent 0 0 0, @shadow3: transparent 0 0 0, @shadow4: transparent 0 0 0, @shadow5: transparent 0 0 0, @shadow6: transparent 0 0 0) { | |
-webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5, @shadow6; | |
-moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5, @shadow6; | |
box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5, @shadow6; | |
} | |
.4-color-gradient (@colorStart, @colorStop1, @colorStop2, @colorEnd, @position1: 0%, @position2: 50%, @position3: 50%, @position4: 100%, @angle: 90deg, @oldangle1: left top, @oldangle2: right bottom, @iegradtype: 0) { | |
background-image: -moz-linear-gradient(@angle, @colorStart @position1, @colorStop1 @position2, @colorStop2 @position3, @colorEnd @position4); /*FF3.6+ */ | |
background-image: -webkit-gradient(linear, @oldangle1, @oldangle2, color-stop(@position1,@colorStart), color-stop(@position2, @colorStop1), color-stop(@position3,@colorStop2), color-stop(@position4,@colorEnd)); /*Chrome,Safari4+ */ | |
background-image: -webkit-linear-gradient(@angle, @colorStart @position1, @colorStop1 @position2, @colorStop2 @position3, @colorEnd @position4);/* Chrome10+,Safari5.1+ */ | |
background-image: -o-linear-gradient(@angle, @colorStart @position1, @colorStop1 @position2, @colorStop2 @position3, @colorEnd @position4); /* Opera 11.10+ */ | |
background-image: -ms-linear-gradient(@angle, @colorStart @position1, @colorStop1 @position2, @colorStop2 @position3, @colorEnd @position4); /*IE10+ */ | |
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{colorEnd}', endColorstr='@{colorStart}', GradientType='@{iegradtype}' )"; /* IE6-9 */ | |
} | |
.2-color-gradient (@colorStart, @colorEnd, @position1: 0%, @position2: 100%, @angle: 90deg, @oldangle1: left top, @oldangle2: right bottom, @iegradtype: 0) { | |
background-image: -moz-linear-gradient(@angle, @colorStart @position1, @colorEnd @position2); /*FF3.6+ */ | |
background-image: -webkit-gradient(@angle, @oldangle1, @oldangle2, color-stop(@position1, @colorStart), color-stop(@position2, @colorEnd)); /*Chrome,Safari4+ */ | |
background-image: -webkit-linear-gradient(@angle, @colorStart @position1, @colorEnd @position2); /*Chrome10+,Safari5.1+ */ | |
background-image: -o-linear-gradient(@angle, @colorStart @position1, @colorEnd @position2); /* Opera 11.10+ */ | |
background-image: -ms-linear-gradient(@angle, @colorStart @position1, @colorEnd @position2); /*IE10+ */ | |
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{colorEnd}', endColorstr='@{colorStart}', GradientType='@{iegradtype}' )"; /* IE6-9 */ | |
} | |
.transform (@transform) { | |
-webkit-transform: @transform; | |
-moz-transform: @transform; | |
-ms-transform: @transform; | |
-o-transform: @transform; | |
} | |
//CSS | |
body { | |
background-color: @color3; | |
} | |
.shelf { | |
display: block; | |
position: relative; | |
width: 60%; | |
height: 20px; | |
margin: 100px auto 0; | |
//LESS Mixins | |
.2-color-gradient (@color1, lighten(@color1, 10%), 0%, 100%); | |
.box-shadow (0 2px 2px lighten(@color2, 10%), 0 4px 0 lighten(@color2, 30%), 0 20px 30px -8px #000000); | |
} | |
.bookend_left { | |
display: block; | |
position: absolute; | |
left: -25px; | |
top: -18px; | |
width: 36px; | |
height: 36px; | |
background-color: @color3; | |
//LESS Mixins | |
.transform (rotate(35deg)); | |
} | |
.bookend_left:before { | |
position: absolute; | |
top: 31px; | |
left: 17px; | |
width: 20px; | |
height: 10px; | |
background-color: @color3; | |
content:""; | |
//LESS Mixins | |
.transform (rotate(-35deg)); | |
} | |
.bookend_right { | |
display: block; | |
position: absolute; | |
right: -25px; | |
top: -18px; | |
width: 36px; | |
height: 36px; | |
background-color: @color3; | |
//LESS Mixins | |
.transform (rotate(-35deg)); | |
} | |
.bookend_right:before { | |
position: absolute; | |
top: 31px; | |
right: 17px; | |
width: 20px; | |
height: 10px; | |
background-color: @color3; | |
content:""; | |
//LESS Mixins | |
.transform (rotate(35deg)); | |
} | |
.shelf .reflection { | |
display: block; | |
position: absolute; | |
top: 20px; | |
left: 1px; | |
width: 99.8%; | |
height: 1px; | |
//LESS Mixins | |
.4-color-gradient (rgba(255,255,255,1.0), rgba(255,255,255,0.5), rgba(255,255,255,1.0), rgba(255,255,255,0.7), 0%, 35%, 65%, 100%, 0deg, left top, right top); | |
} |