آموزش المان های after و before در Css

دستورات after و before از جمله بخش هایی هستند که در طراحی سایت با Css بسیار کم به آنها توجه می شود اما اگر آموزش های پیشرفته سی اس اس را مشاهد کرده باشید ، متوجه خواهید شد که از دستورات after و before تا چه اندازه استفاده می شود ! خب دلیل استفاده از after و before در طراحی سایت و صفحات وب چیست ؟

اول از هرچیزی لازم است بدانید که بدون تسلط به دستورات after و before نیز میتوانید قالب های سایت را طراحی کنید ، اما اگر قالب های شکیل تر و پیشرفته تر را مدنظر دارید ، باید کمی روی بخش های ریز قالب خودتان کار کنید تا همین بخش های ریز ، تحولات بزرگی در طراحی شما بوجود آورند . after و before دو دستور بسیار مهم در قسمت های پیشرفته زبان طراحی Css هستند که اگر به درستی تدریس شوند ، میتوانید به سادگی به آن مسلط شده و تغییرات جذابی داخل سایت خود ایجاد کنید . نمونه هایی از افتر و بیفور در قالب سایت سئو مایند نیز وجود دارد و میتوانید در قسمت هایی از سایت افکت هایی از افتر بیفور را مشاهده کنید .

برا مثال اگر قصد دارید تا دکمه هایی همانند نمونه زیر طراحی کنید ، تنها راه این کار استفاده از after و before است ! در تگ های منفرد برای مثال تگ هایی همچون img به دلیل منفرد بودن ، نمیتوان المان های دیگری داخل آنها قرار داده و توسط دستورات Position ، تغییراتی را درظاهر اعمال کرد . زمانی که قصد داریم تا برای یک المان ، برخی ویژگی های اضافی را بدون قراردادن کدهای html در داخل یا اطراف آن ایجاد کنیم ، باید از افتر و بیفور استفاده کنیم .

تفاوت افتر و بیفور با دستورات html در اینجاست که ، برای کدنویسی توسط after و before باید داخل فایل Css کدنویسی کنیم و اصلا کاری با ساختار اصلی html تگ ها نداریم . یعنی برای مثال اگر قصد داشته باشید تا برای یک تگ a توسط after و before یک دیزاین مثل بالا ایجاد کنید ، می بایست در دستورات Css به شکل زیر عمل کنید :

a.site-btn::before{
		content:"";
		position:absolute;
		width:100%;
		height:100%;
		background:#faf4f4;
		top:0;
		right:0;
}

دستور after نیز به همین شکل است و میتوانید با after و before همانند یک تگ Div برخورد کنید و با دستوراتی همچون پوزیشن ها و border ها ، با این دو دستور ، عجایبی را در صفحه وب خودتان خلق کنید ! در این دوره بسیار کوتاه و رایگان ، به شما از قدم صفر آموزش خواهیم داد که چگونه میتوانید دستورات after و before را به سادگی داخل صفحه خودتان به کار ببرید .

البته استفاده بیشتر از افتر و بیفور نیازمند خلاقیت است و اگر به دنبال نمونه های آموزشی بیشتر و پیشرفته تری هستید میتوانید از کانال آپارات و یوتیوب سئو مایند استفاده کنید و در لیست پخش ترفند های Css ، نمونه تمرینات بسیار خوب و کامل تری را مشاهده کنید .

چرا باید از after و before استفاده کنیم ؟

شاید برای شما سئوال باشد که چرا باید after و before را یادگرفت ؟ اول از هرچیزی باید دید تفاوت بین قالب های طراحی شده توسط یک شخص مبتدی با یک شخص ماهر در چیست ؟ دستورات افتر و بیفور در Css از جمله بخش هایی هستند که در دسته بندی Css کاران حرفه‌ای قرار دارند . یعنی شما بدون یادگیری المان هایی همچون افتر و بیفور ، قادر به ساخت افکت های خاص ، شیپ های ( اشکال ) گرافیکی و یا کاهش حجم صفحه نیستید . بله کاهش حجم صفحه !

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

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

همیشه تفاوت های کوچک هستند که فاصله های بزرگ ایجاد می کنند شاید تفاوت شما با یک فرد ماهر در Css تنها چندقدم کوچک باشد و یکی از این قدم ها نیز یادگیری after و before در دستورات Css باشد . بنابراین با صرف کمتر از دو ساعت زمان میتوانید یک بخش فوق العاده جذاب و کاربردی در سی اس اس را یادگرفته و در داخل قالب های خود از این به بعد انعطاف و زیبایی بیشتری داشته باشید . این یک مینی دوره از دوره کامل آموزش Css است و برای استفاده از مطالب بیشتر و یادگیری سیر تا پیاز هرچیزی که در طراحی صفحات وب با Css نیاز دارید میتوانید در دوره جامع که ابتدای صفحه معرفی شده است شرکت کنید .