CSS Filter Effects: Hue-rotate, Invert, Blur, Opacity, and Drop Shadow Part II

Submitted by alpha_luna on Monday, July 18, 2016 - 15:48.
In this tutorial, we are going to learn about CSS Filter Effects: Hue-rotate, Invert, Blur, Opacity, and Drop Shadow. This is the continuation of CSS Filter Effects: Brightness, Contrast, Grayscale, Saturate, and Sepia Part I tuorial. And, this is the simple syntax to apply the filter effect in CSS: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Hue-rotate

This one sample of filter effects applies hue-rotation to all colors of the image. The default value is 0deg and that's the original image. In our example, we have 70deg and 250deg of hue-rotation in the image below. Result Source code for the filter effect of hue-rotate in the image above.

HTML Code

  1. <h2> Original Image</h2>
  2. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg">
  3.  
  4. <h2><code>hue-rotate(70deg)</code> | <code>hue-rotate(250deg)</code></h2>
  5. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg" class="img_style_1">
  6. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg" class="img_style_2">

CSS Code

  1. h2 {
  2.   margin: 20px;
  3.   padding-top: 20px;
  4.   clear:both;
  5. }
  6.  
  7. img {
  8.   max-width: 25%;
  9.   margin: 0 auto;
  10.   padding: 2px;
  11.   border:1px solid blue;
  12. }
  13.  
  14. .img_style_1 {
  15.   -webkit-filter: hue-rotate(70deg);
  16.   filter: hue-rotate(70deg);
  17. }
  18.  
  19. .img_style_2 {
  20.   -webkit-filter: hue-rotate(250deg);
  21.   filter: hue-rotate(250deg);
  22. }

Invert

This one sample of filter effects inverts all the colors in the image. If your value is 0% it will not effect to the original image while if you have 100% it will completely invert the image. In our example, we have 70% and 90% of invert in the image below. Result Source code for the filter effect of invert in the image above.

HTML Code

  1. <h2> Original Image</h2>
  2. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg">
  3.  
  4. <h2><code>invert(70%)</code> | <code>invert(90%)</code></h2>
  5. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg" class="img_style_1">
  6. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg" class="img_style_2">

CSS Code

  1. h2 {
  2.   margin: 20px;
  3.   padding-top: 20px;
  4.   clear:both;
  5. }
  6.  
  7. img {
  8.   max-width: 25%;
  9.   margin: 0 auto;
  10.   padding: 2px;
  11.   border:1px solid blue;
  12. }
  13.  
  14. .img_style_1 {
  15.   -webkit-filter: invert(70%);
  16.   filter: invert(70%);
  17. }
  18.  
  19. .img_style_2 {
  20.   -webkit-filter: invert(90%);
  21.   filter: invert(90%);
  22. }

Blur

This one sample of filter effects applies a blur to the image. This filter effect it determines how many pixels on the image blend into each other. If the value is large it will more blur to the image. In our example, we have 1px and 5px of blur in the image below. Result Source code for the filter effect of blur in the image above.

HTML Code

  1. <h2> Original Image</h2>
  2. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg">
  3.  
  4. <h2><code>blur(1px)</code> | <code>blur(5px)</code></h2>
  5. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg" class="img_style_1">
  6. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg" class="img_style_2">

CSS Code

  1. h2 {
  2.   margin: 20px;
  3.   padding-top: 20px;
  4.   clear:both;
  5. }
  6.  
  7. img {
  8.   max-width: 25%;
  9.   margin: 0 auto;
  10.   padding: 2px;
  11.   border:1px solid blue;
  12. }
  13.  
  14. .img_style_1 {
  15.   -webkit-filter: blur(1px);
  16.   filter: blur(1px);
  17. }
  18.  
  19. .img_style_2 {
  20.   -webkit-filter: blur(5px);
  21.   filter: blur(5px);
  22. }

Opacity

This one sample of filter effects applies an opacity to the image to make it semi-transparent. If the value is 100% the image will become opaque, if the value is 0% it will become fully transparent. In our example, we have 40% and 80% of opacity in the image below. Result Source code for the filter effect of opacity in the image above.

HTML Code

  1. <h2> Original Image</h2>
  2. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg">
  3.  
  4. <h2><code>opacity(40%)</code> | <code>opacity(80%)</code></h2>
  5. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg" class="img_style_1">
  6. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg" class="img_style_2">

CSS Code

  1. h2 {
  2.   margin: 20px;
  3.   padding-top: 20px;
  4.   clear:both;
  5. }
  6.  
  7. img {
  8.   max-width: 25%;
  9.   margin: 0 auto;
  10.   padding: 2px;
  11.   border:1px solid blue;
  12. }
  13.  
  14. .img_style_1 {
  15.   -webkit-filter: opacity(40%);
  16.   filter: opacity(40%);
  17. }
  18.  
  19. .img_style_2 {
  20.   -webkit-filter: opacity(80%);
  21.   filter: opacity(80%);
  22. }

Drop Shadow

This one sample of filter effects adds drop shadow effect to images. This kind of property it required to have an X and the Y offset as well as the color of the drop shadow. In our example, we have 40% and 80% of opacity in the image below. Result Source code for the filter effect of a drop shadow in the image above.

HTML Code

  1. <h2> Original Image</h2>
  2. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg">
  3.  
  4. <h2><code>drop-shadow(5px 5px 10px red)</code> | <code>drop-shadow(5px 5px 10px yellow)</code></h2>
  5. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg" class="img_style_1">
  6. <img src="http://motardes.e-monsite.com/medias/images/suzuki-raider-150-biker-girls-1506145.jpg" class="img_style_2">

CSS Code

  1. h2 {
  2.   margin: 20px;
  3.   padding-top: 20px;
  4.   clear:both;
  5. }
  6.  
  7. img {
  8.   max-width: 25%;
  9.   margin: 0 auto;
  10.   padding: 2px;
  11.   border:1px solid blue;
  12. }
  13.  
  14. .img_style_1 {
  15.   -webkit-filter: drop-shadow(5px 5px 10px red);
  16.   filter: drop-shadow(5px 5px 10px #666);
  17.   border-radius: 10px;
  18. }
  19.  
  20. .img_style_2 {
  21.   -webkit-filter: drop-shadow(5px 5px 10px yellow);
  22.   filter: drop-shadow(5px 5px 10px #666);
  23.   border-radius: 10px;
  24. }
Related Code: CSS Filter Effects: Brightness, Contrast, Grayscale, Saturate, and Sepia Part I Kindly click the "Download Code" button below for full source code. Thank you very much. Hope that this tutorial will help you a lot. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Comments

Submitted byAnonymous (not verified)on Tue, 07/06/2021 - 04:32

invert

Add new comment

About text formats