Tuesday, 20 January 2015

Opacity css browser compatibility

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
                                filter: alpha(opacity=60);
                                -khtml-opacity: 0.6;
                                opacity: 0.6;                       


Monday, 19 January 2015

How to Replace text using attribute selector in css

/*Replace text using css*/

li a[title="Previous page"] {visibility:hidden}
li a[title="Previous page"]:after{content:"< Previous";visibility:visible}


<a href="#" title="Previous page"> &lt;</a>

Monday, 12 January 2015

CSS3 transition of background-image for Firefox not working solution

Add this on style or css file
    width: 400px;
    height: 150px;
    position: relative;
    border: 1px solid green;

.hr-box:before, .hr-box:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 1;
.hr-box:before {
    background-image: url(hr-img1.jpg);
    z-index: 1;
    transition: opacity 2s;

.hr-box:after {
    background-image: url(hr-img2.jpg);

.hr-box:hover:before {
    opacity: 0;

Add this on body tag
<div class="hr-box"></div>


Tuesday, 16 December 2014

Filter Grayscale Browser Compatibility

img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

Tuesday, 17 December 2013

Simple Email Validation

If you are sure that the users of your web page are using HTML5 compatible browsers you can use the following neater example for the same purpose:
<!DOCTYPE html>

            <input type="email" pattern="^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$">
            <input type="submit">

Scale on Hover with Webkit Transition

This only works on webkit based browsers (Chrome, Safari). It degrades gracefully for non-webkit browsers (no change is seen, rather than an unanimated size bump).
#blah { -webkit-transition: all .2s ease-in-out; }
#blah:hover { -webkit-transform: scale(1.1); }

Monday, 16 December 2013

CSS body background image fixed to full screen even when zooming in/out

Hi Guyz.. I solve this problem using : background-size:cover
That is it full set of css is
body { 
background: url('images/body-bg.jpg') no-repeat center center fixed;

-moz-background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-size: cover;

Latest browsers support the default property.