5 نکته و ترفند CSS که باید در پروژه بعدی خود امتحان کنید

عکس پروفایل Jamie Swift Hacker Noon

آیا به دنبال الهام از چگونگی ایجاد پیچ ​​و تاب در طراحی پروژه خود هستید؟ به این 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%);
}

چگونه کار می کند؟ خوب ، مجموعه ای از دو …