🌌سلامی به چرخش Transitionها و درودی معجزه‌آسا با طعم Pseudo Class تقدیم به شما🌌

⭕ آیا با نحوه‌ی استایل‌دهی در CSS غریبه‌اید؟

⭕ آیا هنوز از امکانات جدید CSS3 شگفت‌زده نشده‌اید؟

⭕ آیا با چرخش‌ها و گردش‌های CSS3 آشنایی دارید؟

⭕ آیا تابه‌حال ارزش Pseudo Classها پی‌ برده‌اید؟

⭕ آیا فرق بین Transform و Transition را می‌‌دانید؟

👇 در این مقاله قصد داریم تمامی ابهامات و سوالات بالا را رفع نماییم. این شما و این هم؛ 👇

🔰 آموزش کار با Transition و Pseudo Class در CSS 🔰

 

انواع روش‌های استایل‌دهی به صفحات وب

در جلسه اول و دوم آموزش CSS3 درباره اهمیت سی اس اس و افزودن فونت دل‌خواه به سایت صحبت کردیم. در این جلسه قصد داریم ابتدا روش‌های استایل‌دهی که تگ‌های HTML را مورد بررسی قرار دهیم و در ادامه نیز با چند خاصیت خارق‌العاده CSS3 آشنا شویم.

به‌طور کلی با استفاده از سه روش می‌توان از طریق CSS به تگ‌های HTML دسترسی پیدا کرد که در ادامه هر یک را با ذکر مثال بررسی خواهیم نمود.

 

 

1. استفاده از CSS در سند HTML

اولین روش؛ نوشتن کدهای CSS داخل صفحه HTML می‌باشد. در این روش ما ابتدا به یک تگ باز و بسته‌ی <style> نیاز داریم که باید داخل تگ <head> قرار داده شود.

درون این تگ می‌توانیم استایل‌های دلخواه خود را اضافه نماییم.

قطعه کد زیر نمونه‌ای از این روش استایل‌دهی می‌باشد:

 

 
<head>

<style>

.div1{

Color: red;

Font-size: 17px;

Font-family: IRANSansDN;

}

</style>

</head>

 

اصطلاحاً به این روش، روش Internal گفته می‌شود.

2. فراخوانی CSS در HTML

درصورتی که تعداد کدهای CSS ما کم باشد، می‌توانیم از روش اول برای استایل‌دهی بهره گیریم. اما معمولاً برای پروژه‌های جدی‌تری ما با خِیلِ عظیمی از کدهای CSS سروکار داریم و طبیعتاً اگر همه‌ی این کدها را داخل یک سند HTML قرار دهیم، صفحه سایت ما سنگین خواهد شد و همچنین تغییرات در کدهای سی‌اس‌اس هم برای برنامه‌نویس دشوارتر خواهد بود.

بنابراین نیاز است تا کدهای CSS در دسته‌بندی‌های جداگانه قرار گیرند.

برای این کار لازم است تا کدهای CSS مختص به هر بخش، در یک فایل CSS قرار گیرند. مثلاً کدهای مربوط به ظاهر سایدبار، در فایلی به نام Sidebar.css و استایل‌های مربوط به ظاهر فوتر، در فایلی به نام Footer.css و… قرار گیرد.

پس درج کدهای موردنظر، لازم است تا فایل مربوطه را در صفحه‌ی html خود فراخوانی نماییم. این کار فقط کافیست قطعه کد زیر را وارد نماییم:

 
<link rel="stylesheet" href="../css/footer.css"/>


در قسمت rel با استفاده از کلمه کلیدی stylesheet مشخص می‌کنیم که این فایل، به یک فایل CSS اشاره دارد و در بخش href نیز با استفاده از روش‌های آدرس دهی که در جلسات مقدماتی آموزش HTML آموزش داده شد، آدرس فایل مورد نظر را درج خواهیم نمود.

اصطلاحاً به این روش، روش External گفته می‌شود.

اگر این مورد برای شما کمی گنگ و نامفهوم است، توصیه می‌شود ویدیو کوتاه بالا را با دقت مشاهده بفرمایید.

3. استایل‌دهی به تگ‌های HTML

در این روش؛ که اصطلاحاً Inline گفته می‌شود، ما استایل‌ها را مستقیماً داخل تگ‌های HTML تعریف خواهیم کرد.

البته ناگفته نماند که این روش استایل‌دهی به هیچ عنوان بهینه و اصولی نیست و یک طراح وب حرفه‌ای، ترجیحاً از روش‌های Internal و External استفاده می‌کند. اما کسب دانش نسبت به این ماجرا، به شما آسیبی وارد نخواهد نمود!

برای استایل‌دادن به یک تگ HTML با روش inline، فقط کافیست از ویژگی Style در تگ مورد نظر استفاده کرده و استایل‌ها را درون آن درج نماییم.

برای درک بهتر این موضوع فقط کافیست به قطعه کد زیر توجه نمایید:

 

<div style="color:green; font-weight:bold; border: 2px dashed #e5e5e5;"></div>

نکته مهم در خصوص کد بالا و البته در تمامی کدهای CSS، قرار داده Semi Column یا علامت ; است که این کاراکتر درحقیقت قطعات کد سی‌اس‌اس را از یک‌دیگر جدا می‌کند.

منظور از Pseudo Class چیست؟

معنی لغوی Pseudo Class شبه کلاس می‌باشد و همین اندازه که شکلِ نوشتاری آن دشوار است، کارهای معجزه‌آسایی برای ما انجام می‌دهد. در واقع با استفاده از Pseudo Classها قادر هستیم، تاحدی المان‌های HTML را تعاملی کنیم. مثلاً صرفاً با درج یک کلمه (Hover)، می‌توانیم تعریف کنیم، هنگامی‌که کاربر نشانگر موس خود را به سمت یک لینک حرکت داد، رنگ لینک از آبی به سبز تغییر پیدا کند. یا می‌توانیم بین لینک‌های بازدیدشده و لینک‌های جدید، تفاوتی ایجاد شود.

انواع Pseudo Classها

لازم به ذکر است که تعداد کلاس‌های Pseudo بسیار زیاد است اما ما در این مطلب قصد داریم 4 مورد از مهم‌ترینِ آن‌ها را مورد بحث و بررسی قرار دهیم:

💠Hover: با استفاده از این شبه کلاس، می‌توانیم تعریف کنیم، زمانی‌کابر نشانگر موس را روی المان مورد نظر قرار داد، چه اتفاقی رخ دهد.

💠Link: این Pseudo Class استایل پیش‌فرض لینک‌ها را مشخص می‌کند.

💠Visited: با استفاده از این عبارت، قادر هستیم، مشخص کنیم که کاربر پس از بازدید یک لینک، چه استایلی روی تگ مورد نظر اعمال شود.

💠Active: این کلاس Pseudo از زمانی‌که کاربر روی یک لینک کلیک می‌کند تا قبل از اینکه کلیک را رها کند را مدیریت می‌کند.

برای روشن‌تر شدن ماجرا، توصیه می‌شود حتماً ویدئو آموزشی این بخش را با دقت مشاهده نمایید.

نحوه پیاده‌سازی کلاس‌های Pseudo

اما از مباحث تئوری که بگذریم، نیاز است تا به صورت عملی Syntax کلاس‌های Pseudo را بررسی نماییم.

برای استفاده از این شبه کلاس‌ها فقط کافیست به شکل زیر عمل کنیم:

 

.div1{

Font-size:14px;

Color:black;

Background-color:white;

}

.div1:hover{

Font-size:17px;

Color: blue;

Background-color: pink;

}

برای استفاده از کلاس‌های Pseudo صرفاً کافیست جلوی تگ یا اصطلاحاً Selector یک علامت : قرار دهیم و Pseudo Class مورد نظر را درج نماییم و سپس استایل‌های دلخواه خود را اعمال نماییم.

Transform در CSS به چه معناست؟

معنی لغوی Transform تغییر شکل دادن می‌باشد. به این معنی که ما با استفاده از این خاصیت، قادر خواهیم بود، المان‌ها را به شکل‌های مختلفی تبدیل نماییم و جلوتر خواهیم دید که با ترکیب کلاس‌های Pseudo و خاصیت Transform می‌توانیم استایل‌های خارق‌العاده‌ای در سایت خود پیاده‌سازی نماییم.

نحوه استفاده از دستور Transform در CSS3

Transform انواع مختلفی دارد که تنها با سه نوع از مهم‌ترین آن‌ها می‌توانیم المان‌های HTML را دگرگون سازیم.

💠Rotate: با استفاده از این ویژگی قادر هستیم، هر المانی را به چرخش درآوریم.

💠Skew: با بهره‌گیری از این خاصیت می‌توانیم، المان‌های HTML را کج و مُوَج کنیم.

💠Scale: این کلیدواژه اندازه‌ی المان‌های HTML را کوچک یا بزرگ خواهد کرد.

قاعده نحوی استفاده از دستور Transform و مقادیر آن به شکل زیر می‌باشد:

 

.div1{

Width:100px;

Border:1px solid red;

Transform: rotate (50deg);

}

مقدار توابع Rotate و Skew از نوع درجه (deg) است. مقدار Scale نیز از نوع عدد است. به عنوان مثال اگر به تابع Scale عدد 2 انتساب داده شود، اندازه المان مورد نظر 2 برابر خواهد شد.

توصیه می‌شود هر سه تابع را به‌صورت عملی پیاده‌سازی کنید تا این مبحث نیز به‌طور کامل در ذهن شما تثبیت گردد.

ترکیب Pseudo Classها با Transform

شاید با خود بگویید دستور Transform آن‌قدرها هم جذاب نیست. اما زمانی که این دستور با Pseudo Classها ترکیب می‌شوند، طرح‌های بی‌نظیری را تولید خواهند کرد.

به قطعه کد زیر خوب دقت نمایید:

 
.div1{

Width: 50px;

Height: 50px;

Border:2px solid red;

}

.div1:hover{

Transform: rotate (360deg);

}

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

نقش Transition در CSS چیست؟

اکنون وقت آن رسیده تا شما را با Transition آشنا سازیم. با بهره‌گیری از Transition می‌توانیم عملیات انجام‌شده توسط Transform را زمان‌بندی کنیم و این امر اختیار عمل بیشتری را به ما هدیه خواهد داد.

مهم‌ترین انواع Transition در CSS3

Transition نیز انواع مختلفی دارد که در این بخش به معرفی مهم‌ترین آن‌ها خواهیم پرداخت.

💠Transition-Property: برای اتصال Transform به Transition مورد استفاده قرار می‌گیرد. در واقع برای اینکه کدها به درستی اجرا شوند، نیاز است تا مشخص شود Transition ما از نوع Transform است.

💠Transition-Duration: مقدار زمانی که می‌خواهیم یک Transform طول بکشد.

💠Transition-Delay: این خاصیت تأخیر در اجرای عملیات را تعیین می‌کند. به عبارتی ساده‌تر؛ اگر مقدار این Property برابر با 2 ثانیه باشد، پس از گذشت 2 ثانیه، عملیات مورد نظر شروع به اجرا خواهد کرد.

نحوه پیاده‌سازی Transition در CSS3

در این قسمت قصد داریم به طور عملی با ترکیب کدهای Transition، Pseudo Class و Transform یک اتفاق جذاب را رقم بزنیم.

لطفاً به قطعه کد زیر دقت نمایید:

 
.div2 {

Border:2px solid red;

Background-color: aliceblue;

Width: 100px;

Height: 50px;

Transition-property: transform;

Transition-duration: 2s;

}

.div2:hover {

Transform: scale (2);

}

زمانی که قطعه کد بالا را در ویرایشگر خود اجرا نمایید، یک مستطیل نمایش داده خواهد شد که پس از اینکه کاربر نشانگر موس خود را روی این مستطیل قرار دهد، اندازه‌ی این مستطیل به آرامی دوبرابر خواهد شد و درواقع این کار 2 ثانیه به طول خواهد انجامید.

مجدداً ذکر این نکته ضروری است که اگر این مباحث کمی پیچیده به نظر می‌رسد، حتماً چند بار ویدیو آموزشی که در ابتدا برای شما قرار داده شد را مشاهده بفرمایید.