خفن ترین قابلیت های جدید CSS

توی این پس میخوام چنتا از قابلیت های خفن و باحال و جدید CSS رو باهم بررسی کنیم. این ویژگی ها در CSS جدیدن و ممکنه توی ورژن پایین ساپورت نشن?? میتونید از وبسایت caniuse وضعیت ساپورت هر ویژگی رو هم ببینید?✌️ امیدوارم این پست براتون مفید باشه?

mix-blend-mode

با این ویژگی یک افکت blend ایجاد می کنیم تا متن یا عکسمون ، رنگ خودشون رو از المان پشتی بگیرن.

.blend h1 {
font size: 150px;
mix-blend-mode: overlay ;
}

حالا میبینی که blen ایجاد شده

text-overflow

با این ویژگی میتونیم شکستگی و خمیدگی های خیلی جذابی برای متن ها ایجاد کنید.

اگه فایل html این باشه

<div class="circle"></div>
<p> paragraph </ap>

فایل CSs بدین شکل میشه

.circle {
shape-outside: circle(50%);
width: 200px:
height: 200px;
}

حالا میبینی که متنت یه برش خوشگل خورده

Truncate the string

یکی از قابلیت های جدید CSS که با اون میتونیم بدون جاوا اسکریپت ، طول یک متن رو مدیریت و حتی برش بدیم .

p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

حالا میبینی که جای اضافی متن سه نقطه قرار گرفته

clip-path

اگر خواستی عکسات رو به هر شکلی که دوست داری درشون بیاری و ببری میتونی از این ویژگی استفاده کنی .

.circle img {clip-path: circle(30%)}
polygon img {
clip-path: polygon(5% 5%, 100% 10%, 900% 75%, 75% 75%, 75% 100%, 60% 75%, 20% 80%);
}

حالا میتونی تصاویر چند شکلیت رو ببینی

Full heigh and full width

با واحد اندازه vh میتونیم اندازه المان هامون رو درست با صفحه دیوایس کاربر تنظیم کنیم. خیلی خفنه

body {
background: skyblue
}
.blue-box {
width: 50vw;
height: 50vh;
background-color: #20126f;
}

حالا میبینی اندازه المان دقیق نصف اندازه صفحت هست.

filter

با این ویژگی میتونیم فیلترهای خیلی خفنی رو برای عکسامون قرار بدیم، مثلا برای محو کردن :

.blur {
filter: blur(5px):
}

حالا میتونی فیلترهای خفن روی عکسات رو ببینی

Mask

با این ویژگی خفن میتونیم برای عکس هامون ماسک بسازیم .

img {
width: 1000px;
mask-image: radial-gradient(circle at 50%, black 50%, rgba(0, 0, 0, 0.2) 10%);
mak-image: radial-gradient(circle at 50%, black 50% rgba(0, 0, 0, 0.2) 10%);
}

حالا میتونی ماسک عکست رو ببینی

• مطالب مرتبط : طراحی دکمه سه بعدی زیبا با html و Css

امیدواریم این مقاله برای شما مفید قرار گرفته شده باشد.