آیا به دنبال الهام از چگونگی ایجاد پیچ و تاب در طراحی پروژه خود هستید؟ به این 5 تکنیک CSS نگاهی بیندازید و از تجربه برخی ایده های جسورانه لذت ببرید!
1. با پس زمینه-کلیپ ، دهه 90 را برگردانید
آیا تا به حال فکر کرده اید که چگونه می توان یک گرادیان یا یک بافت را به متن در CSS اعمال کرد؟ خبر خوب این است که شما می توانید با ویژگی کلیپ پس زمینه به راحتی به آن دست پیدا کنید!
ابتدا باید رنگ پس زمینه را روی خود اعمال کنیم
، سپس از متن مقدار برای استفاده کنید
background-clip
ویژگی را تنظیم کنید و رنگ متن را روی شفاف تنظیم کنید.
<h1 class="wordart"The background is clipped to this texth1
h1 {
background-color: #ff1493;
background-image: linear-gradient(319deg, #ff1493 0%, #0000ff 37%, #ff8c00 100%);
}
.wordart {
-webkit-background-clip: text;
color: transparent;
}
و voila ، WordArt به سبک 90 آماده است!
2. اشکال دیوانه با کلیپ مسیر
اگر دوست دارید طرح های خود را آزمایش کنید ، ممکن است بخواهید ویژگی clip-path را امتحان کنید. Clip-path یک منطقه برش ایجاد می کند که تعیین می کند چه بخشی از یک عنصر باید نشان داده شود. هر چیزی خارج از مسیر کلیپ (مرز شکل) قابل مشاهده نخواهد بود.
برای ایجاد این چند ضلعی ساده من استفاده کردم
.clipped
کلاس روی تصویر و از این مسیر استفاده کرده است:
.clipped {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
چگونه کار می کند؟ خوب ، مجموعه ای از دو …