Programming Great Village

Image effects in css

You can set many effects to an image in css.so enjoy css miracle on pictures:

1- Set shadow on the pictures

Image effects in css


1     <html>

2     <head>

3     <style>

4     .pic {

5     box-shadow: 1px 1px 5px 1px gray;

6     }

7     </style>

8     </head>

9     <body>

10     <div style="text-align:center;margin-top:20px">

11     <img src="sample.jpg" class="pic" />

12     </div>

13     </body>

14     </html>

But what is the structure of ‘box-shadow’ function?

box-shadow: horizontal -shadow vertical -shadow blur color;

this structure is simple and of course understandable .please see an example according to this structure:


1     box-shadow: 1px 1px 5px 1px gray;

Try it!

2- Rounding the pictures

Image effects in css


1     <html>

2     <head>

3     <style>

4     .pic {

5     border-radius: 50%;

6     }

7     </style>

8     </head>

9     <body>

10     <div style="text-align:center;margin-top:20px">

11     <img src="sample.jpg" class="pic" />

12     </div>

13     </body>

14     </html>

You can use ‘border-radius’ function in css and you will see that your object is rounding.

Image effects in css

You can set the value of ‘border-radius’ function in terms of percent. And when set the value 50% , you will see that your picture looks like a circle.

3- Set color filter on the pictures

Image effects in css


1     <html>

2     <head>

3     <style>

4     .pic {

5     filter: grayscale(100%);

6     }

7     </style>

8     </head>

9     <body>

10     <div style="text-align:center;margin-top:20px">

11     <img src="sample.jpg" class="pic" />

12     </div>

13     </body>

14     </html>

Perhaps you think that converting a color picture to black and white picture may only be possible by Photoshop. But you can try it with css!

‘filter’ function is a Practical function in putting effects on pictures. One of its capabilities is blacking and whiting pictures with ‘filter: grayscale(100%);’ command.

All Filters

A demonstration of all filter functions:


1     .blur {

2     -webkit-filter: blur(4px);

3     filter: blur(4px);

4     }

5     

6     .brightness {

7     -webkit-filter: brightness(0.30);

8     filter: brightness(0.30);

9     }

10     

11     .contrast {

12     -webkit-filter: contrast(180%);

13     filter: contrast(180%);

14     }

15     

16     .grayscale {

17     -webkit-filter: grayscale(100%);

18     filter: grayscale(100%);

19     }

20     

21     .huerotate {

22     -webkit-filter: hue-rotate(180deg);

23     filter: hue-rotate(180deg);

24     }

25     

26     .invert {

27     -webkit-filter: invert(100%);

28     filter: invert(100%);

29     }

30     

31     .opacity {

32     -webkit-filter: opacity(50%);

33     filter: opacity(50%);

34     }

35     

36     .saturate {

37     -webkit-filter: saturate(7);

38     filter: saturate(7);

39     }

40     

41     .sepia {

42     -webkit-filter: sepia(100%);

43     filter: sepia(100%);

44     }

45     

46     .shadow {

47     -webkit-filter: drop-shadow(8px 8px 10px green);

48     filter: drop-shadow(8px 8px 10px green);

49     }

Keywords :cssimage effects
Written by : amindelavar  |  Posted on : 2016/12/30-17:27   |  Number of Visitors :42
Post a comment  (You must first register on the site to be able to comment.)

Is this article useful ?    Yes    No

If you have more time, you can make your opinion more fully described below :

Search Box
Recent Posts
Most Viewed Posts
Site Statistics

 All articles available : 16

 The number of Registered Users : 3

 Last Updated site : 6 month(s) ago

 Visitors Today(Unique IP) : 8

 Visitors Yesterday(Unique IP) : 7

 Total Visitors(Unique IP) : 3686