Tuesday 20 January 2015

Opacity css browser compatibility

div{
-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}


HTML

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

Monday 12 January 2015

CSS3 transition of background-image for Firefox not working solution


CSS:
Add this on style or css file
.hr-box
{
    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;
}

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

Webtechpie.com