How to convert image to black and white using CSS ?

Using CSS filter property we can easily apply the graphical effects like blurring or color shifting to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Below are some common graphical effects-

  • Blur
  • Brightness
  • Contrast
  • Drop Shadow
  • Grayscale
  • Hue Rotation
  • Invert etc…

grauscale

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}

https://www.w3schools.com/cssref/css3_pr_filter.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Programming is Easy…

 

Advertisements

How to set multiple background images using CSS ?

CSS3 allows us  to set multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support : Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Example:- 

#example1 {
   width: 500px;
   height: 250px;
   background-image: url('Image 1 URL'), url('Image 2 URL');
   background-position: center bottom, left top;
   background-repeat: no-repeat;
}

Multiple background images can be specified using either the individual background properties or the background
shorthand property.

Method 1:-
Using individual background properties

#example1 {
   background-image: url('Image 1 URL'), url('Image 2 URL');
}

A comma separated list is also used for the other background properties; background-repeat,background-attachmentbackground-positionbackground-clipbackground-originand background-size.

#example1 {
   background-position: center bottom, left top;
}

Method 2:- Using the ‘background’ shorthand property

#example2 {
background: url('Image 1 URL') center bottom no-repeat, url('Image 2 URL') left top no-repeat;
}

Reference: http://www.css3.info/preview/multiple-backgrounds/

Programming is easy….

How to create mouse over menu without jQuery/Javascript in HTML?

Sometime, we need to display a mouse over menu like in grid to edit/delete rows etc…
It can be done easly by just creating required menu options and set default display style to none and show menu on item’s/rows mouse over in css.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mouse over menu using div/css without jQuery and JavaScript</title>
    <style type="text/css">
        .itemsContainer
        {
            border: 1px solid red;
            height: 300px;
            width: 600px;
        }

        .item
        {
            height: 100px;
            width: 100px;
            float: left;
            margin: 10px;
        }

        .itemsContainer .item:nth-child(odd)
        {
            border: 1px solid green;
            background-color: gainsboro;
        }

        .itemsContainer .item:nth-child(even)
        {
            border: 1px solid gold;
            background-color: lavender;
        }

        .menu
        {
            list-style-type: none;
            margin-top: 0px;
            margin-left: 15px;
            display: none;
        }

            .menu li a
            {
                color: red;
                text-decoration: none;
            }

        .itemsContainer .item:hover .menu
        {
            display: block;
        }
    </style>
</head>
<body>
    <div class="itemsContainer">
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Programming is easy….