سلام دوستان! صادق جعفری هستم و به قسمت ششم آموزش CSS خوش اومدید. تو این قسمت می‌خوایم حسابی با تصاویر بازی کنیم و یاد بگیریم چطور تصاویر رو به شکل‌ها و استایل‌های مختلف دربیاریم. از تصاویر گرد و thumbnail گرفته تا تصاویر responsive و polaroid، همه رو بررسی می‌کنیم. حتی یاد می‌گیریم چطور فیلترهای جذاب روی تصاویر اعمال کنیم، تصاویر رو برگردونیم (flip)، و گالری تصاویر responsive ایجاد کنیم. با من همراه باشید تا با هم دیگه این موارد رو بررسی کنیم و پروژه‌های جذاب‌تری بسازیم.
خصوصیت border-radius برای تصاویر گرد
خصوصیت border-radius در CSS به ما این امکان رو میده که گوشه‌های عناصر رو گرد کنیم. این ویژگی نه تنها برای باکس‌ها و بلوک‌ها کاربرد داره، بلکه می‌تونیم ازش برای گرد کردن تصاویر هم استفاده کنیم. وقتی از این ویژگی استفاده کنیم، می‌تونیم تصاویرمون رو به شکل‌های مختلفی مثل دایره یا بیضی دربیاریم.
مثال ساده
بیایید یک تصویر ساده رو با استفاده از border-radius به یک تصویر گرد تبدیل کنیم. فرض کنید ما یک تصویر داریم که به صورت زیر در HTML قرار داده شده:
<img src="example.jpg" alt="Example Image" class="rounded-image">
حالا با استفاده از CSS، می‌تونیم گوشه‌های این تصویر رو گرد کنیم:
.rounded-image {
width: 200px; /* Image width */
height: 200px; /* Image height */
border-radius: 50%; /* Round the corners by 50% to make them round */
}
توضیحات:
widthوheightاندازه تصویر رو تعیین می‌کنن.border-radius: 50%باعث میشه تصویر به شکل دایره دربیاد. این مقدار گوشه‌های تصویر رو به اندازه 50% از عرض و ارتفاع گرد می‌کنه که نتیجه‌اش دایره میشه.
مثال کاربردی‌تر
گاهی وقتا ممکنه بخوایم فقط یک یا چند گوشه‌ی تصویر رو گرد کنیم. این کار رو هم می‌تونیم با استفاده از border-radius انجام بدیم. فرض کنید یک تصویر داریم که می‌خوایم فقط گوشه‌های بالایی اون رو گرد کنیم:
<img src="example.jpg" alt="Example Image" class="top-rounded-image">
حالا با استفاده از CSS، فقط گوشه‌های بالایی تصویر رو گرد می‌کنیم:
.top-rounded-image {
width: 200px;
height: 200px;
border-top-left-radius: 20px; /* Rounding the upper left corner */
border-top-right-radius: 20px; /* Round the top right corner */
}
ایجاد تصاویر Thumbnail
تصاویر Thumbnail یا تصاویر کوچک، نسخه‌های کوچکتر و بهینه‌سازی شده‌ای از تصاویر اصلی هستند که معمولاً در گالری‌ها، فهرست‌ها یا پیش‌نمایش‌های تصویری وب‌سایت‌ها استفاده می‌شوند. این تصاویر به کاربران اجازه می‌دهند تا پیش‌نمایشی از تصاویر بزرگتر را ببینند و در صورت علاقه، نسخه بزرگتر را مشاهده کنند.
مثال ساده
برای ایجاد یک تصویر Thumbnail، می‌توانیم از ویژگی‌های CSS استفاده کنیم تا اندازه و ظاهر تصویر را تنظیم کنیم. فرض کنید یک تصویر داریم که در HTML به صورت زیر قرار داده شده:
<img src="example.jpg" alt="Example Image" class="thumbnail">
حالا با استفاده از CSS، اندازه و ظاهر این تصویر را به صورت Thumbnail تنظیم می‌کنیم:
.thumbnail {
width: 150px; /* Adjust the width of the image */
height: auto; /* Adjust the height automatically according to the width */
border: 1px solid #ddd; /* Add a thin border to the image */
padding: 5px; /* Add inner spacing to the image */
box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Add shadows to the image */
border-radius: 5px; /* Round the corners of the image */
}توضیحات:
width: 150px;عرض تصویر را به 150 پیکسل تنظیم می‌کند.height: auto;ارتفاع تصویر را به صورت خودکار متناسب با عرض تنظیم می‌کند تا نسبت تصویر حفظ شود.border: 1px solid #ddd;یک حاشیه نازک و خاکستری به تصویر اضافه می‌کند.padding: 5px;فاصله داخلی تصویر را تنظیم می‌کند.box-shadow: 0 0 5px rgba(0,0,0,0.2);سایه‌ای به تصویر اضافه می‌کند تا جلوه بیشتری داشته باشد.border-radius: 5px;گوشه‌های تصویر را کمی گرد می‌کند.
مثال پیشرفته‌تر با Hover Effect
می‌توانیم جلوه‌های بیشتری به تصاویر Thumbnail اضافه کنیم تا وقتی کاربر موس خود را روی تصویر قرار می‌دهد، تغییراتی در ظاهر تصویر ایجاد شود. به عنوان مثال، می‌توانیم اندازه تصویر را کمی بزرگتر کنیم و سایه آن را تغییر دهیم:
.thumbnail {
width: 150px;
height: auto;
border: 1px solid #ddd;
padding: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
border-radius: 5px;
transition: transform 0.3s, box-shadow 0.3s; /* Add transition animation */
}
.thumbnail:hover {
transform: scale(1.1); /* Zoom in on Hover */
box-shadow: 0 0 15px rgba(0,0,0,0.4); /* Increase the shadow of the image during Hover */
}توضیحات:
transition: transform 0.3s, box-shadow 0.3s;انیمیشن انتقال را برای تغییرات در اندازه و سایه تصویر اضافه می‌کند.transform: scale(1.1);تصویر را به هنگام قرار گرفتن موس روی آن 10% بزرگتر می‌کند.box-shadow: 0 0 15px rgba(0,0,0,0.4);سایه تصویر را به هنگام قرار گرفتن موس روی آن افزایش می‌دهد.
تصاویر Responsive در CSS
تصاویر Responsive یا واکنش‌گرا، تصاویری هستند که با توجه به اندازه صفحه‌نمایش دستگاه کاربر، به‌طور خودکار تغییر اندازه می‌دهند تا بهترین نمایش ممکن را ارائه دهند. استفاده از تصاویر واکنش‌گرا در طراحی وب‌سایت‌ها بسیار مهم است، زیرا تضمین می‌کند که وب‌سایت در تمامی دستگاه‌ها (موبایل، تبلت، دسکتاپ) به خوبی نمایش داده می‌شود.
روش‌های ایجاد تصاویر Responsive
1. استفاده از ویژگی‌های CSS
یکی از ساده‌ترین روش‌ها برای ایجاد تصاویر واکنش‌گرا، استفاده از ویژگی‌های CSS است. با تنظیم عرض تصویر به 100% و ارتفاع به صورت خودکار (auto)، تصویر به صورت خودکار با اندازه والد خود تطبیق می‌یابد.
<img src="example.jpg" alt="Example Image" class="responsive-image">
.responsive-image {
width: 100%;
height: auto; /* The height is automatically adjusted to maintain the aspect ratio */
}
2. استفاده از ویژگی‌های HTML5
ویژگی srcset در HTML5 به ما اجازه می‌دهد تا نسخه‌های مختلفی از یک تصویر را برای اندازه‌های مختلف صفحه‌نمایش مشخص کنیم. این روش به مرورگر اجازه می‌دهد تا بر اساس اندازه صفحه‌نمایش، مناسب‌ترین تصویر را بارگذاری کند.
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px" alt="Example Image">توضیحات:
srcsetمشخص می‌کند که تصاویر مختلف برای عرض‌های مختلف صفحه‌نمایش در دسترس هستند.sizesمشخص می‌کند که مرورگر چگونه باید از تصاویر استفاده کند.
3. استفاده از عنصر picture
عنصر picture در HTML5 به ما اجازه می‌دهد تا مجموعه‌ای از منابع تصویر را مشخص کنیم که مرورگر می‌تواند بسته به شرایط مختلف (مانند اندازه صفحه‌نمایش یا تراکم پیکسلی) از آنها استفاده کند.
<picture>
<source srcset="small.jpg" media="(max-width: 600px)">
<source srcset="medium.jpg" media="(max-width: 900px)">
<img src="large.jpg" alt="Example Image">
</picture>در این مثال:
- اگر عرض صفحه‌نمایش تا 600 پیکسل باشد، تصویر
small.jpgبارگذاری می‌شود. - اگر عرض صفحه‌نمایش تا 900 پیکسل باشد، تصویر
medium.jpgبارگذاری می‌شود. - در غیر این صورت، تصویر
large.jpgبارگذاری می‌شود.
مثال ترکیبی
برای نمایش یک تصویر واکنش‌گرا که در تمامی دستگاه‌ها به خوبی نمایش داده شود، می‌توان از ترکیب روش‌های بالا استفاده کرد. در اینجا مثالی ترکیبی ارائه شده است:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.responsive-image {
width: 100%;
height: auto;
}
</style>
<title>Responsive image</title>
</head>
<body>
<picture>
<source srcset="small.jpg" media="(max-width: 600px)">
<source srcset="medium.jpg" media="(max-width: 900px)">
<img src="large.jpg" alt="Example Image" class="responsive-image">
</picture>
</body>
</html>در این مثال، تصویر با استفاده از عنصر picture و کلاس CSS واکنش‌گرا شده است. این ترکیب اطمینان می‌دهد که تصویر در تمامی اندازه‌های صفحه‌نمایش به خوبی نمایش داده می‌شود و بهترین تجربه کاربری را ارائه می‌دهد.
قرار دادن تصویر در مرکز
قرار دادن تصویر در مرکز یکی از متداول‌ترین نیازهای طراحی وب است. در CSS روش‌های مختلفی برای این کار وجود دارد که می‌توان از آنها استفاده کرد. در اینجا چندین روش را با کدها و توضیحات مربوطه بررسی می‌کنیم.
1. استفاده از ویژگی text-align در عناصر بلوکی
یکی از ساده‌ترین روش‌ها برای مرکز کردن تصویر استفاده از ویژگی text-align در عناصر بلوکی است.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Center the image</title>
<style>
.center-container {
text-align: center;
}
.center-container img {
width: 50%; /* To adjust the width of the image */
height: auto; /* To maintain aspect ratio */
}
</style>
</head>
<body>
<div class="center-container">
<img src="example.jpg" alt="Example Image">
</div>
</body>
</html>در این مثال، تصویر با استفاده از ویژگی text-align: center; در داخل یک عنصر بلوکی مانند div مرکز می‌شود.
2. استفاده از ویژگی margin با مقدار auto
روش دیگر برای مرکز کردن تصویر استفاده از ویژگی margin با مقدار auto است. این روش بیشتر برای تصاویر داخل عناصر بلوکی کاربرد دارد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Center the image</title>
<style>
.center-container {
display: flex;
justify-content: center;
}
.center-container img {
margin: 0 auto;
display: block; /* To center the image inside the block */
width: 50%; /* To adjust the width of the image */
height: auto; /* To maintain aspect ratio */
}
</style>
</head>
<body>
<div class="center-container">
<img src="example.jpg" alt="Example Image">
</div>
</body>
</html>در این مثال، تصویر با استفاده از margin: 0 auto; در داخل یک عنصر div با ویژگی display: flex; و justify-content: center; مرکز می‌شود.
3. استفاده از ویژگی position و transform
روش دیگر برای مرکز کردن تصویر استفاده از ویژگی‌های position و transform است. این روش به ویژه برای مرکز کردن تصاویر درون یک عنصر با عرض و ارتفاع مشخص کاربرد دارد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Center the image</title>
<style>
.center-container {
position: relative;
width: 100%;
height: 500px; /* Adjusting the height of the container */
background-color: #f0f0f0; /* Background for better display */
}
.center-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%; /* To adjust the width of the image */
height: auto; /* To maintain aspect ratio */
}
</style>
</head>
<body>
<div class="center-container">
<img src="example.jpg" alt="Example Image">
</div>
</body>
</html>در این مثال، تصویر با استفاده از position: absolute; و transform: translate(-50%, -50%); مرکز می‌شود. این روش به شما امکان می‌دهد تصویر را دقیقاً در مرکز کانتینر قرار دهید.
4. استفاده از ویژگی flexbox
استفاده از flexbox یکی از بهترین و ساده‌ترین روش‌ها برای مرکز کردن عناصر از جمله تصاویر است.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Center the image</title>
<style>
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 500px; /* Adjusting the height of the container */
background-color: #f0f0f0; /* Background for better display */
}
.center-container img {
width: 50%; /* To adjust the width of the image */
height: auto; /* To maintain aspect ratio */
}
</style>
</head>
<body>
<div class="center-container">
<img src="example.jpg" alt="Example Image">
</div>
</body>
</html>در این مثال، تصویر با استفاده از ویژگی‌های display: flex;, justify-content: center; و align-items: center; به صورت افقی و عمودی در مرکز کانتینر قرار می‌گیرد.
تصاویر شفاف (Transparent Images)
تصاویر شفاف یکی از ابزارهای جذاب و کاربردی در طراحی وب هستند که به شما امکان می‌دهند تا تصاویر با پس‌زمینه شفاف را در صفحات وب خود قرار دهید. این تصاویر می‌توانند جلوه‌های بصری زیبایی به سایت شما ببخشند و تجربه کاربری را بهبود بخشند. در این مقاله، نحوه استفاده از تصاویر شفاف در CSS را توضیح می‌دهیم و با مثال‌های کدنویسی، شما را با این مفهوم آشنا می‌کنیم.
1. ساختار HTML
ابتدا ساختار HTML ساده‌ای برای نمایش تصاویر شفاف ایجاد می‌کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Transparent Image</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
<img src="transparent-image.png" alt="Transparent Image" class="transparent-image">
</div>
</body>
</html>در این ساختار، یک div با کلاس image-container داریم که حاوی یک img با کلاس transparent-image است.
2. استایل دهی با CSS
اکنون با استفاده از CSS به تصاویر شفاف استایل می‌دهیم:
/* file styles.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
width: 300px;
height: 300px;
background-color: #e0e0e0;
border: 2px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.transparent-image {
max-width: 100%;
max-height: 100%;
opacity: 0.8; /* Adjust image transparency */
transition: opacity 0.3s;
}
.transparent-image:hover {
opacity: 1; /* Increased transparency in hover mode */
}در این استایل‌ها:
.image-containerیک جعبه با پس‌زمینه خاکستری و حاشیه دارد که تصویر شفاف در آن قرار می‌گیرد..transparent-imageبا استفاده از ویژگیopacityشفافیت تصویر را تنظیم می‌کند.- با ویژگی
transitionتغییرات شفافیت را نرم‌تر می‌کنیم. - در حالت هاور، شفافیت تصویر را به ۱ افزایش می‌دهیم تا تصویر به صورت کامل نمایش داده شود.
استفاده از تصاویر PNG شفاف
تصاویر PNG با پس‌زمینه شفاف یکی از محبوب‌ترین فرمت‌ها برای تصاویر شفاف هستند. این تصاویر می‌توانند به راحتی در پس‌زمینه‌های مختلف قرار گیرند و جلوه‌های زیبایی ایجاد کنند. برای استفاده از این تصاویر، مطمئن شوید که فایل تصویری شما دارای پس‌زمینه شفاف است.
<img src="transparent-image.png" alt="Transparent Image" class="transparent-image">
توضیحات و بهینه‌سازی
- شفافیت و افکت هاور: با استفاده از ویژگی
opacityمی‌توانیم شفافیت تصویر را تنظیم کنیم. این ویژگی از 0 (کاملاً شفاف) تا 1 (کاملاً مات) مقدار می‌گیرد. - استفاده از PNG: فرمت PNG به دلیل پشتیبانی از شفافیت، برای ایجاد تصاویر شفاف بسیار مناسب است.
فیلترهای تصویر در CSS
فیلترهای تصویر در CSS ابزارهای قدرتمندی هستند که به شما اجازه می‌دهند تا به راحتی افکت‌های مختلفی را بر روی تصاویر و عناصر دیگر وب‌سایت خود اعمال کنید. با استفاده از فیلترها می‌توانید ظاهر تصاویر را بهبود بخشید، تغییر دهید یا جلوه‌های خاصی به آنها اضافه کنید. در این مقاله، با نحوه استفاده از فیلترهای تصویر در CSS آشنا می‌شویم و با مثال‌های کدنویسی، کاربردهای مختلف آنها را نشان می‌دهیم.
1. ساختار HTML
ابتدا یک ساختار HTML ساده برای نمایش تصویر ایجاد می‌کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Image filters in CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
<img src="image.jpg" alt="image" class="image">
</div>
</body>
</html>
در این ساختار، یک div با کلاس image-container داریم که حاوی یک img با کلاس image است.
2. استایل دهی با CSS
اکنون با استفاده از CSS فیلترهای مختلف را بر روی تصویر اعمال می‌کنیم:
/* File styles.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.image-container {
width: 500px;
height: 300px;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Various filters */
.grayscale {
filter: grayscale(100%);
}
.blur {
filter: blur(5px);
}
.brightness {
filter: brightness(150%);
}
.contrast {
filter: contrast(200%);
}
.sepia {
filter: sepia(100%);
}
3. اعمال فیلترها به تصویر
حالا می‌توانیم فیلترهای مختلف را به تصویر اعمال کنیم. به عنوان مثال:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Image filters in CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
<img src="image.jpg" alt="image" class="image grayscale">
</div>
<div class="image-container">
<img src="image.jpg" alt="image" class="image blur">
</div>
<div class="image-container">
<img src="image.jpg" alt="image" class="image brightness">
</div>
<div class="image-container">
<img src="image.jpg" alt="image" class="image contrast">
</div>
<div class="image-container">
<img src="image.jpg" alt="image" class="image sepia">
</div>
</body>
</html>
در این مثال، پنج تصویر با فیلترهای مختلف داریم:
grayscale: تصویر را به صورت سیاه و سفید نمایش می‌دهد.blur: تصویر را با میزان مشخصی از تار شدن نمایش می‌دهد.brightness: روشنایی تصویر را افزایش می‌دهد.contrast: کنتراست تصویر را افزایش می‌دهد.sepia: تصویر را به صورت قدیمی و قهوه‌ای رنگ نمایش می‌دهد.
4. ترکیب فیلترها
می‌توانید چندین فیلتر را با هم ترکیب کنید تا افکت‌های پیچیده‌تری ایجاد کنید:
.combined {
filter: grayscale(50%) blur(2px) brightness(120%) contrast(150%) sepia(30%);
}
و در HTML:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Combined filters in CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
<img src="image.jpg" alt="image" class="image combined">
</div>
</body>
</html>
Image Hover Overlay
ایجاد افکت‌های جذاب و تعاملی بر روی تصاویر هنگام هاور کردن، یکی از راه‌های مؤثر برای بهبود تجربه کاربری و زیباسازی وب‌سایت است. با استفاده از CSS می‌توانیم به راحتی افکت‌های هاور (Hover) ایجاد کنیم که هنگام قرار گرفتن نشانگر ماوس بر روی تصویر، تغییرات بصری جالبی به وجود بیاید. در این مقاله، نحوه ایجاد افکت overlay بر روی تصاویر هنگام هاور کردن را بررسی می‌کنیم و با مثال‌های کدنویسی کاربرد آن را نشان می‌دهیم.
1. ساختار HTML
ابتدا یک ساختار HTML ساده برای نمایش تصاویر ایجاد می‌کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Image Hover Overlay</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="image-wrapper">
<img src="image.jpg" alt="image" class="image">
<div class="overlay">Text on the image</div>
</div>
</div>
</body>
</html>
در این ساختار، یک div با کلاس container داریم که حاوی div دیگری با کلاس image-wrapper است. داخل image-wrapper، تصویر و یک div با کلاس overlay قرار داده شده است که متن روی تصویر را نمایش می‌دهد.
2. استایل‌دهی با CSS
اکنون با استفاده از CSS استایل‌های مربوط به تصویر و overlay را تعریف می‌کنیم:
/* file styles.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
position: relative;
width: 300px;
height: 200px;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-wrapper:hover .overlay {
opacity: 1;
}
در اینجا، ما کلاس‌های container، image-wrapper، image و overlay را استایل‌دهی کرده‌ایم. کلاس overlay دارای رنگ پس‌زمینه نیمه شفاف و متن سفید است و در حالت عادی دارای opacity صفر است تا دیده نشود. هنگامی که کاربر نشانگر ماوس را بر روی image-wrapper قرار می‌دهد، opacity به ۱ تغییر می‌کند و overlay ظاهر می‌شود.
3. توضیح کد
در کد CSS بالا، از ویژگی‌های زیر استفاده شده است:
position: relative: برای تعیین موقعیت نسبی تصویر و overlay.object-fit: cover: برای تنظیم اندازه تصویر به طوری که تمام فضای موجود را پر کند.background-color: rgba(0, 0, 0, 0.5): برای ایجاد پس‌زمینه نیمه شفاف.transition: opacity 0.3s ease: برای ایجاد افکت انتقال نرم هنگام تغییر opacity.display: flexوjustify-content: centerوalign-items: center: برای قرار دادن متن در مرکز overlay.
4. افزودن افکت‌های بیشتر
می‌توانید افکت‌های بیشتری به overlay اضافه کنید تا ظاهر زیباتری ایجاد شود. به عنوان مثال، افزودن تغییر رنگ و تغییر اندازه متن هنگام هاور:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease, background-color 0.3s ease, font-size 0.3s ease;
}
.image-wrapper:hover .overlay {
opacity: 1;
background-color: rgba(0, 0, 0, 0.7);
font-size: 1.2em;
}
Flip Image
ایجاد افکت‌های flipping برای تصاویر با استفاده از CSS یکی از روش‌های جذاب برای افزایش تعامل کاربران با وب‌سایت است. این افکت می‌تواند به شما کمک کند تا تصاویر خود را به صورت افقی یا عمودی بچرخانید و جلوه‌های بصری زیبایی ایجاد کنید. در این مقاله، نحوه ایجاد افکت‌های flipping برای تصاویر را بررسی می‌کنیم و با مثال‌های کدنویسی، کاربرد آن را نشان می‌دهیم.
1. ساختار HTML
ابتدا یک ساختار HTML ساده برای نمایش تصاویر ایجاد می‌کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Flip an Image</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<img src="image.jpg" alt="image" class="flip-horizontal">
<img src="image.jpg" alt="image" class="flip-vertical">
</div>
</body>
</html>
در این ساختار، یک div با کلاس container داریم که حاوی دو تصویر با کلاس‌های flip-horizontal و flip-vertical است.
2. استایل‌دهی با CSS
اکنون با استفاده از CSS استایل‌های مربوط به flipping تصاویر را تعریف می‌کنیم:
/* file styles.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 20px;
}
img {
width: 200px;
height: 200px;
transition: transform 0.6s ease;
}
.flip-horizontal:hover {
transform: scaleX(-1);
}
.flip-vertical:hover {
transform: scaleY(-1);
}
در اینجا، ما کلاس‌های flip-horizontal و flip-vertical را استایل‌دهی کرده‌ایم. هنگام هاور کردن روی تصویر با کلاس flip-horizontal، تصویر به صورت افقی برعکس می‌شود و هنگام هاور کردن روی تصویر با کلاس flip-vertical، تصویر به صورت عمودی برعکس می‌شود.
3. توضیح کد
در کد CSS بالا، از ویژگی‌های زیر استفاده شده است:
transition: transform 0.6s ease: برای ایجاد افکت انتقال نرم هنگام flipping تصاویر.transform: scaleX(-1): برای flipping تصویر به صورت افقی.transform: scaleY(-1): برای flipping تصویر به صورت عمودی.
4. افزودن افکت‌های بیشتر
می‌توانید افکت‌های بیشتری به flipping تصاویر اضافه کنید تا ظاهر زیباتری ایجاد شود. به عنوان مثال، افزودن تغییر رنگ یا سایه هنگام flipping:
img {
width: 200px;
height: 200px;
transition: transform 0.6s ease, filter 0.6s ease;
}
.flip-horizontal:hover {
transform: scaleX(-1);
filter: brightness(0.8);
}
.flip-vertical:hover {
transform: scaleY(-1);
filter: brightness(0.8);
}
گالری تصاویر Responsive
ایجاد یک گالری تصاویر responsive با CSS یکی از تکنیک‌های کاربردی و جذاب برای نمایش تصاویر در وب‌سایت‌ها است. این گالری‌ها به گونه‌ای طراحی می‌شوند که در تمامی دستگاه‌ها و اندازه‌های صفحه نمایش به خوبی نمایش داده شوند. در این آموزش، نحوه ایجاد یک گالری تصاویر responsive را با استفاده از HTML و CSS بررسی می‌کنیم و با مثال‌های کدنویسی کاربرد آن را نشان می‌دهیم.
1. ساختار HTML
ابتدا یک ساختار HTML ساده برای گالری تصاویر ایجاد می‌کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Responsive image gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="image 1">
<img src="image2.jpg" alt="image 2">
<img src="image3.jpg" alt="image 3">
<img src="image4.jpg" alt="image 4">
<img src="image5.jpg" alt="image 5">
<img src="image6.jpg" alt="image 6">
</div>
</body>
</html>
در این ساختار، یک div با کلاس gallery داریم که حاوی چندین تصویر است.
2. استایل‌دهی با CSS
اکنون با استفاده از CSS، استایل‌های مربوط به گالری تصاویر را تعریف می‌کنیم:
/* File styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
width: 90%;
max-width: 1200px;
margin: auto;
}
.gallery img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.gallery img:hover {
transform: scale(1.05);
}
در اینجا، ما از ویژگی‌های grid استفاده کرده‌ایم تا یک گالری responsive ایجاد کنیم که در تمامی دستگاه‌ها به خوبی نمایش داده شود.
3. توضیح کد
display: grid: برای نمایش تصاویر به صورت یک گرید.grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)): برای تعیین تعداد ستون‌ها به صورت داینامیک بر اساس اندازه صفحه نمایش.gap: 10px: برای ایجاد فاصله بین تصاویر.width: 90%وmax-width: 1200px: برای محدود کردن عرض گالری.img: برای استایل‌دهی به تصاویر داخل گالری.border-radius: 10px: برای ایجاد گوشه‌های گرد.box-shadow: برای ایجاد سایه به تصاویر.transition: transform 0.3s ease: برای ایجاد افکت تغییر اندازه هنگام هاور کردن روی تصاویر.transform: scale(1.05): برای بزرگتر کردن تصویر هنگام هاور کردن.
4. افزودن افکت‌های بیشتر
می‌توانید افکت‌های بیشتری به گالری تصاویر خود اضافه کنید تا ظاهر زیباتری ایجاد شود. به عنوان مثال، تغییر رنگ پس‌زمینه تصاویر هنگام هاور:
.gallery img:hover {
transform: scale(1.05);
filter: brightness(0.8);
}
ایجاد انعکاس تصویر (Image Reflection)
ایجاد انعکاس تصویر یک تکنیک جذاب برای افزایش جلوه‌های بصری وب‌سایت است. با استفاده از CSS، می‌توانید به راحتی این افکت را پیاده‌سازی کنید. در اینجا، نحوه ایجاد انعکاس تصویر با استفاده از CSS را با توضیحات جامع و مثال‌های کدنویسی بررسی می‌کنیم.
1. ساختار HTML
ابتدا ساختار HTML ساده‌ای برای تصویر ایجاد می‌کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Image reflection in CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
<img src="image.jpg" alt="Main picture">
</div>
</body>
</html>
در این ساختار، یک div با کلاس image-container داریم که حاوی یک تصویر است.
2. استایل‌دهی با CSS
اکنون با استفاده از CSS، استایل‌های مربوط به انعکاس تصویر را تعریف می‌کنیم:
/* File styles.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
display: block;
width: 300px;
height: auto;
}
.image-container::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: url('image.jpg') no-repeat;
background-size: cover;
transform: scaleY(-1);
opacity: 0.5;
filter: blur(3px);
pointer-events: none;
}
3. توضیح کد
body: برای مرکز کردن تصویر در صفحه و تنظیمات کلی..image-container: برای موقعیت‌دهی نسبی به تصویر اصلی و انعکاس آن..image-container img: برای استایل‌دهی به تصویر اصلی..image-container::after: برای ایجاد افکت انعکاس. این قسمت شامل توضیحات زیر است:content: "": محتوای خالی برای شبه‌عنصر.position: absolute: برای قرارگیری مطلق شبه‌عنصر نسبت به والد خود.top: 100%: برای قرار دادن شبه‌عنصر دقیقاً زیر تصویر اصلی.background: url('image.jpg') no-repeat: استفاده از تصویر اصلی به عنوان پس‌زمینه.transform: scaleY(-1): معکوس کردن تصویر در محور Y برای ایجاد انعکاس.opacity: 0.5: تنظیم شفافیت انعکاس.filter: blur(3px): ایجاد افکت تار شدن انعکاس.pointer-events: none: جلوگیری از تعامل کاربر با شبه‌عنصر.
4. افزودن افکت‌های بیشتر
می‌توانید افکت‌های بیشتری به انعکاس تصویر اضافه کنید تا ظاهر زیباتری ایجاد شود. به عنوان مثال، تغییر شفافیت و تاری انعکاس:
.image-container::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: url('image.jpg') no-repeat;
background-size: cover;
transform: scaleY(-1);
opacity: 0.3;
filter: blur(5px);
pointer-events: none;
}
خصوصیت object-fit
خصوصیت object-fit در CSS برای تعیین نحوه نمایش محتوا در یک المان حاوی تصویر یا ویدئو استفاده می‌شود. این خصوصیت به شما کمک می‌کند تا تعیین کنید که محتوا چگونه در کادر مشخص شده قرار بگیرد، به طوری که مقیاس و نسبت ابعاد حفظ شود.
مقدارهای object-fit
fill: محتوا اندازه کادر را پر می‌کند و ممکن است تناسبات تصویر به هم بخورد.contain: محتوا در داخل کادر قرار می‌گیرد و تناسبات تصویر حفظ می‌شود. ممکن است بخشی از کادر خالی بماند.cover: محتوا تمام کادر را پوشش می‌دهد و تناسبات تصویر حفظ می‌شود. ممکن است بخشی از محتوا خارج از کادر باشد.none: اندازه محتوا تغییر نمی‌کند.scale-down: مانندcontainیاnoneعمل می‌کند، هرکدام که کوچکتر باشد.
مثال‌های عملی
1. استفاده از fill
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>object-fit: fill</title>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
}
.container img {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="image">
</div>
</body>
</html>
در این مثال، تصویر اندازه کادر را پر می‌کند و ممکن است تناسبات تصویر به هم بخورد.
2. استفاده از contain
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>object-fit: contain</title>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
}
.container img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="image">
</div>
</body>
</html>
در این مثال، تصویر در داخل کادر قرار می‌گیرد و تناسبات تصویر حفظ می‌شود. ممکن است بخشی از کادر خالی بماند.
3. استفاده از cover
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>object-fit: cover</title>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="image">
</div>
</body>
</html>
در این مثال، تصویر تمام کادر را پوشش می‌دهد و تناسبات تصویر حفظ می‌شود. ممکن است بخشی از محتوا خارج از کادر باشد.
4. استفاده از none
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>object-fit: none</title>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
overflow: hidden;
}
.container img {
width: auto;
height: auto;
object-fit: none;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="image">
</div>
</body>
</html>
در این مثال، اندازه تصویر تغییر نمی‌کند و اگر بزرگتر از کادر باشد، برش داده می‌شود.
5. استفاده از scale-down
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>object-fit: scale-down</title>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: scale-down;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="image">
</div>
</body>
</html>
در این مثال، تصویر یا اندازه واقعی خود را حفظ می‌کند یا به اندازه‌ای کوچک می‌شود که در کادر قرار بگیرد، هرکدام که کوچکتر باشد.
خصوصیت object-position
خصوصیت object-position در CSS برای تعیین موقعیت یک محتوا (تصویر یا ویدئو) درون یک عنصر حاوی تصویر یا ویدئو استفاده می‌شود. این خصوصیت به شما کمک می‌کند تا محتوا را درون قاب تعیین شده به طور دقیق تری جابجا کنید.
استفاده از object-position
مقادیر object-position شامل دو مقدار برای موقعیت افقی و عمودی است. این مقادیر می‌توانند به صورت درصدی، مقادیر مطلق (مانند px، em)، یا کلیدواژه‌هایی مانند left, center, right, top, bottom تعریف شوند.
مقادیر object-position
object-position: 50% 50%;: محتوا در مرکز قاب قرار می‌گیرد.object-position: top left;: محتوا در بالای قاب و چپ‌ترین نقطه قرار می‌گیرد.object-position: bottom right;: محتوا در پایین‌ترین و راست‌ترین نقطه قاب قرار می‌گیرد.
مثال‌های عملی
1. تنظیم محتوا در مرکز قاب
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>object-position: Center</title>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="image">
</div>
</body>
</html>
در این مثال، تصویر تمام قاب را پوشش می‌دهد و در مرکز قاب قرار می‌گیرد.
2. تنظیم محتوا در بالای قاب و چپ‌ترین نقطه
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>object-position: top left</title>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="image">
</div>
</body>
</html>
در این مثال، تصویر در بالای قاب و چپ‌ترین نقطه قرار می‌گیرد.
3. تنظیم محتوا در پایین‌ترین و راست‌ترین نقطه قاب
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>object-position: bottom right</title>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom right;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="image">
</div>
</body>
</html>
در این مثال، تصویر در پایین‌ترین و راست‌ترین نقطه قاب قرار می‌گیرد.
4. تنظیم محتوا با استفاده از مقادیر درصدی
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>object-position: percentage</title>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 30% 70%;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="image">
</div>
</body>
</html>
در این مثال، تصویر در موقعیتی قرار می‌گیرد که 30% از عرض و 70% از ارتفاع قاب فاصله دارد.
خب دوستان، رسیدیم به پایان قسمت ششم از آموزش CSS. تو این قسمت حسابی با تصاویر کار کردیم و یاد گرفتیم چطور تصاویر رو به شکل‌های مختلف دربیاریم و استایل بدیم. حالا دیگه می‌دونید چطور تصاویر رو گرد کنید، تصاویر thumbnail و responsive بسازید، تصاویر رو در مرکز قرار بدید، تصاویر polaroid و شفاف بسازید، فیلترهای مختلف روی تصاویر اعمال کنید، overlay های جذاب برای حالت hover ایجاد کنید، تصاویر رو برگردونید، گالری تصاویر responsive بسازید، و از ویژگی‌های object-fit و object-position استفاده کنید. امیدوارم از این قسمت لذت برده باشید و منتظر قسمت‌های بعدی باشید. موفق باشید و همیشه به دنبال یادگیری باشید!
صادق جعفری
از کودکی به کامپیوتر و دنیای دیجیتال علاقه داشتم، به همین دلیل ترک تحصیل کردم و تمام تلاش خودم را صرفا برای یادگیری کامپیوتر، طراحی، برنامه نویسی و ... به کار گرفتم. در کنار مشاغل مختلفی که مجبور به انجامشان بودم برنامه نویسی را یاد گرفتم و از سال 1390 وارد بازار کار شدم و همیشه در تلاش هستم تا چالش های روبرو را با موفقیت پشت سر بگذارم.
شبکه های اجتماعی من