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;
By Eaktadiur Posted in CSS

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

By Eaktadiur Posted in CSS

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();
?>

HTML table filtering client side

In client side table filtering is very important for web development.
This is very easy way column wise filtering or total table filtering. Just include the plugin.

<script type="text/javascript" src="public/picnet.table.filter.min.js"></script>

<script type="text/javascript">
            $(document).ready(function(){

                // Initialise picn table filtering Plugin hrer

                var options = {

                    additionalFilterTriggers: [$('#quickfind')],

                    clearFiltersControls: [$('#cleanfilters')],

                    matchingRow: function(state, tr, textTokens) {

                        if (!state || !state.id) {

                            return true;

                        }

                        var child = tr.children('td:eq(2)');

                        if (!child) return true;

                        var val = child.text();

                        switch (state.id) {

                            default:

                                return true;

                        }

                    }

                };

            

                $("#tdfiltering").tableFilter(options);

            }); 

        </script>

tdfiltering is a table id and display_table is css class.

Demo

By Eaktadiur Posted in PHP

Multidimensional Array Unique php

I will show u two Multidimensional Array. 1st one return unique multidimensional array and 2nd one will return only unique array

$a = array(“a” => “green”, “red”, “b” => “green”, “blue”, “red”, array(“a” => “green”, “red”, “b” => “green”, “blue”, “red”), array(“a1″ => “green1″, “red1″, “b2″ => “green2″, “blue2″, “red2″));

<?php
function super_unique($array) {
    foreach ($array as $key => $value) {
        //check $array array or not
        if (is_array($value)) {
            //check the array there is any duplicate value
            if (count($value) == count(array_unique($value))) {
                $result[$key] = $value;
            } else {
                $result[$key] = array_unique($value);
            }
        } else {
            $result[$key] = $value;
        }
    }
    //return array without duplicate value
    return $result;
}

?>

Result:

Array
(
[a] => green
[0] => red
[b] => green
[1] => blue
[2] => red
[3] => Array
(
[a] => green
[0] => red
[1] => blue
)

[4] => Array
(
[a1] => green1
[0] => red1
[b2] => green2
[1] => blue2
[2] => red2
)

)

2nd one


<?php

function super_unique($array) {
    foreach ($array as $key => $value) {
        //check $array array or not
        if (is_array($value)) {
            //check the array there is any duplicate value
            if (count($value) == count(array_unique($value))) {
                $result[$key] = $value;
            } else {
                //$result[$key] = array_unique($value);
            }
        } else {
            $result[$key] = $value;
        }
    }
    //return array without duplicate value, duplicate value with array not return 
    return $result;
}

?>

Result:

Array
(
[a] => green
[0] => red
[b] => green
[1] => blue
[2] => red
[4] => Array
(
[a1] => green1
[0] => red1
[b2] => green2
[1] => blue2
[2] => red2
)

)

By Eaktadiur Posted in PHP