Creating Custom Flat and Flipping Style CSS Checkboxes

.preview-block{position:relative;background:#f8f8f8;padding:20px;margin-bottom:20px;border:1px solid #dedede;text-align:center}.block-switch{position:relative;text-align:center;display:inline-block;margin:8px 20px 0 0;width:100px}.block-switch h4{margin:0;font-size:15px}input.toggle{position:absolute;visibility:hidden}input.toggle+label{display:block;position:relative;cursor:pointer;outline:0;user-select:none}input.toggle-flat+label{width:100px;height:20px;background-color:#BF2A23;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}input.toggle-flat+label:after,input.toggle-flat+label:before{display:block;position:absolute;content:””}input.toggle-flat+label:before{top:2px;left:2px;bottom:2px;right:2px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}input.toggle-flat+label:after{top:4px;left:4px;bottom:4px;width:45px;background-color:#fff;-webkit-transition:margin .5s,background .5s;-moz-transition:margin .5s,background .5s;-o-transition:margin .5s,background .5s;transition:margin .5s,background .5s}input.toggle-flat:checked+label{background-color:#00C176}input.toggle-flat:checked+label:after{margin-left:47px;background-color:#fff}input.toggle-flip+label{height:20px}input.toggle-flip+label:after,input.toggle-flip+label:before{position:absolute;left:0;bottom:0;right:0;width:100px;height:20px;color:#fff;text-align:center;line-height:20px}input.toggle-flip+label:before{background-color:#BF2A23;content:attr(data-off);-webkit-transition:-webkit-transform .5s;-moz-transition:-moz-transform .5s;-o-transition:-o-transform .5s;transition:transform .5s;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}input.toggle-flip+label:after{background-color:#00C176;color:#fff;content:attr(data-on);-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;-o-transition:-o-transform .4s;transition:transform .4s;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}input.toggle-flip:checked+label:before{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg)}input.toggle-flip:checked+label:after{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-ms-transform:rotateX(0);-o-transform:rotateX(0);transform:rotateX(0)} In this tutorial, we will create some flat style toggle […] Read Article

Sizing Images Responsively

Images are sort of a special beast in the HTML animal kingdom. They’re technically inline elements, but they don’t really behave like them. This can cause trouble in responsive web designs. Happily, the fix is simple, safe, and effective. […] Read Article

A Pure CSS Bouncing Ball

We’re going to create a ball that bounces infinitely – seemingly randomly – in its container. What’s the big whoop about that? We’ll do it entirely with CSS. […] Read Article