CSS ستون فقرات طراحی وب و توسعه front-end است. دانش کمی از ویژگی های CSS به شما کمک می کند تا مهارت های طراحی وب خود را به سطح بعدی ارتقا دهید. در این مقاله، برخی از جالب‌ترین ویژگی‌های CSS را که شما را در طراحی وب حرفه‌ای می‌سازد، مورد بحث قرار می‌دهیم.
1. ماسک-تصویر
ویژگی mask در CSS برای پنهان کردن یک عنصر با استفاده از برش یا پوشاندن تصویر در نقاط خاص استفاده می شود. ماسکینگ نحوه استفاده از یک تصویر یا عنصر گرافیکی را به عنوان درخشندگی یا ماسک آلفا تعریف می کند. این یک عملیات گرافیکی است که می تواند به طور کامل یا جزئی بخش های یک عنصر یا شی را پنهان کند.
با استفاده از ماسک، می توان بخش هایی از یک تصویر را با سطوح تیرگی مختلف نشان داد یا پنهان کرد. در CSS، ماسک کردن با استفاده از ویژگی mask-image به دست می‌آید و باید یک تصویر را به عنوان ماسک ارائه کنیم.
ویژگی mask-image به روشی مشابه با ویژگی background-image کار می کند. از یک مقدار url() برای ارسال در یک تصویر استفاده کنید. تصویر ماسک شما باید یک ناحیه شفاف یا نیمه شفاف داشته باشد.
در اینجا دو نمونه از افکت‌های جالب وجود دارد که می‌توان با ماسک کردن با استفاده از گرادیان‌ها انجام داد:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mask1 {
-webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
}
.mask2 {
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
}
</style>
</head>
<body>
<img class="mask1" src="image.jpg" width="400" height="400" alt="Image"/>
<img class="mask2" src="image.jpg" width="400" height="400" alt="Image"/>
</body>
</html>
نسخه ی نمایشی:
2. مسیر کلیپ
ویژگی clip-path به شما این امکان را می دهد که با برش دادن یک عنصر به یک شکل اصلی (دایره، بیضی، چند ضلعی یا داخل) یا به منبع SVG، اشکال پیچیده در CSS ایجاد کنید.
انیمیشن‌ها و انتقال‌های CSS با دو یا چند شکل مسیر کلیپ با تعداد نقاط یکسان امکان‌پذیر است.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mask3{
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>
</head>
<body>
<img class="mask3" src="image.jpg" width="400" height="400" alt="Image"/>
</body>
</html>
3. نمای پشت صورت
ویژگی backface-visibility مشخص می کند که آیا یک عنصر باید در زمانی که رو به صفحه نمایش نیست قابل مشاهده باشد یا خیر.
این ویژگی زمانی مفید است که یک عنصر بچرخد، و شما نمی خواهید پشت آن را ببینید.
برای درک بهتر این ویژگی، مثال زیر را مشاهده کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
}
.flip.hide-back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="flip">text</div>
<!-- U NO SEE! -->
<div class="flip hide-back">text</div>
</body>
</html>
4. پس زمینه-ترکیب-حالت
ویژگی background-blend-mode حالت ترکیبی هر لایه پس زمینه (رنگ و/یا تصویر) را مشخص می کند. برای استفاده از آن، باید حالت ترکیبی یک تصویر پس‌زمینه را مشخص کنید.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
</style>
</head>
<body>
<h1>The background-blend-mode Property</h1>
<div id="myDIV"></div>
<p><b>Note:</b> Edge prior 79 do not support the background-blend-mode property.</p>
</body>
</html>
5. تغییر اندازه
با ویژگی تغییر اندازه CSS، می توانیم اندازه یک عنصر را به صورت افقی، عمودی یا در هر دو جهت تغییر دهیم.
ما می توانیم چهار مقدار مختلف برای تغییر اندازه ویژگی تنظیم کنیم:
- هیچ یک – اندازه عنصر قابل تغییر نیست. این مقدار پیش فرض برای اکثر عناصر است (به جز برخی از عناصر مانند ناحیه متن).
- افقی – اندازه عنصر را می توان در جهت افقی تغییر داد.
- عمودی – اندازه عنصر را می توان در جهت عمودی تغییر داد.
- هر دو – اندازه عنصر را می توان در جهت افقی و عمودی تغییر داد. بیایید چهار عنصر p ایجاد کنیم و ارتفاع را روی 100 پیکسل و عرض را روی 200 پیکسل قرار دهیم. سپس، چهار ویژگی تغییر اندازه را به چهار p اعمال کنید و نحوه عملکرد آن را آزمایش کنید.
<html>
<head>
</head>
<style>
.wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
p {
width: 200px;
height: 100px;
overflow: auto;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.resize {
background: orange;
resize: both;
}
.resize-horizontal {
background: #fcba03;
resize: horizontal;
}
.resize-vertical {
background: pink;
resize: vertical;
}
.resize-none {
background: tomato;
resize: none;
}
</style>
<body>
<div class="wrapper">
<p class="resize-none">
resize: none
</p>
<p class="resize-horizontal">
resize: horizontal
</p>
<p class="resize-vertical">
resize: vertical
</p>
<p class="resize">
resize: both
</p>
</div>
</body>
</html>
نسخه ی نمایشی:
6. scroll-snap-type
ویژگی Scroll Snap type یک ویژگی داخلی در ماژول Scroll Snap است. بدون ماژول Scroll Snap، گالری تصاویر مضحک به نظر می رسد. قبل از ماژول Scroll Snap، این افکت را می توان با جاوا اسکریپت به دست آورد اما در این روزها Scroll Snap با CSS قابل دستیابی است. این ویژگی برای توقف پیمایش در نقطه خاصی از صفحه مفید است. می توانید از این ویژگی در بخش گالری صفحه وب خود استفاده کنید. به شما کنترل کامل اسکرول را می دهد.
نحو:
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]
7. حالت نوشتن
ویژگی Writing-Mode تراز متن را به گونه ای تغییر می دهد که بسته به زبان می توان آن را از بالا به پایین یا از چپ به راست خواند. به عنوان مثال، فرض کنید می خواهیم متنی را اضافه کنیم که از بالا به پایین و از راست به چپ خوانده می شود، مانند این:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-family: Georgia, serif;
font-size: 18px;
}
.vertical-rl {
writing-mode: vertical-rl;
color: #0074d9;
display: inline-block;
}
</style>
</head>
<body>
<p>This is text that needs to be read from top to bottom, and from right to left:</p>
<p class="vertical-rl">This is text that needs to be read from top to bottom, and from right to left.</p>
</body>
</html>
نسخه ی نمایشی:
خلاصه
در پایان، تسلط بر هنر طراحی وب کار غیر ممکنی نیست. با کمک این 7 ویژگی جالب CSS، می توانید مهارت های طراحی خود را به سطح بالاتری ببرید و در دنیای رقابتی طراحی وب برجسته شوید. این ویژگی ها برای هر طراح وب که به دنبال ارتقای بازی خود است ضروری است. بنابراین، پیش بروید و با این ابزارها آزمایش کنید و ببینید که چگونه می توانند به شما کمک کنند تا وب سایت هایی از نظر بصری خیره کننده و جذاب ایجاد کنید که توجه مخاطبان شما را جلب کند.
