Browser Prefixes Differences Browser CSS Support

CSS is supported differently by different browsers. Some browsers have better track records than others. Every so often someone (along with the W3C) will write a new specification which will describe a new set of CSS features. Sometimes they become really popular and a lot of people get involved.

For example, border-radius was once part of a specification that was not fully supported. Specifications are often not fully complete, or leave certain descriptions out. This means the people making browsers have a little trouble interpreting what they should implement. This leads to differences between browser CSS support. For that reason, browsers will implement experimental versions of properties first, and these use browser prefixes.

Examples

Each browser uses a specific prefix. Remember, these are only used for experimental and new CSS features.

# Webkit (Chrome and Safari) uses -webkit-
# Firefox uses -moz-
# Internet Explorer uses -ms-
# Operia uses -o-

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;

CSS3 Fullscreen background show

CSS3 & HTML5  change think web programming. we can create slide show without jquery. so it work so fast. you should just define css property.

First Step CSS property

</pre>
/* CSS reset */
*{
 margin:0;
 padding:0;
}

.cb-slideshow:after {
 content: '';
 background: transparent url(../images/8.jpg) repeat top left;
}
.cb-slideshow li span {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0px;
 left: 0px;
 color: transparent;
 background-size: cover;
 background-position: 50% 50%;
 background-repeat: none;
 opacity: 0;
 z-index: 0;
 -webkit-backface-visibility: hidden;
 -webkit-animation: imageAnimation 36s linear infinite 0s;
 -moz-animation: imageAnimation 36s linear infinite 0s;
 -o-animation: imageAnimation 36s linear infinite 0s;
 -ms-animation: imageAnimation 36s linear infinite 0s;
 animation: imageAnimation 36s linear infinite 0s;
}

/*Display Text*/
.cb-slideshow li div {
 z-index: 1000;
 position: absolute;
 bottom: 30px;
 left: 0px;
 width: 100%;
 text-align: center;
 opacity: 0;
 color: #fff;
 -webkit-animation: titleAnimation 36s linear infinite 0s;
 -moz-animation: titleAnimation 36s linear infinite 0s;
 -o-animation: titleAnimation 36s linear infinite 0s;
 -ms-animation: titleAnimation 36s linear infinite 0s;
 animation: titleAnimation 36s linear infinite 0s;
}
/*Display Text Header*/
.cb-slideshow li div h3 {
 font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
 font-size: 240px;
 padding: 0;
 line-height: 200px;
}

/*Display Image*/
.cb-slideshow li:nth-child(1) span {
 background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
 background-image: url(../images/2.jpg);
 -webkit-animation-delay: 6s;
 -moz-animation-delay: 6s;
 -o-animation-delay: 6s;
 -ms-animation-delay: 6s;
 animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
 background-image: url(../images/3.jpg);
 -webkit-animation-delay: 12s;
 -moz-animation-delay: 12s;
 -o-animation-delay: 12s;
 -ms-animation-delay: 12s;
 animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
 background-image: url(../images/4.jpg);
 -webkit-animation-delay: 18s;
 -moz-animation-delay: 18s;
 -o-animation-delay: 18s;
 -ms-animation-delay: 18s;
 animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
 background-image: url(../images/5.jpg);
 -webkit-animation-delay: 24s;
 -moz-animation-delay: 24s;
 -o-animation-delay: 24s;
 -ms-animation-delay: 24s;
 animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
 background-image: url(../images/6.jpg);
 -webkit-animation-delay: 30s;
 -moz-animation-delay: 30s;
 -o-animation-delay: 30s;
 -ms-animation-delay: 30s;
 animation-delay: 30s;
}

&nbsp;

/*Display Text Header*/
.cb-slideshow li:nth-child(2) div {
 -webkit-animation-delay: 6s;
 -moz-animation-delay: 6s;
 -o-animation-delay: 6s;
 -ms-animation-delay: 6s;
 animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
 -webkit-animation-delay: 12s;
 -moz-animation-delay: 12s;
 -o-animation-delay: 12s;
 -ms-animation-delay: 12s;
 animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
 -webkit-animation-delay: 18s;
 -moz-animation-delay: 18s;
 -o-animation-delay: 18s;
 -ms-animation-delay: 18s;
 animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
 -webkit-animation-delay: 24s;
 -moz-animation-delay: 24s;
 -o-animation-delay: 24s;
 -ms-animation-delay: 24s;
 animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
 -webkit-animation-delay: 30s;
 -moz-animation-delay: 30s;
 -o-animation-delay: 30s;
 -ms-animation-delay: 30s;
 animation-delay: 30s;
}

&nbsp;

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
 0% { opacity: 0;
 -webkit-animation-timing-function: ease-in; }
 8% { opacity: 1;
 -webkit-animation-timing-function: ease-out; }
 17% { opacity: 1 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
 0% { opacity: 0;
 -moz-animation-timing-function: ease-in; }
 8% { opacity: 1;
 -moz-animation-timing-function: ease-out; }
 17% { opacity: 1 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
 0% { opacity: 0;
 -o-animation-timing-function: ease-in; }
 8% { opacity: 1;
 -o-animation-timing-function: ease-out; }
 17% { opacity: 1 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
 0% { opacity: 0;
 -ms-animation-timing-function: ease-in; }
 8% { opacity: 1;
 -ms-animation-timing-function: ease-out; }
 17% { opacity: 1 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}
@keyframes imageAnimation {
 0% { opacity: 0;
 animation-timing-function: ease-in; }
 8% { opacity: 1;
 animation-timing-function: ease-out; }
 17% { opacity: 1 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
 0% { opacity: 0 }
 8% { opacity: 1 }
 17% { opacity: 1 }
 19% { opacity: 0 }
 100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
 0% { opacity: 0 }
 8% { opacity: 1 }
 17% { opacity: 1 }
 19% { opacity: 0 }
 100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
 0% { opacity: 0 }
 8% { opacity: 1 }
 17% { opacity: 1 }
 19% { opacity: 0 }
 100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
 0% { opacity: 0 }
 8% { opacity: 1 }
 17% { opacity: 1 }
 19% { opacity: 0 }
 100% { opacity: 0 }
}
@keyframes titleAnimation {
 0% { opacity: 0 }
 8% { opacity: 1 }
 17% { opacity: 1 }
 19% { opacity: 0 }
 100% { opacity: 0 }
}

&nbsp;

/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
 opacity: 1;
}

@media screen and (max-width: 1140px) {
 .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
 .cb-slideshow li div h3 { font-size: 80px }
}
<pre>

Second Define HTML Tag


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/style1.css" />
    </head>
    <body>
        <ul class="cb-slideshow">
            <li><span>Image 01</span></li>
            <li><span>Image 02</span></li>
            <li><span>Image 03</span></li>
            <li><span>Image 04</span><div><h2>Sad Gril</h2></div></li>
            <li><span>Image 05</span><div><h3>Display Text</h3></div></li>
            <li><span>Image 06</span><div><h4>Header Text</h4></div></li>
        </ul>       
    </body>
</html>

VIEW DEMO

CSS Full screen Background

full screen image is very important when you make a photography web site. Most of all use jquery plugin to do it. But we can do it using css3 very easy way.

css properties


* {
 margin:0px;
 padding:0px;
 /* border:0px;*/
 outline:0px;
}

body{
 /* for some mobile browsers */
 min-height:100%;
 font: 14px Verdana, Tahoma, arial, sans-serif;
}

&nbsp;

h1{text-align:right;}
html{
 /* This image will be displayed fullscreen */
 background:url('http://eaktadiur.com/demo/nic_texeditor/images/112430656561628.jpg') no-repeat center center;

 /* Ensure the html element always takes up the full height of the browser window */
 min-height:100%;

 /* The Magic */
 background-size:cover;
}

DEMO

First Day and Last day of month PHP function

Create Two function that return first day of month and last day of month.

<?php
function firstDayMonth() {
            return date("Y-m-d", strtotime(date('m') . '/01/' . date('Y') . ' 00:00:00'));
        }

        function lasDayMonth() {
            return date("m/d/Y", strtotime('-1 second', strtotime('+1 month', strtotime(date('m') . '/01/' . date('Y') . ' 00:00:00'))));
        }

?>

Just call function It will display current first day and last day of month.

<?php
echo firstDayMonth();
echo lasDayMonth();
?>