افکت دادن به عکس در CSS
خوش اومدین به بیست و ششمین جلسه از دوره آموزش CSS. ما تا اینجای دوره با ویژگی های زیادی آشنا شدیم که با خیلی از اونها میتونستیم تغییراتی توی ظاهر تصاویر ایجاد کنیم. در این جلسه قراره که مروری کنیم بر این ویژگی ها که روی تصویر ما اثرگذاری میکنند و قابلیت افکت دادن به عکس در css رو دارن و همچنین با ترکیب این ویژگیها و ویژگی های جدیدتر، جلوه ها و افکت های متنوعی رو روی تصاویر ایجاد کنیم. پس با این جلسه با عنوان افکت دادن به عکس در CSS همراه من باشید.
چگونگی افکت دادن به عکس در CSS
گرد کردن گوشه های عکس در CSS
ما پیشتر یاد گرفته بودیم که میتونیم با استفاده از border-radius گوشه های border رو منحنی کنیم. ولی باید بدونید که برای استفاده از border-radius حتما لازم نیست که از ویژگی border استفاده کنیم. اگه ما تصویری رو به پروژه خودمون اضافه کرده باشیم میتونیم با استفاده از border-radius گوشه های تصویر رو گرد کنیم.
نمونه زیر رو ببینید:
img {
border-radius: 8px;
}
ما میتونیم گوشه ها رو به حدی گرد کنیم که عکس مستطیلی شکل ما تبدیل به بیضی بشه. قطعه کد زیر رو ببینید:
img {
border-radius: 50%;
}
کادر بیرونی برای عکس
همونطور که قبلا یاد گرفته بودیم میتونیم از ویژگی border برای کادر دادن به عناصر استفاده کنیم. اگه بصورت همزمان از padding هم استفاده کنیم و ویژگی border رو هم بصورت مناسب مقداردهی کنیم، میتونیم کادر زیبا و ساده ای رو برای تصاویر خودمون ایجاد کنیم. این یکی از تکنیک های افکت دادن به عکس در CSS هست.
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
در قطعه کد بالا من علاوه بر اینکه از border استفاده کردم از ویژگی padding و border-radius هم استفاده کردم. نتیجه رو میتونیم در پایین ببینیم:
همینطور میتونیم با مقداردهی به وضعیت hover عکس خودمون یک سایه هم برای عکس قرار بدیم که زمانی که کاربر با موس روی تصویر رفت، عکس ما سایه دار بشه.
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>
رسپانسیو کردن عکس
یکی دیگه از تکنیک های افکت دادن به عکس در CSS، استفاده از ویژگی responsive هست. این امکان باعث تنظیم خودکار اندازه عکس ما با اندازه صفحه میشه.
در قطعه کد پایین، عرض تصویر من هیچگاه از عرض صفحه بزرگتر نمیشه و ارتفاع تصویر هم بصورت اتوماتیک متناسب با عرض مقداردهی میشه:
img {
max-width: 100%;
height: auto;
}
قراردادن تصویر در مرکز صفحه
برای اینکه یه عکس رو وسط چین کنیم باید ویژگی left و right اون تصویر رو با auto مقداردهی کنیم و عکس خودمون رو داخل یه عنصر با خاصیت block قرار بدیم.
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
ویژگی polaroid در CSS
یکی دیگه از ویژگی های جالبی که برای ما یه کارت با افکت سایه ایجاد میکنه، ویژگی polaroid هست. قطعه کد زیر رو ببینید:
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
همونطور که میبینید من با استفاده از ویژگی هایی که تا اینجا یاد گرفتیم این کارت رو ایجاد کردم. نتیجه کد بالا رو میتونید در پایین ببینید:
ویژگی transparent
یکی دیگه از روش های افکت دادن به عکس در CSS، استفاده از ویژگی transparent هست. ما با کم کردن مقدار opacity تصاویر میتونیم جلوه و افکت خاصی رو به تصاویر خومون بدیم. این ویژگی در تمام مرورگرها بجز نسخه های IE 8 و پایینتر از اون پشتیبانی میشه. برای IE 8 و پایینتر از اون میتونیم از ویژگی filter: alpha استفاده کنیم. قطعه کد زیر رو ببینید:
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
تعیین موقعیت متن در تصویر
ما میتونیم با استفاده از تکنیک زیر متنی را روی تصویر قرار دهیم و موقعیت اون رو هم تعیین کنیم. اگر قصد داشته باشیم متن رو در چپ قرار بدیم میتونیم از کد زیر استفاده کنیم:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
همینطور برای قرار دادن متن در وسط تصویر هم میتونیم از کد زیر استفاده کنیم:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Center text in image:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="center">Centered</div>
</div>
</body>
</html>
نکته مهم برای تعیین محل قرارگیری نوشته روی تصویر مقدار top و left در کلاس center هست.
ایجاد فیلتر روی عکس در CSS
امکان جالب بعدی که برای افکت دادن به عکس در css بررسی میکنیم، ویژگی filter هست. این ویژگی امکانات جذاب و متنوعی رو در اختیار ما قرار میده.
تمامی افکت های بالا توسط ویژگی filter ایجاد شده. به عنوان مثال قطعه کد زیر تصویر ما رو سیاه و سفید میکنه:
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
افکت overlay
یکی دیگه از ویژگی های جالبی که میتونیم با استفاده از کدهای css ایجاد کنیم، افکت overlay هست. نمونه زیر رو ببینید:
در اینجا میتونید کد مربوط به افکت بالا رو ملاحظه کنید:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Fade in Overlay</h2>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
نمونه ای دیگه از ایجاد افکت overlay
میتونید کد نمونه بالا رو اینجا ببینید:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Top</h2>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
معکوس کردن عکس
ما میتونیم تصویر خودمون رو با استفاده از متد scaleX در ویژگی transform معکوس کنیم. کافیه که به این تابع مقدار منفی ۱ رو بدیم. قطعه کد زیر رو ببینید:
img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
