دهکده بزرگ برنامه نویسی

قرار دادن افکت بر روی تصاویر در css

شما می توانید افکت های زیادی را بر روی یک تصویر در css اعمال کنید. و می توانید چند نمونه از این افکت ها را در زیر ببینید:

1- قرار دادن سایه بر روی تصاویر

قرار دادن افکت بر روی تصاویر در 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>

اما ساختار دستوری "box-shadow" چیست؟


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

این ساختار ، یک نوع ساده و قابل فهم است. می توانید مثالی از آن را در پایین ببینید:


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

می توانی آزمایشش کنی!

2- گرد کردن تصاویر

قرار دادن افکت بر روی تصاویر در 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>

شما می توانید از تابع "border-radius" در css استفاده کنید و خواهید دید که شی شما (می تواند هر چیزی باشد) گرد خواهد شد.

قرار دادن افکت بر روی تصاویر در css

شما می توانید مقدار تابع "border-radius" را به صورت درصد بنویسید. و هنگامی که مقدار را 50% بگذارید ، خواهید دید که تصویرشما مانند دایره گرد شده است.

3- قرار دادن فیلتر رنگی بر روی تصاویر

قرار دادن افکت بر روی تصاویر در 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>

شاید تا قبل از این فکر می کردید که سیاه -سفید کردن تصاویر ، نگاتیو کردن آن ها یا هر افکت گذاری رنگی بر روی تصاویر فقط در فتوشاپ و نرم افزار های از این دست ممکن است. اما جالب است بدانید که شما می توانید با css این کار ها را انجام دهید. به راحتی و با یک خط کد!

تابع "filter" ، یک تابع وسیع و کاربردی در زمینه قرار دادن افکت بر روی تصاویر است. یکی از ویژگی های این تابع ، سیاه-سفید کردن عکس است. بدین صورت که کافی است دستور "filter: grayscale(100%);" را در بخش استایل عکس خود وارد کنید.

و اما این جا می توانید همه ویژگی های تابع "filter" را ببینید:


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     }

کلید واژه ها :cssافکت بر روی تصویرفیلتر کردن تصویر
نوشته شده توسط : amindelavar  |  ارسال شده در تاریخ : 2017/01/07-08:31   |  تعداد بازدید کنندگان :65
نظرات
guest
ارسال شده در تاریخ : 2017/11/19 - 07:35

guest test post

<a href="http://gdhyuei23kol.com/">bbcode</a>

<a href="http://gdhyuei23kol.com/">html</a>

http://gdhyuei23kol.com/ simple

guest
ارسال شده در تاریخ : 2017/11/19 - 17:58

Hello. http://jakshgy773733.us

***


ارسال نظر شما  (شما ابتدا باید در سایت ثبت نام کنید تا بتوانید نظر دهید.)

آیا این مقاله برای شما مفید بود؟    بله    خیر

اگر وقت بیشتری داری ، می تونی نظرت رو به طور کامل تری در زیر توضیح دهی :

جعبه جستجو
مقاله های اخیر
مقاله های پر بیننده
آمار سایت

 تعداد تمامی مقالات موجود : 16

 تعداد اعضای سایت : 3

 آخرین بروز رسانی سایت : 6 ماه پیش

 بازدید کنندگان امروز (آی پی یکتا) : 8

 بازدید کنندگان دیروز (آی پی یکتا) : 7

 بازدید کنندگان کل (آی پی یکتا) : 3686