۱
آبان

جلسه ۴۴ : افکت Shadow در CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. یکی از ویژگی های زیبایی که در CSS ارائه شده است، قابلیت ایجاد سایه ( افکت Shadow در CSS ) است که در box انواع عناصر و متن های آن ها اعمال می شود. با تنظیم صحیح این ویژگی می توانید افکت های سایه ی زیبایی را به عناصر و متن خود اضافه کرده و جذابیت و برجستگی عناصر صفحات وب خود را به کاربران نشان دهید. در این مبحث ساختار کلی سایه انداختن در CSS را بطور کامل ارائه کرده ایم.

کار با افکت Shadow در CSS

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

Norway

Box Shadow

افکت سایه انداختن در متن

انواع افکت Shadow در CSS

با استفاده از افکت Shadow در CSS می توانید افکت های سایه را به متن یا عناصر HTML اضافه کنید.

افکت های سایه انداختن در CSS به طور کلی به نوع زیر تقسیم می شود:

text-shadow
box-shadow

استفاده از افکت سایه انداختن در CSS برای متن

با استفاده از خصوصیت text-shadow می توان برای متن های عناصر HTML افکت سایه ایجاد کرد.

در ساده ترین حالت شما می توانید سایه افقی (۲ پیکسل) و سایه عمودی (۲ پیکسل) را مشخص کنید:

مثال : حالت ساده ی text-shadow

h1 {
    text-shadow: 2px 2px;
}

h1 {

text-shadow: 2px 2px;

}

خودتان امتحان کنید »

همچنین می توانید یک رنگ به سایه اضافه کنید:

سایه متن ساده

مثال : سایه ی متن قرمز

h1 {
    text-shadow: 2px 2px red;
}

h1 {

text-shadow: 2px 2px red;

}

خودتان امتحان کنید »

می توانید با افزودن افکت blur سایه را محو کنید:

مثال : مات کردن سایه متن

h1 {
    text-shadow: 2px 2px 5px red;
}

h1 {

text-shadow: 2px 2px 5px red;

}

خودتان امتحان کنید »

مثال زیر یک متن به رنگ سفید با سایه مشکی را نشان می دهد:

متن سفید

مثال : متن سفید با سایه تیره

h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

h1 {

color: white;

text-shadow: 2px 2px 4px #000000;

}

خودتان امتحان کنید »

مثال ایجاد نئون قرمز درخشش سایه در متن:

مثال : نئون قرمز

h1 {
    text-shadow: 0 0 3px #FF0000;
}

h1 {

text-shadow: 0 0 3px #FF0000;

}

خودتان امتحان کنید »

ایجاد چندین افکت Shadow در CSS

برای اضافه کردن بیش از یک سایه به متن، می توانید لیستی از سایه ها را از هم جدا کنید.

مثال زیر ترکیبی از دو سایه ی نئون قرمز و آبی را نشان می دهد:

مثال : ترکیب سایه ها

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

h1 {

text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

}

خودتان امتحان کنید »

مثال ایجاد یک متن سفید با یک سایه ی به رنگ آبی تیره محو شده:

متن سفید با سایه آبی

مثال : متن سفید و سایه آبی

h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

h1 {

color: white;

text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

}

خودتان امتحان کنید »

شما همچنین می توانید با استفاده از خصوصیت text-shadow یک border رنگی بدون سایه در اطرف متن خود ایجاد کنید:

مثال : متن زرد با border مشکی

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

h1 {

color: yellow;

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}

خودتان امتحان کنید »

خصوصیت box-shadow در CSS

خصوصیت box-shadow در CSS یک سایه را به یک عنصر HTML اعمال می کند.

در ساده ترین حالت شما می توانید یک سایه ی افقی و عمودی ایجاد کنید:

در مرحله ی بعدی می توانید رنگ سایه را نیز تعیین کنید:

تغییر رنگ سایه

مثال : تغییر رنگ سایه

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

div {

box-shadow: 10px 10px grey;

}

خودتان امتحان کنید »

همچنین می توانید افکت blur را نیز به سایه اضافه کنید:

مات کردن رنگ زمینه

مثال : مات کردن رنگ زمینه

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

div {

box-shadow: 10px 10px 5px grey;

}

خودتان امتحان کنید »

همچنین می توانید افکت سایه را به شبه عناصر before:: و after:: نیز اضافه کنید تا افکت های جالب تری را ایجاد کنید.

مثال : استفاده از شبه کلاس ها

#boxshadow {
    position: relative;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}

#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}

#boxshadow {

position: relative;

box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

padding: 10px;

background: white;

}

#boxshadow img {

width: 100%;

border: 1px solid #8a4419;

border-style: inset;

}

#boxshadow::after {

content: '';

position: absolute;

z-index: -1; /* hide shadow behind image */

box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

width: 70%;

left: 15%; /* one half of the remaining 30% */

height: 100px;

bottom: 0;

}

خودتان امتحان کنید »

کارت ها

کد CSS مثال کارت TEXT:

مثال : کارت text

<!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>

<h2>Cards</h2>

<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, 2016</p>
  </div>
</div>

</body>
</html>

<!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>

<h2>Cards</h2>

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

</div>

<p>January 1, 2016</p>

</div>

</body>

</html>

خودتان امتحان کنید »

کد CSS ایجاد کارت عکس:

مثال : کارت تصویر

<!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>

<h2>Polaroid Images / Cards</h2>

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

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

<h2>Polaroid Images / Cards</h2>

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

<p>Hardanger, Norway</p>

</div>

</body>

</html>

خودتان امتحان کنید »

کلام آخر

یکی از جالب ترین قابلیت هایی که در نسخه ی CSS3 به خوبی توسعه یافته قابلیت افکت Shadow در CSS است که با ایجاد افکت های سایه ی جذاب عناصر و متن سایت شما را برجسته تر و جذاب تر نشان می دهند.

به اشتراک بگذارید

افکت Shadow در CSS

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۴۴ : افکت Shadow در CSS

مقدمه

کار با افکت Shadow در CSS

انواع افکت Shadow در CSS

استفاده از افکت سایه انداختن در CSS برای متن

ایجاد چندین افکت Shadow در CSS

خصوصیت box-shadow در CSS

کارت ها

کلام آخر

لیست مطالب دوره

آموزش های پیشرفته CSS

گریدبندی در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ