CSS ﻪﺒﻌﺟ ﻪﯾﺎﺳ

فهرست مطالب

    نمایش فهرست مطالب

CSS box-shadow Property

ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻝﺎﻤﻋﺍ ﯼﺍﺮﺑ box-shadow

ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﯼﺩﻮﻤﻋ ﻪﯾﺎﺳ ﮏﯾ ﻭ ﯽﻘﻓﺍ ﻪﯾﺎﺳ ﮏﯾ

.ﺖﺳﺍ ﯽﻠﻌﻓ ﻦﺘﻣ ﮓﻧﺭ ،ﻪﯾﺎﺳ ﺽﺮﻓﺶﯿﭘ ﮓﻧﺭ .ﺪﯿﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯼﺩﻮﻤﻋ ﻪﯾﺎﺳ ﮏﯾ ﻭ ﯽﻘﻓﺍ

A <div> element with a box-shadow

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﯼﺩﻮﻤﻋ ﻪﯾﺎﺳ ﮏﯾ ﻭ ﯽﻘﻓﺍ ﻪﯾﺎﺳ ﮏﯾ

   div
{
  box-shadow: 10px 10px;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>
</html>

ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﻪﯾﺎﺳ ﯼﺍﺮﺑ ﮓﻧﺭ ﮏﯾ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﯾﺎﺳ ﮓﻧﺭ color ﺮﺘﻣﺍﺭﺎﭘ

A <div> element with a lightblue box-shadow

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﻪﯾﺎﺳ ﯼﺍﺮﺑ ﮓﻧﺭ ﮏﯾ

  div
{
  box-shadow: 10px 10px lightblue;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a lightblue box-shadow</div>

</body>
</html>

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ Shadow ﻪﺑ ﺍﺭ Blur ﺖﮑﻓﺍ

.ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﺮﺗﺭﺎﺗ ﻪﯾﺎﺳ ،ﺪﺷﺎﺑ ﺮﺘﺸﯿﺑ ﺩﺪﻋ ﻦﯾﺍ ﻪﭼﺮﻫ .ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯼﺭﺎﺗ ﻉﺎﻌﺷ

A <div> element with a 5px blurred, lightblue box-shadow

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﻪﯾﺎﺳ ﻪﺑ ﯼﺭﺎﺗ ﺖﮑﻓﺍ ﮏﯾ

   div
{
  box-shadow: 10px 10px 5px lightblue;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a 5px blurred, lightblue box-shadow.</div>

</body>
</html>

Spread Radius of the Shadow ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ

.ﺪﻫﺩ ﯽﻣ ﺶﻫﺎﮐ ﺍﺭ ﻪﯾﺎﺳ ﻩﺯﺍﺪﻧﺍ ﯽﻔﻨﻣ ﺭﺍﺪﻘﻣ ﻭ ﺪﻫﺩ ﯽﻣ ﺶﯾﺍﺰﻓﺍ ﺍﺭ ﻪﯾﺎﺳ ﻩﺯﺍﺪﻧﺍ ﺖﺒﺜﻣ ﺭﺍﺪ

A <div> element with a blurred, lightblue box-shadow, with a spread radius of 12px

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﻪﯾﺎﺳ ﺵﺮﺘﺴﮔ ﻉﺎﻌﺷ

   div
{
  box-shadow: 10px 10px 5px 12px lightblue;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px.</div>

</body>
</html>

ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ inset ﺮﺘﻣﺍﺭﺎﭘ

.ﺪﻫﺩ ﯽﻣ ﺮﯿﯿﻐﺗ ﯽﻠﺧﺍﺩ ﻪﯾﺎﺳ ﮏﯾ ﻪﺑ (outset) ﯽﻧﻭﺮﯿﺑ ﻪﯾﺎﺳ ﮏﯾ ﺯﺍ ﺍﺭ ﻪﯾﺎﺳ

A <div> element with a blurred, lightblue, inset box-shadow

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺍﺭ inset ﺮﺘﻣﺍﺭﺎﭘ

   div
{
  box-shadow: 10px 10px 5px lightblue inset;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a blurred, lightblue, inset box-shadow.</div>

</body>
</html>

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺩﺪﻌﺘﻣ ﯼﺎﻫ ﻪﯾﺎﺳ

:ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻪﯾﺎﺳ ﻦﯾﺪﻨﭼ ﺪﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ ﺮﺼﻨﻋ ﮏﯾ

ﻝﺎﺜﻣ

   div
{
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
  margin: 20px;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
  margin: 20px;
}
</style>
</head>
<body>

<h1>Multiple Shadows</h1>

<div id="example1">
  <h2>Multiple shadows</h2>
  <p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
<br>

<div id="example2">
  <h2>Multiple shadows with blur effect</h2>
  <p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
</div>

</body>
</html>

ﺎﻫ ﺕﺭﺎﮐ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺪﻨﻧﺎﻣ ﺬﻏﺎﮐ ﯼﺎﻫﺕﺭﺎﮐ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ box

1

January 1, 2021

Norway

Hardanger, Norway

ﻝﺎﺜﻣ

  div.card
{
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: 
center;
}

→ (ﯽﻨﺘﻣ ﺕﺭﺎﮐ) ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 40px;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h1>Create Cards</h1>

<p>The box-shadow property can be used to create paper-like cards:</p>

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2021</p>
  </div>
</div>

</body>
</html>

→ (ﺮﯾﻮﺼﺗ ﺕﺭﺎﮐ) ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ

<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h1>Create Polaroid Images</h1>

<p>The box-shadow property can be used to create polaroid images:</p>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

</body>
</html>

CSS ﻪﯾﺎﺳ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

:ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ CSS ﻪﯾﺎﺳ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺮﯾﺯ ﻝﻭﺪﺟ

box-shadow

ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﻪﯾﺎﺳ ﺪﻨﭼ ﺎﯾ ﮏﯾ

text-shadow

ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﻦﺘﻣ ﻪﺑ ﻪﯾﺎﺳ ﺪﻨﭼ ﺎﯾ ﮏﯾ

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024