It’s very common to have different hover effects on HTML elements, especially on images. The power of CSS3 and modern browsers have made this easy to achieve. CSS3 filters are a powerful property to apply filters to images, just like […]
HTML5 is the future of web development and provides endless inspiration for web development beginners. Even the giants in this technical field like Google and Apple are working with HTML5 for more advanced web development. But beginners can also learn […]
.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 […]
I was tasked with replacing several dozen Photoshop-generated rounded buttons on a large site with a flexible HTML/CSS/JS equivalent. I wanted it to be simple and leave the code as clean as possible. It also needed to work in all modern browsers. This is my solution. […]
If you’re a typical blog owner, one of your biggest goals is to keep visitors browsing your site. One good way to do that is by showing off your most popular posts. Here’s a way to show your Top Content from Google Analytics on your WordPress blog by piggybacking on an existing plugin. […]
I have trouble with JavaScript array and array-manipulation. JavaScript lacks a specific foreach contstruct, which trips me up. Here’s how to fake it. […]
Last week’s article covered how to build a tabbed box interface, starting with Photoshop, and moving through XHTML and CSS to our basic jQuery functionality. If you missed it, I would highly recommend starting your reading there. This article will show you how to use jQuery to make your tabbed interface more attractive and interactive. […]
Earlier this week I talked a bit about message boxes – how to style them and position them on your page to get them noticed. But a message that pops up every single time your website is loaded could get […]
