سلام به همه دوستان عزیز، من صادق جعفری هستم و امروز با قسمت هفتم از سری آموزش‌های جامع و کاربردی CSS در خدمتتون هستیم. در این بخش می‌خواهیم به چندین موضوع هیجان‌انگیز و کاربردی بپردازیم که بدون شک به کارتون میاد. از ماسک کردن تصاویر و طراحی دکمه‌های زیبا گرفته تا ایجاد pagination و ستون‌های متعدد در صفحات وب. همچنین با ویژگی‌های رابط کاربری جدید، متغیرها، Media Queries و Flexbox آشنا خواهیم شد. این بخش شامل مواردی هست که اگر به خوبی یاد بگیرید، می‌تونید به سطح جدیدی از طراحی وب دست پیدا کنید.
هدف ما اینه که با مثال‌های عملی و توضیحات جامع، شما رو در مسیر یادگیری CSS همراهی کنیم. می‌خواهیم مطمئن بشیم که بعد از خوندن این بخش، می‌تونید با اطمینان بیشتری پروژه‌های وب‌سایتتون رو طراحی و پیاده‌سازی کنید. پس اگر آماده‌اید، بیایید با هم این مسیر رو ادامه بدیم و کلی چیزای جدید یاد بگیریم!
ماسک کردن در CSS
ماسک کردن در CSS یکی از تکنیک‌های پیشرفته و جذاب است که به طراحان اجازه می‌دهد تا قسمت‌های خاصی از یک عنصر را نمایش دهند یا پنهان کنند. با استفاده از ماسک‌ها، می‌توانید جلوه‌های بصری پیچیده و زیبا ایجاد کنید که به طراحی وبسایت شما عمق و جلوه می‌بخشد. در اینجا به بررسی خصوصیات مختلف ماسک کردن در CSS می‌پردازیم و نحوه استفاده از تصاویر، گرادیان‌ها و SVG به عنوان لایه ماسک را توضیح می‌دهیم.
خصوصیت mask-image
خصوصیت mask-image به شما اجازه می‌دهد تا یک تصویر، گرادیان یا SVG را به عنوان ماسک برای یک عنصر تعیین کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mask with image</title>
<style>
.masked {
width: 300px;
height: 300px;
background-color: #3498db;
mask-image: url('mask.png'); /* Mask image */
mask-size: cover; /* Mask size */
mask-repeat: no-repeat; /* Not repeating the mask */
mask-position: center; /* Mask position */
}
</style>
</head>
<body>
<div class="masked"></div>
</body>
</html>
در این مثال، تصویر mask.png به عنوان ماسک استفاده شده است و با mask-size: cover کل عنصر را پوشش می‌دهد.
خصوصیت mask-repeat
این خصوصیت نحوه تکرار ماسک را تعیین می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating mask</title>
<style>
.masked-repeat {
width: 300px;
height: 300px;
background-color: #e74c3c;
mask-image: url('mask.png');
mask-size: 100px 100px;
mask-repeat: repeat; /* Repeat the mask */
}
</style>
</head>
<body>
<div class="masked-repeat"></div>
</body>
</html>
در این مثال، تصویر ماسک با اندازه 100x100 پیکسل تکرار شده است.
خصوصیت mask-mode
این خصوصیت نحوه ترکیب ماسک با محتوای عنصر را تعیین می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mask in alpha mode</title>
<style>
.masked-mode {
width: 300px;
height: 300px;
background-color: #2ecc71;
mask-image: url('mask.png');
mask-mode: alpha; /* Use the alpha channel for the mask */
}
</style>
</head>
<body>
<div class="masked-mode"></div>
</body>
</html>
در این مثال، ماسک با استفاده از کانال آلفا (شفافیت) ترکیب شده است.
خصوصیت mask-origin
این خصوصیت تعیین می‌کند که ماسک نسبت به کدام بخش از عنصر اعمال شود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mask with origin</title>
<style>
.masked-origin {
width: 300px;
height: 300px;
background-color: #f1c40f;
padding: 50px;
mask-image: url('mask.png');
mask-origin: content-box; /* Mask relative to the content box */
}
</style>
</head>
<body>
<div class="masked-origin"></div>
</body>
</html>
در این مثال، ماسک نسبت به جعبه محتوا اعمال شده است.
خصوصیت mask-position
این خصوصیت موقعیت ماسک را در داخل عنصر تعیین می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mask with position</title>
<style>
.masked-position {
width: 300px;
height: 300px;
background-color: #9b59b6;
mask-image: url('mask.png');
mask-position: top right; /* Mask position */
}
</style>
</head>
<body>
<div class="masked-position"></div>
</body>
</html>
در این مثال، ماسک در بالای راست عنصر قرار گرفته است.
خصوصیت mask-size
این خصوصیت اندازه ماسک را تعیین می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mask with size</title>
<style>
.masked-size {
width: 300px;
height: 300px;
background-color: #34495e;
mask-image: url('mask.png');
mask-size: 150px 150px; /* Mask size */
}
</style>
</head>
<body>
<div class="masked-size"></div>
</body>
</html>
در این مثال، اندازه ماسک به 150x150 پیکسل تنظیم شده است.
استفاده از گرادیان به عنوان ماسک
می‌توانید از گرادیان‌ها نیز به عنوان ماسک استفاده کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mask with gradient</title>
<style>
.masked-gradient {
width: 300px;
height: 300px;
background-color: #1abc9c;
mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* linear gradient */
}
</style>
</head>
<body>
<div class="masked-gradient"></div>
</body>
</html>
در این مثال، از یک گرادیان خطی برای ماسک استفاده شده است.
استفاده از SVG به عنوان ماسک
SVGها نیز می‌توانند به عنوان ماسک استفاده شوند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mask with SVG</title>
<style>
.masked-svg {
width: 300px;
height: 300px;
background-color: #e67e22;
mask-image: url('mask.svg'); /* SVG as mask */
mask-size: cover;
}
</style>
</head>
<body>
<div class="masked-svg"></div>
</body>
</html>
در این مثال، از یک فایل SVG برای ماسک کردن عنصر استفاده شده است.
دکمه‌ها در CSS
دکمه‌ها نقش مهمی در رابط کاربری وبسایتها دارند و استفاده از CSS برای طراحی و استایل دادن به دکمه‌ها می‌تواند تجربه کاربری را بهبود بخشد. در این بخش، به بررسی نحوه ایجاد انواع مختلف دکمه‌ها در CSS می‌پردازیم، از دکمه‌های ساده تا دکمه‌های متحرک. هر بخش شامل توضیحات جامع و مثال‌های کدنویسی خواهد بود.
1. ایجاد دکمه ساده
برای ایجاد یک دکمه ساده با استفاده از CSS، می‌توانید از عنصر <button> یا <a> استفاده کنید و با استایل‌های CSS آن را زیبا کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple button</title>
<style>
.simple-button {
background-color: #3498db; /* Blue background color */
color: white; /* White text color */
padding: 10px 20px; /* Internal spacing 10 pixels top and bottom, 20 pixels left and right */
border: none; /* No border */
border-radius: 5px; /* Round the corners */
cursor: pointer; /* Change the mouse pointer to hand mode */
font-size: 16px; /* Font size 16 pixels */
}
</style>
</head>
<body>
<button class="simple-button">دکمه ساده</button>
</body>
</html>
توضیحات:
background-color: رنگ پس‌زمینه دکمه را آبی تنظیم می‌کند.color: رنگ متن داخل دکمه را سفید تنظیم می‌کند.padding: فضای داخلی دکمه را تعیین می‌کند.border: حاشیه دکمه را حذف می‌کند.border-radius: گوشه‌های دکمه را گرد می‌کند.cursor: نشانگر موس را به حالت دست تغییر می‌دهد.font-size: اندازه فونت متن داخل دکمه را تنظیم می‌کند.
2. سایز و رنگ دکمه
با استفاده از CSS می‌توانید سایز و رنگ دکمه‌ها را تغییر دهید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button size and color</title>
<style>
.large-button {
background-color: #e74c3c; /* Red background color */
color: white; /* White text color */
padding: 15px 30px; /* More interior space for a bigger button */
border: none; /* No border */
border-radius: 5px; /* Round the corners */
cursor: pointer; /* Change the mouse pointer to hand mode */
font-size: 20px; /* Larger font size */
}
.small-button {
background-color: #2ecc71; /* Green background color */
color: white; /* White text color */
padding: 5px 10px; /* Less internal spacing for a smaller button */
border: none; /* No border */
border-radius: 5px; /* Round the corners */
cursor: pointer; /* Change the mouse pointer to hand mode */
font-size: 12px; /* Smaller font size */
}
</style>
</head>
<body>
<button class="large-button">large button</button>
<button class="small-button">small button</button>
</body>
</html>
توضیحات:
.large-button: استایل برای دکمه بزرگ با رنگ قرمز و فونت بزرگتر..small-button: استایل برای دکمه کوچک با رنگ سبز و فونت کوچکتر.
3. دکمه‌های گرد
برای ایجاد دکمه‌های گرد، می‌توانید از border-radius استفاده کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Round buttons</title>
<style>
.rounded-button {
background-color: #f1c40f; /* Yellow background color */
color: white; /* White text color */
padding: 10px 20px; /* internal distance */
border: none; /* No border */
border-radius: 50px; /* Full rounding of corners */
cursor: pointer; /* Change the mouse pointer to hand mode */
font-size: 16px; /* Font size */
}
</style>
</head>
<body>
<button class="rounded-button">rounded button</button>
</body>
</html>
توضیحات:
border-radius: 50px: گوشه‌های دکمه را کاملاً گرد می‌کند.
4. دکمه‌های Hoverable
با استفاده از شبه‌کلاس :hover می‌توانید افکت‌های زیبا برای دکمه‌ها در حالت هاور ایجاد کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoverable buttons</title>
<style>
.hover-button {
background-color: #34495e; /* The default background color */
color: white; /* White text color */
padding: 10px 20px; /* internal distance */
border: none; /* No border */
border-radius: 5px; /* Round the corners */
cursor: pointer; /* Change the mouse pointer to hand mode */
font-size: 16px; /* Font size */
transition: background-color 0.3s ease; /* Background color change effect */
}
.hover-button:hover {
background-color: #2c3e50; /* Background color in hover mode */
}
</style>
</head>
<body>
<button class="hover-button">Hoverable button</button>
</body>
</html>
توضیحات:
transition: تغییرات رنگ پس‌زمینه را به صورت تدریجی ایجاد می‌کند.:hover: تغییر رنگ پس‌زمینه در حالت هاور.
5. دکمه‌های سایه‌دار
با استفاده از خاصیت box-shadow می‌توانید به دکمه‌ها سایه اضافه کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shaded buttons</title>
<style>
.shadow-button {
background-color: #8e44ad; /* Purple background color */
color: white; /* White text color */
padding: 10px 20px; /* internal distance */
border: none; /* No border */
border-radius: 5px; /* Round the corners */
cursor: pointer; /* Change the mouse pointer to hand mode */
font-size: 16px; /* font size */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Button shadow */
}
.shadow-button:hover {
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3); /* More shadow in hover mode */
}
</style>
</head>
<body>
<button class="shadow-button">Shaded button</button>
</body>
</html>
توضیحات:
box-shadow: سایه‌ای به دکمه اضافه می‌کند.:hover: سایه را در حالت هاور تغییر می‌دهد.
6. دکمه‌های غیرفعال
می‌توانید دکمه‌های غیرفعال را با استفاده از خاصیت :disabled استایل دهید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled buttons</title>
<style>
.disabled-button {
background-color: #95a5a6; /* Gray background color */
color: white; /* White text color */
padding: 10px 20px; /* internal distance */
border: none; /* No border */
border-radius: 5px; /* Round the corners */
cursor: not-allowed; /* Change the mouse pointer to inactive */
font-size: 16px; /* Font size */
}
.disabled-button:disabled {
background-color: #7f8c8d; /* Background color in disabled mode */
}
</style>
</head>
<body>
<button class="disabled-button" disabled>Disabled button</button>
</body>
</html>
توضیحات:
cursor: not-allowed: نشانگر موس را به حالت غیرفعال تغییر می‌دهد.:disabled: استایل دکمه در حالت غیرفعال را تغییر می‌دهد.
7. گروه دکمه‌ها (افقی و عمودی)
برای ایجاد گروه‌های دکمه‌ای، می‌توانید از display: inline-block یا display: block استفاده کنید. می‌توانید دکمه‌ها را به صورت گروهی مرتب کنید، چه افقی و چه عمودی.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button grouping</title>
<style>
.button-group-horizontal button {
background-color: #2980b9; /* Blue background color */
color: white; /* White text color */
padding: 10px 20px; /* internal distance */
border: none; /* No border */
cursor: pointer; /* Change the mouse pointer to hand mode */
font-size: 16px; /* Font size */
margin: 5px; /* Spacing between buttons */
}
.button-group-vertical button {
background-color: #e67e22; /* Orange background color */
color: white; /* White text color */
padding: 10px 20px; /* internal distance */
border: none; /* No border */
cursor: pointer; /* Change the mouse pointer to hand mode */
font-size: 16px; /* Font size */
display: block; /* Show buttons in block form */
margin: 5px 0; /* Spacing between buttons */
}
</style>
</head>
<body>
<div class="button-group-horizontal">
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
</div>
<div class="button-group-vertical">
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
</div>
</body>
</html>
توضیحات:
.button-group-horizontal button: استایل دکمه‌های افقی با فاصله بین دکمه‌ها..button-group-vertical button: استایل دکمه‌های عمودی با فاصله بین دکمه‌ها.
8. دکمه روی تصویر
با استفاده از CSS می‌توانید دکمه‌ها را روی تصاویر قرار دهید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>button on the image</title>
<style>
.image-container {
position: relative; /* Relative position for the parent */
width: 300px; /* Image width */
}
.image-container img {
width: 100%; /* The width of the image is equal to the width of the parent */
height: auto; /* Auto height */
}
.image-button {
position: absolute; /* Absolute position for the button */
top: 50%; /* Placement in the middle */
left: 50%; /* Placement in the middle */
transform: translate(-50%, -50%); /* Move to the center */
background-color: #f39c12; /* Orange background color */
color: white; /* White text color */
padding: 10px 20px; /* internal distance */
border: none; /* No border */
border-radius: 5px; /* Round the corners */
cursor: pointer; /* Change the mouse pointer to hand mode */
font-size: 16px; /* Font size */
}
</style>
</head>
<body>
<div class="image-container">
<img src="image.jpg" alt="image">
<button class="image-button">button on the image</button>
</div>
</body>
</html>
توضیحات:
position: relative: موقعیت نسبی برای والد (تصویر).position: absolute: موقعیت مطلق برای دکمه.transform: translate(-50%, -50%): جابجایی دکمه به مرکز.
9. دکمه‌های متحرک
با استفاده از CSS می‌توانید دکمه‌های متحرک ایجاد کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moving buttons</title>
<style>
.animated-button {
background-color: #16a085; /* Green background color */
color: white; /* White text color */
padding: 10px 20px; /* internal distance */
border: none; /* No border */
border-radius: 5px; /* Round the corners */
cursor: pointer; /* Change the mouse pointer to hand mode */
font-size: 16px; /* Font size */
transition: transform 0.3s ease; /* Resize effect */
}
.animated-button:hover {
transform: scale(1.1); /* Increasing the size of the button in the hover mode */
}
</style>
</head>
<body>
<button class="animated-button">Moving button</button>
</body>
</html>
توضیحات:
transition: افکت تغییر اندازه دکمه را به صورت تدریجی ایجاد می‌کند.transform: scale(1.1): بزرگتر شدن دکمه در حالت هاور.
Pagination در CSS
Pagination (صفحه‌بندی) یکی از اجزای مهم در طراحی رابط کاربری وبسایتها و برنامه‌های وب است که به کاربران کمک می‌کند تا به راحتی محتوا را مرور کنند. در این بخش، روش‌های مختلف ایجاد و استایل دادن به pagination با استفاده از CSS را بررسی می‌کنیم.
1. ایجاد Pagination ساده
ابتدا یک pagination ساده با استفاده از HTML و CSS ایجاد می‌کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple pagination</title>
<style>
.pagination {
display: flex;
list-style-type: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #007bff;
border: 1px solid #dee2e6;
border-radius: 5px;
}
.pagination a:hover {
background-color: #e9ecef;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
توضیحات:
display: flex: استفاده از Flexbox برای ترتیب‌دهی عناصر.list-style-type: none: حذف نقاط لیست.padding: حذف فاصله داخلی لیست.
2. Active and Hoverable Pagination
برای نشان دادن صفحه فعال و تغییر استایل لینک‌ها در حالت هاور، استایل‌های زیر را اضافه می‌کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active and Hoverable Pagination</title>
<style>
.pagination {
display: flex;
list-style-type: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #007bff;
border: 1px solid #dee2e6;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
.pagination a:hover {
background-color: #e9ecef;
}
.pagination .active a {
background-color: #007bff;
color: white;
border-color: #007bff;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
توضیحات:
transition: ایجاد افکت تغییر رنگ پس‌زمینه و متن به صورت تدریجی..active a: استایل برای لینک فعال.
3. Rounded Active and Hoverable Buttons
استایل‌های زیر را برای گرد کردن گوشه‌های دکمه‌ها اضافه می‌کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rounded Active and Hoverable Buttons</title>
<style>
.pagination {
display: flex;
list-style-type: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #007bff;
border: 1px solid #dee2e6;
border-radius: 50px; /* Change to full roundness */
transition: background-color 0.3s, color 0.3s;
}
.pagination a:hover {
background-color: #e9ecef;
}
.pagination .active a {
background-color: #007bff;
color: white;
border-color: #007bff;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
توضیحات:
border-radius: 50px: گرد کردن کامل گوشه‌های دکمه‌ها.
4. Hoverable Transition Effect
افکت تغییر رنگ پس‌زمینه و مقیاس در حالت هاور را اضافه می‌کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoverable Transition Effect</title>
<style>
.pagination {
display: flex;
list-style-type: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #007bff;
border: 1px solid #dee2e6;
border-radius: 5px;
transition: all 0.3s; /* The effect of changing all properties */
}
.pagination a:hover {
background-color: #e9ecef;
transform: scale(1.1); /* Link enlargement in hover mode */
}
.pagination .active a {
background-color: #007bff;
color: white;
border-color: #007bff;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
توضیحات:
transform: scale(1.1): بزرگتر شدن لینک‌ها در حالت هاور.
5. Bordered Pagination
استایل‌های زیر را برای ایجاد pagination با حاشیه اضافه می‌کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bordered Pagination</title>
<style>
.pagination {
display: flex;
list-style-type: none;
padding: 0;
border: 1px solid #dee2e6; /* Add general margin to pagination */
border-radius: 5px; /* Round the corners */
}
.pagination li {
margin: 0;
}
.pagination a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #007bff;
border-left: 1px solid #dee2e6; /* Add a margin to the left of each link */
}
.pagination li:first-child a {
border-left: none; /* Remove the border from the first link */
}
.pagination a:hover {
background-color: #e9ecef;
}
.pagination .active a {
background-color: #007bff;
color: white;
border-color: #007bff;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
توضیحات:
border: افزودن حاشیه به کل pagination.border-left: افزودن حاشیه به چپ هر لینک.border-left: noneبرای اولین لینک: حذف حاشیه از اولین لینک.
6. Space Between Links
افزودن فضای بین لینک‌ها با استفاده از margin.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Between Links</title>
<style>
.pagination {
display: flex;
list-style-type: none;
padding: 0;
}
.pagination li {
margin: 0 10px; /* Space between links */
}
.pagination a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #007bff;
border: 1px solid #dee2e6;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
.pagination a:hover {
background-color: #e9ecef;
}
.pagination .active a {
background-color: #007bff;
color: white;
border-color: #007bff;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
توضیحات:
margin: 0 10px: افزودن فضای افقی بین لینک‌ها.
7. Pagination Size
تغییر اندازه pagination با استفاده از padding.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination Size</title>
<style>
.pagination {
display: flex;
list-style-type: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
display: block;
padding: 15px 20px; /* Increase padding to make links bigger */
text-decoration: none;
color: #007bff;
border: 1px solid #dee2e6;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
.pagination a:hover {
background-color: #e9ecef;
}
.pagination .active a {
background-color: #007bff;
color: white;
border-color: #007bff;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
توضیحات:
padding: 15px 20px: افزایش padding برای بزرگتر شدن لینک‌ها.
8. Centered Pagination
مرکزگذاری pagination با استفاده از flexbox.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Pagination</title>
<style>
.pagination {
display: flex;
list-style-type: none;
padding: 0;
justify-content: center; /* Centering pagination */
}
.pagination li {
margin: 0 5px;
}
.pagination a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #007bff;
border: 1px solid #dee2e6;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
.pagination a:hover {
background-color: #e9ecef;
}
.pagination .active a {
background-color: #007bff;
color: white;
border-color: #007bff;
}
</style>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
توضیحات:
justify-content: center: مرکزگذاری pagination در داخل ظرف والد.
با استفاده از این روش‌ها، می‌توانید pagination زیبا و کاربرپسندی برای وبسایت خود ایجاد کنید که تجربه کاربری بهتری را فراهم کند.
ستون‌های متعدد در CSS
استفاده از ستون‌های متعدد در CSS به شما این امکان را می‌دهد که محتوای خود را به شکل چند ستونه نمایش دهید، مشابه روزنامه‌ها و مجلات. این ویژگی‌ها باعث می‌شوند که متن‌ها و محتوای طولانی به شکل منظم‌تر و خواناتر در صفحات وب نمایش داده شوند. در این بخش، به معرفی و توضیح ویژگی‌های مختلف ستون‌ها در CSS می‌پردازیم.
1. column-count
این ویژگی تعداد ستون‌هایی که محتوای یک عنصر باید به آنها تقسیم شود را مشخص می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Count</title>
<style>
.columns {
column-count: 3; /* Number of columns */
column-gap: 20px; /* The distance between the columns */
}
</style>
</head>
<body>
<div class="columns">
<p>This text is divided into three columns. Columns help you display long texts in an organized and readable way.</p>
</div>
</body>
</html>
توضیحات:
column-count: 3: تعیین تعداد ستون‌ها به عدد 3.column-gap: 20px: تنظیم فاصله بین ستون‌ها.
2. column-gap
این ویژگی فاصله بین ستون‌ها را تنظیم می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Gap</title>
<style>
.columns {
column-count: 3;
column-gap: 50px; /* Long distance between columns */
}
</style>
</head>
<body>
<div class="columns">
<p>This text is displayed with a large space between the columns.</p>
</div>
</body>
</html>
توضیحات:
column-gap: 50px: تنظیم فاصله بین ستون‌ها به عدد 50px.
3. column-rule-style, column-rule-width, column-rule-color, column-rule
این ویژگی‌ها برای استایل‌دهی به خطوط جداکننده بین ستون‌ها استفاده می‌شوند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Rule</title>
<style>
.columns {
column-count: 3;
column-gap: 20px;
column-rule-style: solid; /* Line style */
column-rule-width: 2px; /* Line thickness */
column-rule-color: #000; /* line color */
}
</style>
</head>
<body>
<div class="columns">
<p>This text is displayed with separator lines between columns.</p>
</div>
</body>
</html>
توضیحات:
column-rule-style: solid: استایل خط به صورت solid.column-rule-width: 2px: ضخامت خط 2px.column-rule-color: #000: رنگ خط مشکی.
4. column-span
این ویژگی تعیین می‌کند که یک عنصر به تمامی ستون‌ها span کند یا فقط در یک ستون باقی بماند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Span</title>
<style>
.columns {
column-count: 3;
column-gap: 20px;
}
.span-all {
column-span: all; /* This paragraph spans all columns */
background-color: #f0f0f0;
padding: 10px;
}
</style>
</head>
<body>
<div class="columns">
<p class="span-all">This paragraph is spanned to all columns.</p>
<p>Column one</p>
<p>Column two</p>
<p>Column three</p>
</div>
</body>
</html>
توضیحات:
column-span: all: تعیین می‌کند که عنصر به تمامی ستون‌ها span کند.
5. column-width
این ویژگی عرض ستون‌ها را تنظیم می‌کند. مرورگر به صورت خودکار تعداد ستون‌ها را براساس عرض تعیین‌شده تنظیم می‌کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Width</title>
<style>
.columns {
column-width: 200px; /* The width of each column is 200px */
column-gap: 20px;
}
</style>
</head>
<body>
<div class="columns">
<p>This text is displayed in columns with a width of 200px.</p>
</div>
</body>
</html>
توضیحات:
column-width: 200px: تنظیم عرض هر ستون به 200px.
ترکیب ویژگی‌ها
می‌توان ویژگی‌های مختلف را با هم ترکیب کرد تا یک طراحی پیچیده‌تر و جذاب‌تر ایجاد کرد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combination of features</title>
<style>
.columns {
column-count: 3;
column-gap: 30px;
column-rule: 2px solid #007bff; /* Combine all line properties in one command */
}
.span-all {
column-span: all;
background-color: #f0f0f0;
padding: 10px;
}
</style>
</head>
<body>
<div class="columns">
<p class="span-all">This paragraph spans all columns and has separator lines between columns.</p>
<p>Column one</p>
<p>Column two</p>
<p>Column three</p>
</div>
</body>
</html>
توضیحات:
column-rule: 2px solid #007bff: استفاده از ویژگی ترکیبی برای تعیین استایل، رنگ و ضخامت خط جداکننده.
استفاده از ستون‌های متعدد در CSS یک روش ساده و کارآمد برای نمایش متن‌ها و محتواهای طولانی به شکل منظم‌تر و خواناتر است. این ویژگی‌ها به شما این امکان را می‌دهند تا به راحتی محتوای خود را به بخش‌های کوچکتر تقسیم کنید و تجربه کاربری بهتری را برای بازدیدکنندگان وبسایت خود فراهم کنید.
ویژگی‌های رابط کاربری در CSS
CSS ویژگی‌های زیادی برای بهبود رابط کاربری فراهم می‌کند که باعث می‌شوند تعامل کاربران با وبسایت بهتر و جذاب‌تر شود. در این بخش، به دو ویژگی مهم یعنی outline-offset و resize می‌پردازیم. این ویژگی‌ها به شما کمک می‌کنند تا قابلیت‌های تعاملی و استایل‌های پیشرفته‌تری به عناصر وبسایت خود اضافه کنید.
1. ویژگی outline-offset
ویژگی outline-offset فاصله‌ی خط دور (outline) از لبه‌ی عنصر را تعیین می‌کند. این ویژگی به شما امکان می‌دهد که خط دور را از لبه‌های عنصر جدا کنید و فضای اضافی بین آنها ایجاد کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outline Offset</title>
<style>
.box {
width: 200px;
height: 100px;
border: 2px solid #000;
outline: 3px solid #007bff; /* blue round line */
outline-offset: 10px; /* Line distance away from the edges of the element */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
توضیحات:
outline: 3px solid #007bff: تنظیم خط دور به ضخامت ۳ پیکسل و رنگ آبی.outline-offset: 10px: تنظیم فاصله‌ی خط دور از لبه‌های عنصر به ۱۰ پیکسل.
2. ویژگی resize
ویژگی resize به کاربران این امکان را می‌دهد که اندازه‌ی عناصر خاصی را تغییر دهند. این ویژگی معمولاً برای textarea و سایر عناصر قابل تغییر اندازه استفاده می‌شود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resize</title>
<style>
.resizable-box {
width: 200px;
height: 100px;
border: 2px solid #000;
padding: 10px;
resize: both; /* Ability to resize vertically and horizontally */
overflow: auto; /* Enable scrolling if necessary */
}
</style>
</head>
<body>
<div class="resizable-box">
This box is resizable.
</div>
</body>
</html>
توضیحات:
resize: both: اجازه می‌دهد که کاربر بتواند اندازه‌ی عنصر را هم به صورت افقی و هم عمودی تغییر دهد.overflow: auto: فعال کردن اسکرول در صورت لزوم.
سایر مقادیر resize:
resize: none;: غیرفعال کردن قابلیت تغییر اندازه.resize: horizontal;: اجازه تغییر اندازه فقط به صورت افقی.resize: vertical;: اجازه تغییر اندازه فقط به صورت عمودی.
ترکیب ویژگی‌های outline-offset و resize
برای اینکه بیشتر با این ویژگی‌ها آشنا شویم، می‌توانیم از هر دو ویژگی در یک مثال استفاده کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outline Offset and Resize</title>
<style>
.interactive-box {
width: 300px;
height: 150px;
border: 2px solid #000;
outline: 5px dashed #ff5733; /* The orange round line is a dashed line */
outline-offset: 15px; /* Line distance away from the edges of the element */
padding: 10px;
resize: both; /* Ability to resize vertically and horizontally */
overflow: auto; /* Enable scrolling if necessary */
}
</style>
</head>
<body>
<div class="interactive-box">
This box has both a long line with a space and the ability to change the size. You can resize it and see its outline at a distance from the edges of the box.
</div>
</body>
</html>
متغیرها در CSS
متغیرها در CSS به شما این امکان را می‌دهند که مقادیر تکراری را به صورت متمرکز مدیریت کنید و استایل‌های خود را انعطاف‌پذیرتر و نگهداری آنها را آسان‌تر کنید. با استفاده از متغیرها، می‌توانید رنگ‌ها، اندازه‌ها، فونت‌ها و دیگر مقادیر CSS را به صورت دینامیک و متمرکز تعریف کنید.
تعریف متغیرها
برای تعریف متغیر در CSS از -- در ابتدای نام متغیر استفاده می‌کنیم و معمولاً متغیرها را در ریشه سند CSS تعریف می‌کنند.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333333;
--main-padding: 20px;
}
در این مثال، سه متغیر --main-bg-color، --main-text-color و --main-padding تعریف شده‌اند.
استفاده از متغیرها
برای استفاده از متغیرها، از تابع var() استفاده می‌کنیم.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
padding: var(--main-padding);
}
مثال جامع
در اینجا مثالی جامع‌تر که شامل تعریف و استفاده از متغیرها در CSS است آورده شده است:
HTML:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using variables in CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
<p>This is an example of using variables in CSS.</p>
<button>click</button>
</div>
</body>
</html>
CSS (styles.css):
:root {
--main-bg-color: #e0f7fa;
--main-text-color: #006064;
--main-padding: 20px;
--button-bg-color: #004d40;
--button-text-color: #ffffff;
--button-padding: 10px 20px;
--button-radius: 5px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
padding: var(--main-padding);
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}
button {
background-color: var(--button-bg-color);
color: var(--button-text-color);
padding: var(--button-padding);
border: none;
border-radius: var(--button-radius);
cursor: pointer;
}
button:hover {
background-color: var(--button-text-color);
color: var(--button-bg-color);
}
توضیحات مثال
تعریف متغیرها در :root:
--main-bg-color: رنگ پس‌زمینه اصلی برای صفحه.--main-text-color: رنگ متن اصلی.--main-padding: فاصله داخلی اصلی برای بدنه.--button-bg-color: رنگ پس‌زمینه برای دکمه‌ها.--button-text-color: رنگ متن برای دکمه‌ها.--button-padding: فاصله داخلی برای دکمه‌ها.--button-radius: شعاع حاشیه برای دکمه‌ها.
استفاده از متغیرها در استایل‌ها:
- در بدنۀ سند (body)، از متغیرهای
--main-bg-color،--main-text-colorو--main-paddingاستفاده شده است. - در کلاس
container، متن وسط‌چین شده است. - برای دکمه‌ها (button)، از متغیرهای
--button-bg-color،--button-text-color،--button-paddingو--button-radiusاستفاده شده است. - در حالت شناور (hover) دکمه، رنگ‌های متن و پس‌زمینه تغییر می‌کنند.
متغیرها در CSS ابزاری قدرتمند برای مدیریت استایل‌های تکراری و نگهداری آسان‌تر کدها هستند. با استفاده از متغیرها، می‌توانید مقادیر مشترک را در یک مکان تعریف کنید و در سراسر کدهای CSS از آنها استفاده کنید، که این موضوع باعث بهبود کارایی و کاهش خطاهای نگهداری می‌شود. امیدوارم با این توضیحات و مثال‌ها بتوانید به خوبی از متغیرها در پروژه‌های خود استفاده کنید.
خصوصیت box-sizing
یکی از مهم‌ترین خصوصیات در CSS که می‌تواند به شما کمک کند تا عناصر وب‌سایت‌تان به شکلی قابل پیش‌بینی‌تر و کارآمدتر رفتار کنند، box-sizing است. با استفاده از این خصوصیت، می‌توانید کنترل بیشتری روی اندازه‌گیری عرض و ارتفاع عناصر داشته باشید.
مفهوم box-sizing
به طور پیش‌فرض، CSS به این صورت کار می‌کند که وقتی شما عرض و ارتفاع یک عنصر را مشخص می‌کنید، تنها محتویات آن عنصر را در نظر می‌گیرد و حاشیه‌ها (margin)، فاصله داخلی (padding)، و حاشیه (border) را به این اندازه اضافه می‌کند. این رفتار می‌تواند در برخی موارد موجب پیچیدگی شود، زیرا محاسبه دقیق اندازه نهایی عنصر سخت‌تر می‌شود.
با استفاده از خصوصیت box-sizing، می‌توانید این رفتار پیش‌فرض را تغییر دهید.
مقادیر box-sizing
content-box(پیش‌فرض): این مقدار فقط اندازه محتویات عنصر را در عرض و ارتفاع آن محاسبه می‌کند و حاشیه‌ها، فاصله داخلی، و حاشیه را به آن اضافه می‌کند.border-box: این مقدار اندازه محتویات، فاصله داخلی، و حاشیه را در عرض و ارتفاع عنصر محاسبه می‌کند. در نتیجه، اندازه نهایی عنصر شامل حاشیه و فاصله داخلی است و محاسبه آن ساده‌تر می‌شود.
مثال 1: content-box (پیش‌فرض)
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content Box Example</title>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
background-color: #f0f0f0;
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="box">This is an example of a content-box</div>
</body>
</html>
در این مثال، عرض نهایی عنصر برابر است با:
200px (Contents width) + 20px (padding) * 2 + 5px (border) * 2 = 250px
مثال 2: border-box
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Box Example</title>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
background-color: #f0f0f0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">This is an example of a border-box</div>
</body>
</html>
در این مثال، عرض نهایی عنصر همان 200px است، زیرا box-sizing برابر با border-box است و عرض محتویات، padding، و border را شامل می‌شود.
استفاده عمومی از box-sizing
بهترین روش برای استفاده از box-sizing به صورت جهانی (برای تمام عناصر) است تا رفتار پیش‌بینی‌پذیرتری داشته باشید. معمولاً به این شکل نوشته می‌شود:
*,
*::before,
*::after {
box-sizing: border-box;
}
این تنظیم باعث می‌شود تمامی عناصر و شبه‌عناصر در سند از مدل border-box پیروی کنند، که این امر مدیریت ابعاد عناصر را بسیار آسان‌تر می‌کند.
Media Queries
یکی از ابزارهای قدرتمند در CSS برای ایجاد وب‌سایت‌های واکنش‌گرا (Responsive) استفاده از Media Queries است. با Media Queries می‌توانید استایل‌های مختلفی برای دستگاه‌ها و اندازه‌های مختلف صفحه‌نمایش تعریف کنید. این ویژگی به شما امکان می‌دهد تا طراحی‌های خود را برای انواع دستگاه‌ها از جمله موبایل‌ها، تبلت‌ها و دسکتاپ‌ها بهینه کنید.
مفهوم Media Queries
Media Queries به شما اجازه می‌دهد تا استایل‌های CSS را بر اساس ویژگی‌های خاص دستگاه‌ها (مثل عرض، ارتفاع، رزولوشن و ...) اعمال کنید. با استفاده از Media Queries می‌توانید تعیین کنید که استایل‌های خاصی فقط زمانی اعمال شوند که شرایط خاصی برقرار باشد.
نحوه استفاده از Media Queries
نحوه نوشتن Media Queries به این شکل است:
@media (Condition) {
/* CSS to be applied */
}
مثال‌های کاربردی
تغییر استایل‌ها بر اساس عرض صفحه‌نمایش
/* General styles */
body {
font-family: Arial, sans-serif;
color: #333;
}
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
body {
background-color: lightgreen;
}
}
@media (min-width: 1201px) {
body {
background-color: lightcoral;
}
}
در این مثال، رنگ پس‌زمینه صفحه بر اساس عرض صفحه‌نمایش تغییر می‌کند:
- برای عرض‌های کمتر از 600 پیکسل، پس‌زمینه به رنگ آبی روشن است.
- برای عرض‌های بین 601 تا 1200 پیکسل، پس‌زمینه به رنگ سبز روشن است.
- برای عرض‌های بیشتر از 1201 پیکسل، پس‌زمینه به رنگ قرمز روشن است.
پنهان کردن عنصر در دستگاه‌های کوچک
/* General styles */
.navbar {
display: block;
background-color: #333;
color: white;
padding: 10px;
}
@media (max-width: 768px) {
.navbar {
display: none;
}
}
در این مثال، نوار ناوبری (navbar) در دستگاه‌هایی با عرض کمتر از 768 پیکسل پنهان می‌شود.
تغییر استایل فونت برای دستگاه‌های مختلف
/* General styles */
h1 {
font-size: 36px;
}
@media (max-width: 600px) {
h1 {
font-size: 24px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
h1 {
font-size: 30px;
}
}
در این مثال، اندازه فونت تیتر (h1) بر اساس عرض صفحه‌نمایش تغییر می‌کند:
- برای عرض‌های کمتر از 600 پیکسل، اندازه فونت 24 پیکسل است.
- برای عرض‌های بین 601 تا 1200 پیکسل، اندازه فونت 30 پیکسل است.
ویژگی‌های مختلف برای استفاده در Media Queries
widthوheight: عرض و ارتفاع صفحه‌نمایش.min-widthوmax-width: حداقل و حداکثر عرض صفحه‌نمایش.min-heightوmax-height: حداقل و حداکثر ارتفاع صفحه‌نمایش.orientation: جهت‌گیری صفحه (عمودی یا افقی).resolution: رزولوشن دستگاه.
استفاده پیشرفته از Media Queries
می‌توانید Media Queries را برای ویژگی‌های مختلف و در ترکیب با هم استفاده کنید. مثلاً:
@media (min-width: 600px) and (orientation: landscape) {
/* Styles that only apply to devices at least 600px wide and in landscape mode */
}
Media Queries ابزار بسیار قدرتمندی هستند که به شما امکان می‌دهند وب‌سایت‌های واکنش‌گرا و انعطاف‌پذیر ایجاد کنید. با استفاده از Media Queries می‌توانید تجربه کاربری بهتری را برای کاربران خود فراهم کنید، زیرا وبسایت شما بر اساس دستگاه و اندازه صفحه‌نمایش آنها بهینه می‌شود.
با تمرین و تجربه بیشتر در استفاده از Media Queries، می‌توانید به طراحی‌هایی دست پیدا کنید که در هر دستگاهی به خوبی نمایش داده شوند و کاربری آسان‌تری داشته باشند.
Flexbox در CSS
Flexbox (Flexible Box Layout) یک مدل چیدمان در CSS است که برای طراحی و چیدمان صفحات وب به صورت انعطاف‌پذیر و کارآمد استفاده می‌شود. Flexbox به ما این امکان را می‌دهد که آیتم‌ها را در یک کانتینر به صورت افقی یا عمودی مرتب کنیم و تنظیمات دقیقی برای نحوه رفتار آیتم‌ها در فضای موجود داشته باشیم. در ادامه به معرفی و توضیح جامع ویژگی‌های مختلف Flexbox می‌پردازیم.
1. flex-direction
این خصوصیت تعیین می‌کند که آیتم‌های فرزند در چه جهتی قرار بگیرند (افقی یا عمودی).
row: آیتم‌ها به صورت ردیفی از چپ به راست چیده می‌شوند (پیش‌فرض).row-reverse: آیتم‌ها به صورت ردیفی از راست به چپ چیده می‌شوند.column: آیتم‌ها به صورت ستونی از بالا به پایین چیده می‌شوند.column-reverse: آیتم‌ها به صورت ستونی از پایین به بالا چیده می‌شوند.
.container {
display: flex;
flex-direction: row; /* or row-reverse, column, column-reverse */
}
2. flex-wrap
این خصوصیت تعیین می‌کند که آیا آیتم‌ها در صورت کمبود فضا به خط بعدی بروند یا خیر.
nowrap: همه آیتم‌ها در یک خط چیده می‌شوند (پیش‌فرض).wrap: آیتم‌ها به خطوط بعدی می‌روند.wrap-reverse: آیتم‌ها به خطوط بعدی می‌روند و جهت آنها معکوس می‌شود.
.container {
display: flex;
flex-wrap: wrap; /* or nowrap, wrap-reverse */
}
3. flex-flow
این خصوصیت یک ترکیب کوتاه برای flex-direction و flex-wrap است.
.container {
display: flex;
flex-flow: row wrap; /* or a combination of flex-direction and flex-wrap */
}
4. justify-content
این خصوصیت نحوه توزیع فضای اضافی را بین آیتم‌های فرزند در محور اصلی تعیین می‌کند.
flex-start: آیتم‌ها از ابتدای کانتینر شروع می‌شوند.flex-end: آیتم‌ها از انتهای کانتینر شروع می‌شوند.center: آیتم‌ها در مرکز کانتینر قرار می‌گیرند.space-between: فضای مساوی بین آیتم‌ها ایجاد می‌کند.space-around: فضای مساوی در اطراف هر آیتم ایجاد می‌کند.space-evenly: فضای مساوی بین و اطراف هر آیتم ایجاد می‌کند.
.container {
display: flex;
justify-content: center; /* or flex-start, flex-end, space-between, space-around, space-evenly */
}
5. align-items
این خصوصیت نحوه توزیع فضای اضافی را بین آیتم‌های فرزند در محور عمود تعیین می‌کند.
flex-start: آیتم‌ها در ابتدای محور عمودی قرار می‌گیرند.flex-end: آیتم‌ها در انتهای محور عمودی قرار می‌گیرند.center: آیتم‌ها در مرکز محور عمودی قرار می‌گیرند.baseline: آیتم‌ها در خط پایه متن قرار می‌گیرند.stretch: آیتم‌ها کشیده می‌شوند تا کل ارتفاع کانتینر را پر کنند (پیش‌فرض).
.container {
display: flex;
align-items: center; /* or flex-start, flex-end, baseline, stretch */
}
6. align-content
این خصوصیت نحوه توزیع فضای اضافی را بین خطوط در کانتینر چندخطی تعیین می‌کند.
flex-start: خطوط در ابتدای کانتینر قرار می‌گیرند.flex-end: خطوط در انتهای کانتینر قرار می‌گیرند.center: خطوط در مرکز کانتینر قرار می‌گیرند.space-between: فضای مساوی بین خطوط ایجاد می‌کند.space-around: فضای مساوی در اطراف هر خط ایجاد می‌کند.stretch: خطوط کشیده می‌شوند تا کل ارتفاع کانتینر را پر کنند (پیش‌فرض).
.container {
display: flex;
flex-wrap: wrap; /* to become multi-linear */
align-content: center; /* or flex-start, flex-end, space-between, space-around, stretch */
}
7. order
این خصوصیت ترتیب آیتم‌ها را در کانتینر تعیین می‌کند.
.item1 {
order: 2;
}
.item2 {
order: 1;
}
8. flex-grow
این خصوصیت تعیین می‌کند که آیتم چه مقدار از فضای اضافی را اشغال کند.
.item {
flex-grow: 1; /* The item takes up 1 unit of extra space */
}
9. flex-shrink
این خصوصیت تعیین می‌کند که آیتم چه مقدار از فضای اضافی را در صورت کمبود فضا کاهش دهد.
.item {
flex-shrink: 1; /* Item reduces 1 unit of extra space */
}
10. flex-basis
این خصوصیت اندازه پیش‌فرض آیتم را قبل از فضای اضافی تعیین می‌کند.
.item {
flex-basis: 200px; /* Default item size is 200px */
}
11. flex
این خصوصیت ترکیبی کوتاه برای flex-grow, flex-shrink و flex-basis است.
.item {
flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}
12. align-self
این خصوصیت نحوه ترازبندی آیتم در محور عمود را تعیین می‌کند و به طور مستقل برای هر آیتم قابل تنظیم است.
.item {
align-self: center; /* or flex-start, flex-end, baseline, stretch */
}
مثال کامل
یک مثال کامل که تمامی این ویژگی‌ها را شامل می‌شود:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
height: 400px;
border: 1px solid #000;
}
.item {
flex: 1 1 100px;
height: 100px;
margin: 10px;
background-color: lightcoral;
text-align: center;
line-height: 100px;
}
.item:nth-child(1) {
order: 2;
align-self: flex-start;
}
.item:nth-child(2) {
order: 1;
align-self: flex-end;
}
.item:nth-child(3) {
order: 3;
flex-grow: 2;
align-self: center;
}
.item:nth-child(4) {
flex-basis: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
در این مثال:
containerبه عنوان یک کانتینر flex تعریف شده است.flex-directionبه صورت ردیفی (row) تنظیم شده است.flex-wrapبهwrapتنظیم شده است تا آیتم‌ها به خطوط بعدی بروند.justify-contentبهspace-aroundتنظیم شده است تا فضای مساوی در اطراف آیتم‌ها ایجاد شود.align-itemsوalign-contentبهcenterتنظیم شده‌اند تا آیتم‌ها و خطوط در مرکز قرار بگیرند.- هر آیتم دارای تنظیمات مختلف
flex,order,align-selfوflex-basisاست.
خب دوستان عزیز، این هم از قسمت هفتم آموزش CSS که پر بود از مطالب کاربردی و جذاب. حالا با یادگیری ماسک کردن در CSS، طراحی دکمه‌های مختلف، ایجاد pagination، و کار با ستون‌های متعدد، می‌تونید سایت‌های خودتون رو به شکلی حرفه‌ای‌تر و زیباتر طراحی کنید. همینطور با استفاده از ویژگی‌های رابط کاربری، متغیرها، Media Queries و Flexbox، می‌تونید به راحتی وب‌سایت‌های رسپانسیو و مدرنی بسازید که تجربه کاربری بهتری ارائه میدن.
یادگیری این تکنیک‌ها و ابزارها به شما کمک می‌کنه تا از رقبای خودتون جلو بیفتید و سایت‌هایی طراحی کنید که هم از نظر ظاهری جذاب باشن و هم از نظر عملکردی بی‌نقص. امیدوارم از این بخش هم لذت برده باشید و مطالب به کارتون بیاد. مثل همیشه، اگر سوالی داشتید یا نیاز به راهنمایی بیشتر داشتید، حتما تو نظرات بپرسید. موفق و پیروز باشید!
صادق جعفری
از کودکی به کامپیوتر و دنیای دیجیتال علاقه داشتم، به همین دلیل ترک تحصیل کردم و تمام تلاش خودم را صرفا برای یادگیری کامپیوتر، طراحی، برنامه نویسی و ... به کار گرفتم. در کنار مشاغل مختلفی که مجبور به انجامشان بودم برنامه نویسی را یاد گرفتم و از سال 1390 وارد بازار کار شدم و همیشه در تلاش هستم تا چالش های روبرو را با موفقیت پشت سر بگذارم.
شبکه های اجتماعی من