Layout: Calculations (Padding)

.padded { margin: 0 auto; position: relative; width: -webkit-calc(100% -(20px * x)); width: -moz-calc(100% -(20px * x)); width: calc(100% -(20px * x));}

Layout: Multi-columns

p { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}

Layout: Clearfix

.clearfix:before,.clearfix:after {content:""; display: table; }
.clearfix:after {clear:both;}
.clearfix {*zoom: 1;}

Layout: Box-sizing

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

Style: Transparency

a {color: rgba(0,255,0,0.5); background: rgba(0,0,255,0.05); border:rgba(255,0,0,0.5);}

Style: Responsive video

.video {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.video iframe, .video object, .video embed {position: absolute;
top:0; left: 0; width: 100%; height: 100%;}

Style: Filters

img {-webkit-filter:grayscale(100%);}

Style: Image replacement

.hide-text {text-indent: 100%; white-space: nowrap; overflow: hidden;}

© 2003-2014 samornchat.com All rights reserved.
Website Designed by Supada Amornchat

Facebook Link Twitter Link