آموزش فیلترهای متنی و تصویری در CSS

4 سال پیش

امتیاز دهید post

آموزش فیلترهای متنی و تصویری در CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فیلترهای متنی و تصویری در CSS خواهیم پرداخت.

بدون استفاده از تصاویر یا سایر گرافیک ها می توانید از فیلترهای CSS برای افزودن جلوه های ویژه به متن، تصاویر و سایر جنبه های یک صفحه وب استفاده کنید. فیلترها فقط در Internet Explorer 4.0 کار می کنند. اگر سایت خود را برای چندین مرورگر توسعه می دهید، ممکن است استفاده از فیلترهای CSS ایده خوبی نباشد زیرا این احتمال وجود دارد که هیچ مزیتی نداشته باشد.

در این فصل جزئیات هر فیلتر CSS را خواهیم دید. این فیلترها ممکن است در مرورگر شما کار نکنند.

کانال آلفا

فیلتر کانال آلفا میزان تیرگی جسم را تغییر می دهد، که باعث می شود آن در پس زمینه ترکیب شود. پارامترهای زیر را می توان در این فیلتر استفاده کرد –

	پارامترها و توضیحات
1	opacity سطح تیرگی. 0 کاملاً شفاف ، 100 کاملاً مات است.
2	finishopacity Level of the opacity at the other end of the object.
3	style شکل شیب تیرگی. 0 = یکنواخت 1 = خطی 2 = شعاعی 3 = مستطیل
4	startX مختصات X برای شروع شیب کدری شروع می شود.
5	startY مختصات Y برای شروع شیب کدری شروع می شود..
6	finishX مختصات X برای پایان دادن به شیب کدری.
7	finishY مختصات Y برای پایان دادن به شیب کدری.

مثال

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Alpha(Opacity=100, 
         FinishOpacity = 0, 
         Style = 2, 
         StartX = 20, 
         StartY = 40, 
         FinishX = 0, 
         FinishY = 0)" /&gt;
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue;
         Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)"&gt;CSS Tutorials&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png" alt = "CSS Logo"

style = "Filter: Alpha(Opacity=100,

FinishOpacity = 0,

Style = 2,

StartX = 20,

StartY = 40,

FinishX = 0,

FinishY = 0)" />

<p>Text Example:</p>

<div style = "width: 357;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: blue;

Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>

</body>

</html>

خروجی

Image Example:

CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo

Text Example:

CSS Tutorials

Motion Blur

Motion Blur برای ایجاد تصاویر یا متن های تار با جهت و قدرت استفاده می شود. پارامترهای زیر را می توان در این فیلتر استفاده کرد –

	پارامترها و توضیحات
1	add درست یا غلط. در صورت صحت، تصویر به تصویر تار اضافه می شود. و در صورت نادرست بودن ، تصویر به تصویر تار اضافه نمی شود.
2	direction جهت تاری، در جهت عقربه های ساعت حرکت می کند و به 45 درجه افزایش می یابد. مقدار پیش فرض 270 (سمت چپ) است. 0 = بالا 45 = بالا سمت راست 90 = درست است 135 = پایین سمت راست 180 = پایین 225 = پایین سمت چپ 270 = چپ 315 = بالا سمت چپ
3	strength تعداد پیکسل های تاری افزایش می یابد. پیش فرض 5 پیکسل است.

پارامترها و توضیحات

add

درست یا غلط. در صورت صحت، تصویر به تصویر تار اضافه می شود. و در صورت نادرست بودن ، تصویر به تصویر تار اضافه نمی شود.

direction

جهت تاری، در جهت عقربه های ساعت حرکت می کند و به 45 درجه افزایش می یابد. مقدار پیش فرض 270 (سمت چپ) است.

0 = بالا

45 = بالا سمت راست

90 = درست است

135 = پایین سمت راست

180 = پایین

225 = پایین سمت چپ

270 = چپ

315 = بالا سمت چپ

strength

تعداد پیکسل های تاری افزایش می یابد. پیش فرض 5 پیکسل است.

مثال

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" alt = "CSS Logo" 
         style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: blue; 
         Filter: Blur(Add = 1, Direction = 225, Strength = 10)"&gt;CSS Tutorials
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png" alt = "CSS Logo"

style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">

<p>Text Example:</p>

<div style = "width: 357;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: blue;

Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials

</div>

</body>

</html>

خروجی

mage Example:

CSS Logo
Text Example:

CSS Tutorials

mage Example:

CSS Logo

Text Example:

CSS Tutorials

فیلتر کروم

از فیلتر کروم برای شفاف سازی هر رنگ خاصی استفاده می شود و معمولاً از آن برای تصاویر استفاده می شود. همچنین می توانید از آن با نوارهای پیمایشی استفاده کنید. پارامتر زیر را می توان در این فیلتر استفاده کرد –

color

رنگی که دوست دارید شفاف باشد.

مثال

Live Demo
&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/images/css.gif" 
         alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 580; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: #3300FF; 
         Filter: Chroma(Color = #3300FF)"&gt;CSS Tutorials&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/images/css.gif"

alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">

<p>Text Example:</p>

<div style = "width: 580;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: #3300FF;

Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>

</body>

</html>

خروجی

Image Example:

CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo

Text Example:

CSS Tutorials

افکت Drop Shadow

از Drop Shadow برای ایجاد سایه از شی شما در جابجایی و رنگ X (افقی) و Y (عمودی) استفاده می شود.

پارامترهای زیر را می توان در این فیلتر استفاده کرد –

.	پارامترها و توضیحات
1	color رنگ ، در قالب # RRGGBB
2	offX تعداد پیکسل های Drop Shadow از جسم بصری در امتداد محور x جابجا می شوند. اعداد صحیح مثبت سایه قطره را به سمت راست ، عدد صحیح منفی سایه را به سمت چپ منتقل می کنند.
3	offY تعداد پیکسل های Drop Shadow از جسم بصری در امتداد محور y جابجا می شوند. عددهای صحیح مثبت سایه افت را به سمت پایین ، عددهای صحیح منفی سایه را به سمت بالا حرکت می دهند.
4	positive در صورت true بوذن، تمام پیکسل های مات شی object دارای یک سایه است. در صورت false بودن، تمام پیکسل های شفاف دارای سایه انداز هستند. پیش فرض درست است

مثال

Live Demo
&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter:drop-shadow(2px 2px 1px #FF0000);"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter:drop-shadow(3px 3px 2px #000000);"&gt;CSS Tutorials&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png"

alt = "CSS Logo"

style = "filter:drop-shadow(2px 2px 1px #FF0000);">

<p>Text Example:</p>

<div style = "width: 357;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: red;

filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>

</body>

</html>

خروجی

Image Example:

CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo

Text Example:

CSS Tutorials

افکت Flip

از اثر افکت Flip برای ایجاد یک تصویر آینه ای از شی استفاده می شود. پارامترهای زیر را می توان در این فیلتر استفاده کرد –

FlipH

یک تصویر آینه ای افقی ایجاد می کند

FlipV

یک تصویر آینه ای عمودی ایجاد می کند

مثال

Live Demo
&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: FlipH"&gt;
      
      &lt;img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 300; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: FlipV"&gt;CSS Tutorials&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png"

alt = "CSS Logo"

style = "filter: FlipH">

<p>Text Example:</p>

<div style = "width: 300;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: red;

filter: FlipV">CSS Tutorials</div>

</body>

</html>

خروجی

Image Example:

CSS Logo CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo CSS Logo

Text Example:

CSS Tutorials

افکت Glow

افکت Glow برای ایجاد درخشش در اطراف جسم استفاده می شود اگر یک تصویر شفاف باشد، در اطراف پیکسل های مات آن درخشش ایجاد می شود. پارامترهای زیر را می توان در این فیلتر استفاده کرد –

color

رنگی که می خواهید درخشش آن باشد.

strength

شدت درخشش (از 1 تا 255).

مثال

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Glow(Color=#00FF00, Strength=20)"&gt;CSS Tutorials&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png"

alt = "CSS Logo"

style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">

<p>Text Example:</p>

<div style = "width: 357;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: red;

filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>

</body>

</html>

خروجی

Image Example:

CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo

Text Example:

CSS Tutorials

افکت Grayscale

از اثر افکت Grayscale برای تبدیل رنگ جسم به 256 سایه خاکستری استفاده می شود. پارامتر زیر در این فیلتر استفاده شده است –

Grayscale

رنگ شی را به 256 سایه خاکستری تبدیل می کند.

مثال

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: grayscale(50%)"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: grayscale(50%)"&gt;CSS Tutorials&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png"

alt = "CSS Logo"

style = "filter: grayscale(50%)">

<p>Text Example:</p>

<div style = "width: 357;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: red;

filter: grayscale(50%)">CSS Tutorials</div>

</body>

</html>

خروجی

Image Example:

CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo

Text Example:

CSS Tutorials

افکت Invert

از اثر معکوس برای ترسیم رنگ های شی در مقادیر مخالف آنها در طیف رنگ استفاده می شود به عنوان مثال، برای ایجاد یک تصویر منفی. پارامتر زیر در این فیلتر استفاده شده است –

Invert

رنگهای جسم را با مقدار مخالف آنها در طیف رنگی ترسیم می کند.

مثال

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: invert(100%)"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: invert(100%)"&gt;CSS Tutorials&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png"

alt = "CSS Logo"

style = "filter: invert(100%)">

<p>Text Example:</p>

<div style = "width: 357;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: red;

filter: invert(100%)">CSS Tutorials</div>

</body>

</html>

خروجی

Image Example:

CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo

Text Example:

CSS Tutorials

افکت Mask

از اثر Mask برای تبدیل پیکسل های شفاف به رنگ مشخص استفاده می شود و پیکسل های مات را شفاف می کند. پارامتر زیر در این فیلتر استفاده شده است –

color

رنگی که در برخی قسمت ها شفاف می شوند.

مثال

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Mask(Color=#00FF00)"&gt;CSS Tutorials
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png"

alt = "CSS Logo"

style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">

<p>Text Example:</p>

<div style = "width: 357;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: red;

filter: Mask(Color=#00FF00)">CSS Tutorials

</div>

</body>

</html>

خروجی

Image Example:

CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo

Text Example:

CSS Tutorials

فیلتر Shadow

از فیلتر Shadow برای ایجاد سایه میرایی در جهت و رنگ مشخص شده استفاده می شود. این یک فیلتر است که بین Dropshadow و Glow قرار دارد. پارامترهای زیر را می توان در این فیلتر استفاده کرد –

	پارامترها و توضیحات
1	color رنگی که می خواهید سایه باشد.
2	direction جهت تاری، در جهت عقربه های ساعت حرکت می کند و به 45 درجه افزایش می یابد. مقدار پیش فرض 270 (سمت چپ) است. 0 = بالا 45 = بالا سمت راست 90 = درست است 135 = پایین سمت راست 180 = پایین 225 = پایین سمت چپ 270 = چپ 315 = بالا سمت چپ

پارامترها و توضیحات

color

رنگی که می خواهید سایه باشد.

direction

جهت تاری، در جهت عقربه های ساعت حرکت می کند و به 45 درجه افزایش می یابد. مقدار پیش فرض 270 (سمت چپ) است.

0 = بالا

45 = بالا سمت راست

90 = درست است

135 = پایین سمت راست

180 = پایین

225 = پایین سمت چپ

270 = چپ

315 = بالا سمت چپ

مثال

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: 
         Arial Black; 
         color: red; 
         filter: Shadow(Color=#0000FF, Direction=225)"&gt;CSS Tutorials
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png"

alt = "CSS Logo"

style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">

<p>Text Example:</p>

<div style = "width: 357;

height: 50;

font-size: 30pt;

font-family:

Arial Black;

color: red;

filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials

</div>

</body>

</html>

خروجی

Image Example:

CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo

Text Example:

CSS Tutorials

افکت Wave

از اثر موج برای اعوجاج موج سینوسی به جسم استفاده می شود تا موج دار به نظر برسد. پارامترهای زیر را می توان در این فیلتر استفاده کرد –

	پارامترها و توضیحات
1	add مقدار 1 تصویر اصلی را به تصویر موج اضافه می کند، مقدار 0 نمی دهد.
2	freq تعداد امواج
3	light قدرت نور روی موج (از 0 تا 100).
4	phase موج سینوسی از چه درجه ای باید شروع شود (از 0 تا 100).
5	strength شدت اثر موج.

مثال

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Chroma(Color = #000000) 
         Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)"&gt;CSS Tutorials
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png"

alt = "CSS Logo"

style = "filter: Chroma(Color = #000000)

Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">

<p>Text Example:</p>

<div style = "width: 357;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: red;

filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials

</div>

</body>

</html>

خروجی

Image Example:

CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo

Text Example:

CSS Tutorials

افکت X-Ray

اثر اشعه ایکس مقیاسهای خاکستری را نشان می دهد و عمق رنگ را صاف می کند. پارامتر زیر در این فیلتر استفاده شده است:

X-Ray

مقادیر خاکستری و عمق رنگ را صاف می کند.

مثال

Live Demo
&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Image Example:&lt;/p&gt;
      
      &lt;img src = "/css/images/logo.png" 
         alt = "CSS Logo" 
         style = "filter: Xray"&gt;
      
      &lt;p&gt;Text Example:&lt;/p&gt;
      
      &lt;div style = "width: 357; 
         height: 50; 
         font-size: 30pt; 
         font-family: Arial Black; 
         color: red; 
         filter: Xray"&gt;CSS Tutorials
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

</head>

<body>

<p>Image Example:</p>

<img src = "/css/images/logo.png"

alt = "CSS Logo"

style = "filter: Xray">

<p>Text Example:</p>

<div style = "width: 357;

height: 50;

font-size: 30pt;

font-family: Arial Black;

color: red;

filter: Xray">CSS Tutorials

</div>

</body>

</html>

خروجی

Image Example:

CSS Logo
Text Example:

CSS Tutorials

Image Example:

CSS Logo

Text Example:

CSS Tutorials

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش فیلترهای متنی و تصویری در CSS

کانال آلفا

مثال

خروجی

Motion Blur

مثال

خروجی

فیلتر کروم

مثال

خروجی

افکت Drop Shadow

مثال

خروجی

افکت Flip

مثال

خروجی

افکت Glow

مثال

خروجی

افکت Grayscale

مثال

خروجی

افکت Invert

مثال

خروجی

افکت Mask

مثال

خروجی

فیلتر Shadow

مثال

خروجی

افکت Wave

مثال

خروجی

افکت X-Ray

مثال

خروجی

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه