بخش Vip سئو مایند

بهترین فرصت برای یادگیری در قسمت Vip سئو مایند هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
ورود به بازار کار با سئو مایند
سئو مایند » دانلود ها » آموزش فرانت » آموزش المان های after و before در Css

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

7 دانشجو 5

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

رایگان
پس از خرید دوره های نقدی مستقیما با مدرس دوره در ارتباط خواهید بود برای دوره های رایگان نیز از بخش کامنت ها پشتیبانی ارائه می شود

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

پیشنهادی : دوره متخصص Css ، آموزش سیر تا پیاز زبان طراحی Css

اول از هرچیزی لازم است بدانید که بدون تسلط به دستورات 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 نیاز دارید میتوانید در دوره جامع که ابتدای صفحه معرفی شده است شرکت کنید .

فصل 1
آموزش کامل after و before
شامل 3 جلسه
1
بخش اول آموزش جامع after و before
00:27:45
2
بخش دوم آموزش جامع after و before
00:27:08
3
بخش سوم آموزش جامع after و before در Css
00:28:37
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
دیدگاه های شما
saman.raha ۰۹ / ۱۴۰۲

سلام آموزش فوق العاده عالی و مفهومی که مثل این آموزشو هیچ جایی ندیدم دمتون گرم استاد ساییتون حرف نداره

ادمین ۰۹ / ۱۴۰۲

ماهم از شما متشکریم که همراه ما هستید امیدواریم همه آموزش های سایت براتون مفید باشن

نازنین ۰۱ / ۱۴۰۲
5

سلام قابل خرید نیست این آموزش؟مرسی از آموزش رایگان اچ تی امل شما

ادمین ۰۱ / ۱۴۰۲

سلام ، چرا ! در سمت چپ صفحه افزودن به سبد خرید وجود داره .

خرید آنلاین