ترفند های CSS که هر فرانت اند کاری باید بداند

ترفند های ضروری CSS

CSS مخفف عبارت Cascading Style Sheets است که برای توصیف نحوه نمایش عناصر HTML استفاده می شود. CSS یکی از اولین فناوری هایی است که شما باید به عنوان به توسعه دهنده فرانت اند بلد باشید. شما در سی اس اس می توانید علاوه بر رنگ دادن، تغییر موقعیت و غیره بر روی عناصر اچ تی ام ال، به آن ها انیمیشن داده و در کل به وب سایت خود روح ببخشید. در این پست قصد داریم که برخی از ترفند های CSS را بررسی کنیم.

1. Absolute positioning

اگر می خواهید موقعیت یک عنصر را در قسمت خاصی از وب سایت کنترل کنید، Absolute positioning کلید راه حل این مشکل است. اگر مرورگر خود را به عنوان یک کادر  بزرگ تصور کنید، Absolute positioning به شما امکان می دهد تا دقیقاً موقعیت یک عنصر را در این کادر مشخص کنید. از بالا، راست، پایین و چپ، همراه با یک مقدار پیکسل برای کنترل محل قرار گرفتن یک عنصر استفاده کنید. برای مثال یه کد زیر توجه کنید.

position:absolute;
top:20px;
right:20px;

2. * + selector

ستاره “*” به شما این اجازه را می دهد که تمام عناصر یک selector خاص را انتخاب کنید. به عنوان مثال، اگر از *p استفاده کنید و سپس کد سی اس اس را به آن اضافه کنید، تغییرات را بر روی تمام عناصر شما با تگ <p> انجام می دهد. این کار باعث می شود که بتوانید تغییرات کلی بر روی بخش های از سایت خود انجام دهید.

3. Overriding all styles

در استفاده از این ترفند باید محتاط باشید. زیرا اگر بخواهید برای هر چیزی از این ترفند استفاده کنید، با مشکل لود طولانی مواجه خواهید شد. با این حال، اگر می خواهید استایل سی اس اس دیگری را برای یک عنصر خاص overwrite کنید، از !important پس از استایل در سی اس اس خود استفاده کنید.

توجه داشته باشید که این ویژگی باید کم استفاده شود، زیرا اگر این کار را برای همه چیز انجام دهید، در طولانی مدت با مشکل مواجه خواهید شد. با این حال ، اگر می خواهید سبک CSS دیگری را برای یک عنصر خاص نادیده بگیرید، از “!” پس از سبک در css خود استفاده کنید. به عنوان مثال، اگر می خواهید سرصفحه های H2 در بخش خاصی از سایت شما به جای آبی قرمز باشد، از کد زیر استفاده کنید.

.section h2 { color:red !important; }

4. Centering

وسط قرار دادن کار مشکلی است، زیرا بستگی به چیزی دارد که می خواهید آن را در وسط قرار دهید. بیایید نگاهی به سی اس اس آیتم مورد نیاز، بر اساس محتوا داشته باشیم.

• متن (TEXT): متن با استفاده از کد ;text-align:center وسط چین می شود. اگر می خواهید آن را در دو طرف دیگر قرار دهید، به جای center، از left یا right استفاده کنید.
• محتوا (CONTENT): یک div (یا هر عنصر دیگری) را می توان با افزودن ویژگی block به آن و سپس استفاده از margins خودکار وسط چین کرد. به کد زیر توجه کنید.

#div1 {
display: block;
margin: auto;
width: anything under 100%;
}

5. Vertical alignment

شما از این ترفند در منوی CSS navigation استفاده خواهید کرد. نکته اصلی این است که ارتفاع منو و ارتفاع خط متن یکسان باشد. برای مثال:

.nav li{
line-height:50px;
height:50px;
}

6. Hover effects

این ترفند برای دکمه ها، لینک ها، بخش هایی از سایت شما، آیکون ها و موارد دیگر استفاده می شود. اگر می خواهید وقتی کسی ماوس خود را روی عنصری می گذارد، چیزی را تغییر دهید، از کد زیر استفاده کنید.

.entry h2{
font-size:36px;
color:#000;
font-weight:800;
}

.entry h2:hover{
color:#f00;
}

.entry h2:hover{
color:#f00;
transition: all 0.3s ease;
}

7. Blend modes

ما در حال حاضر می توانیم کارهای زیادی در سی اس اس انجام دهیم و یکی از آنها Blend modes است. دو ویژگی برای بلند مودز وجود دارد:

1. mix-blend-mode: ترکیب بین عنصر و عنصر پشت آن را مشخص می کند.
2. background-blend-mode: ترکیب بین تصویر پس زمینه و رنگ پس زمینه عنصر را مشخص می کند.

می توانید مثال mix-blend-mode را در کد زیر مشاهده کنید.

.blend {
width: 100vw;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}

.blend img {
position: absolute;
}

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

مثال background-blend-mode:

.blend-before {
background-image: url(_url);
width: 100vw;
height: 500px;
background-size: cover;
}

.blend-after {
background-image: url(_url);
width: 100vw;
height: 500px;
background-color: #20126f;
background-size: cover;
background-blend-mode: overlay;
}

8. Parallax scrolling

Parallax یک ترند بسیار رایج در طراحی وب مدرن است. این ویژگی در مورد اسکرول کردن محتوای پس زمینه با سرعتی متفاوت از محتوای خارجی هنگام اسکرول کردن صفحه است. بیایید مثال آن را در کد زیر ببنیم.

.wrapper {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
background-color: #f6f6f6;
}

.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 20vh 0;
}

img {
width: 100%;
}

h3 {
font-size: 60px;
color: white;
}

.box.box-back {
transform: translateZ(0);
z-index: 99;
text-align: center;
}

.box.box-front {
width: 1500px;
transform: translateZ(-1px) scale(2);
}

9. Shape outside

یک ویژگی فوق العاده دیگر نیز در سی اس اس وجود دارد که آن چنان رایج نیست. این ویژگی Shape outside است. این ویژگی تصمیم می‌گیرد که محتوا چگونه به دور عنصر شناور شود. برای مثال:

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

10. Image filters

کار کردن با تصاویر ممکن است جلوه های شگفت انگیز زیادی برای طرح ایجاد کند و به ایجاد نتایج خیره کننده کمک کند. سی اس اس اجازه می دهد تا از فیلترهای زیادی بر روی تصاویر استفاده کنید. تا به توسعه دهندگان کمک کند تا گرافیک و جلوه تصاویر را بدون استفاده از فتوشاپ تغییر دهند. بیایید به فیلترهایی که ممکن است از آن ها استفاده کنیم، نگاهی بیندازیم.

.image img {
max-width: 300px;
}

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

.grayscale {
filter: grayscale(100%);
}

.brightness {
filter: brightness(150%);
}

.saturate {
filter: saturate(200%);
}

.invert {
filter: invert(100%);
}

.huerotate {
filter: hue-rotate(180deg);
}

سخن پایانی

ما می خواهیم وب سایت ها و برنامه هایی با طراحی خوب ایجاد کنیم، اما گاهی اوقات فکر می کنیم ایجاد انیمیشن یا ماسک روی تصویر به تلاش و زمان زیادی نیاز دارد. همانطور که در این مقاله به شما نشان دادم، گاهی اوقات با استفاده از بعضی از ترفند های CSS بسیار راحت تر از تغییر تصویر در یک برنامه گرافیکی مثل فتوشاپ است. امیدوارم این نکات و ترفندها برای کد نویسی آینده شما مفید واقع شوند.

بیشتر بخوانید:

• معرفی انواع توسعه دهندگان و بررسی تفاوت آن ها
• بهترین منابع رایگان یادگیری برنامه نویسی
• توسعه دهنده Full-Stack کیست و نحوه تبدیل شدن به آن