CSS ﺮﯾﻮﺼﺗ ﺏﺎﺗﺯﺎﺑ

فهرست مطالب

.ﺪﯿﻨﮐ ﺲﮑﻌﻨﻣ ﺍﺭ ﺮﯾﻮﺼﺗ ﮏﯾ ﻪﻧﻮﮕﭼ ﻪﮐ ﺖﻓﺮﮔ ﺪﯿﻫﺍﻮﺧ ﺩﺎﯾ ﺎﻤﺷ ﻞﺼﻓ ﻦﯾﺍ ﺭﺩ

CSS ﺮﯾﻮﺼﺗ ﺏﺎﺗﺯﺎﺑ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﻮﺼﺗ ﺱﺎﮑﻌﻧﺍ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ box-reflect<

:ﺪﺷﺎﺑ ﺪﻧﺍﻮﺗ ﯽﻣ box-reflect ﯽﮔﮋﯾﻭ ﺭﺍﺪﻘﻣ

below
above
left
right

ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

.ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﯽﮔﮋﯾﻭ ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ ﻝﻭﺪﺟ

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺩﺮﮐ ﯽﻣ ﺭﺎﮐ a ﺎﺑ ﻪﮐ ﺍﺭ ﯼﺍ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ -webkit- ﻝﺎﺒﻧﺩ ﻪﺑ ﺩﺍﺪﻋﺍ

Property
box-reflect	4.0 -webkit-	79.0 -webkit-	Not supported	4.0 -webkit-	15.0 -webkit-

ﺎﻫ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

:ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﺍﺭ ﺮﯾﻮﺼﺗ ﺮﯾﺯ ﺱﺎﮑﻌﻧﺍ ﺎﻣ ﺎﺠﻨﯾﺍ ﺭﺩ

  img {
  -webkit-box-reflect: below;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image:</p>
<img src="img_tree.png">

</body>
</html>

ﻝﺎﺜﻣ

:ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﺍﺭ ﺮﯾﻮﺼﺗ ﺖﺳﺍﺭ ﺖﻤﺳ ﺱﺎﮑﻌﻧﺍ ﺎﻣ ﺎﺠﻨﯾﺍ ﺭﺩ

  img {
  -webkit-box-reflect: right;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: right;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection to the right of the image:</p>
<img src="img_tree.png">

</body>
</html>

CSS ﺏﺎﺗﺯﺎﺑ ﺖﺴﻓﺍ

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺍﺭ ﻥﺁ ﻩﺯﺍﺪﻧﺍ ،ﺱﺎﮑﻌﻧﺍ ﻭ ﺮﯾﻮﺼﺗ ﻦﯿﺑ ﻪﻠﺻﺎﻓ ﻥﺩﺮﮐ ﺺﺨﺸﻣ ﯼﺍﺮﺑ

ﻝﺎﺜﻣ

:ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﻞﺴﮑﯿﭘ 20 ﺖﺴﻓﺍ ﺎﺑ ﺍﺭ ﺮﯾﻮﺼﺗ ﺮﯾﺯ ﺱﺎﮑﻌﻧﺍ ﺎﻣ ﺎﺠﻨﯾﺍ ﺭﺩ

  img {
  -webkit-box-reflect: below 20px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below 20px;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image, with a 20 pixels offset:</p>
<img src="img_tree.png">

</body>
</html>

ﻥﺎﯾﺩﺍﺮﮔ ﺎﺑ CSS ﺏﺎﺗﺯﺎﺑ

.ﻢﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺱﺎﮑﻌﻧﺍ ﯼﻭﺭ ﺮﺑ ﻥﺪﺷ ﻮﺤﻣ ﺮﺛﺍ ﮏﯾ ﻢﯿﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ ﺎﻣ

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺏﺎﺗﺯﺎﺑ ﯼﻭﺭ ﻩﺪﻨﻨﮐ ﻮﺤﻣ ﺖﮑﻓﺍ ﮏﯾ

  img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), 
   rgba(0,0,0,0.4));
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection with gradient (to make a fade-out effect):</p>
<img src="img_tree.png">

</body>
</html>