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….

Download/Save image from URL in

Once, I was working on the excel import functionality in one of my project. There was a image url field in excel file and i need to import all data and save image at specific location from given url. We can easily save/download image from a url as below, May be it can help you.

     
        public bool SaveImageFromUrl(string _prmStrFromImageUrl, string _prmStrSaveFilePath)
        {
            WebResponse _response = null;
            Stream _remoteStream = null;
            StreamReader _readStream = null;

            try
            {
                WebRequest _request = WebRequest.Create(_prmStrFromImageUrl);

                if (_request != null)
                {
                    _response = _request.GetResponse();

                    if (_response != null)
                    {
                        _remoteStream = _response.GetResponseStream();
                        string content_type = _response.Headers["Content-type"];
                        System.Drawing.Imaging.ImageFormat _imageType;

                        if (content_type == "image/jpeg" || content_type == "image/jpg")
                        {
                            _imageType = ImageFormat.Jpeg;
                        }
                        else if (content_type == "image/png")
                        {
                            _imageType = ImageFormat.Png;
                        }
                        else if (content_type == "image/gif")
                        {
                            _imageType = ImageFormat.Gif;
                        }
                        else
                        {
                            return false;
                        }

                        _readStream = new StreamReader(_remoteStream);
                        System.Drawing.Image img = System.Drawing.Image.FromStream(_remoteStream);

                        if (img == null)
                            return false;

                        //Save Image
                        img.Save(_prmStrSaveFilePath, _imageType);
                        img.Dispose();
                    }
                }
            }

            finally
            {
                //Clean Up objects
                if (_response != null) _response.Close();
                if (_remoteStream != null) _remoteStream.Close();
                if (_readStream != null) _readStream.Close();
            }

            return true;
        }