ویژگی clip در CSS برای ایجاد یک منطقه قطع برای یک عنصر استفاده می‌شود که ناحیه قابل مشاهده عنصر را تعریف می‌کند.
ویژگی clip فقط برای عناصری با موقعیت مطلق یا ثابت اعمال می‌شود. این فصل به بررسی نحوه استفاده از ویژگی clip می‌پردازد.
گرچه برخی از مرورگرها ممکن است هنوز این ویژگی را پشتیبانی کنند، اما در توسعه وب مدرن، این ویژگی به عنوان قدیمی و غیر استاندارد محسوب می‌شود. به جای آن، توسعه‌دهندگان به طور معمول از ویژگی clip-path استفاده می‌کنند که امکانات بیشتری را برای قطع فراهم می‌کند.
در زیر تمام مقادیر ممکنی که می‌توان برای ویژگی clip استفاده کرد، آورده شده است:
-
auto: عنصر به طور پیش‌فرض قابل مشاهده است.
-
<shape>: مقدار rect(top, right, bottom, left) برای ویژگی clip یک منطقه قطع مستطیلی را تعریف می‌کند. مقادیر top و bottom به فاصله از بالای حاشیه اشاره دارند، در حالی که مقادیر right و left به فاصله از حاشیه چپ اشاره دارند.
این ویژگی تنها برای عناصر با موقعیت مطلق اعمال می‌شود.
نحوه استفاده از ویژگی clip به شکل زیر است:
clip = | auto; auto Value
ویژگی CSS clip با مقدار auto از این مهم که عنصر را بریده نمی‌کند، بنابراین کل عنصر قابل مشاهده است. این ویژگی برای عناصری که دارای ویژگی position:absolute یا position:fixed هستند، اعمال می‌شود و مقدار پیش‌فرض آن است.
<html>
<head>
<style>
.clip-auto {
position: absolute;
width: 200px;
background-color: #3be028;
padding: 10px;
clip: auto;
}
</style>
</head>
<body>
<div class="clip-auto">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>در مثال بالا، مشاهده می‌شود که متن داخل عنصر div که دارای کلاس clip-auto است، به طور کامل قابل مشاهده است و برش نمی‌شود.
<html>
<head>
<style>
.clip-auto-img {
position: absolute;
width: 150px;
padding: 10px;
clip: auto;
}
</style>
</head>
<body>
<img src="images/tree.jpg" class="clip-auto-img"/>
</body>
</html>در مثال دیگر، مشاهده می‌شود که تصویر داخل تگ img با کلاس clip-auto-img نیز به طور کامل قابل مشاهده است و برش نمی‌شود.
rect() Value
شما می‌توانید ویژگی clip را با استفاده از مقدار rect(top, right, bottom, left) تنظیم کنید تا یک ناحیه مستطیلی برشی برای یک عنصر مشخص کنید. مقادیر top، right، bottom و left می‌توانند یک طول یا auto باشند. اگر مقدار auto باشد، عنصر به لبه مربوطه برش داده می‌شود.
<html>
<head>
<style>
.clip-rect {
position: absolute;
width: 200px;
background-color: #3be028;
padding: 10px;
clip: rect(0px, 100px, 150px, 0px);
}
</style>
</head>
<body>
<div class="clip-rect">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>در مثال بالا، یک عنصر div با کلاس clip-rect تعریف شده است که دارای ابعاد 200px در 200px است. این عنصر دارای محتوا و پس زمینه رنگی است. با استفاده از ویژگی clip با مقدار rect(0px, 100px, 150px, 0px)، ناحیه مستطیلی از عنصر به ابعاد مشخص شده در تابع برش داده می‌شود.
<html>
<head>
<style>
.clip-rect-img {
position: absolute;
width: 150px;
padding: 10px;
clip: rect(0px, 200px, 160px, 0px);
}
</style>
</head>
<body>
<img src="images/tree.jpg" class="clip-rect-img"/>
</body>
</html>در مثال دیگر، تصویر داخل تگ img با کلاس clip-rect-img به کمک مقدار rect() برش داده شده است تا تنها قسمتی از تصویر در حالت مشاهده قرار گیرد.
Related Properties
ویژگی clip-path در CSS به شما امکان می‌دهد مناطق برشی را با استفاده از اشکال و مسیرهای مختلف تعریف کنید. این ویژگی به عنوان جایگزینی مدرن و پیشنهادی برای ویژگی clip در نظر گرفته می‌شود. از آن برای ایجاد اثرات برشی پیچیده‌تر، مانند برش با استفاده از اشکال هندسی، مسیرهای SVG، یا تصاویر استفاده می‌شود.
ویژگی clip-path امکانات بیشتری نسبت به clip دارد و از جمله قابلیت‌های آن عبارتند از:
- تعریف مناطق برشی با استفاده از اشکال هندسی مانند دایره، بیضی، مستطیل و مثلث.
- استفاده از مسیرهای SVG برای تعریف مناطق برشی پیچیده‌تر و سفارشی.
- استفاده از تصاویر به عنوان ماسک برای برش مناطق خاص.
- ایجاد اثرات ترکیبی بین اشکال هندسی و تصاویر.
به عنوان یک ویژگی مدرن، clip-path از پشتیبانی بهتری در مرورگرهای مدرن برخوردار است و قابلیت‌های بیشتری نسبت به clip ارائه می‌دهد. در نتیجه، استفاده از آن برای ایجاد اثرات برشی پیچیده و سفارشی توصیه می‌شود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام