حرفه ای ترین آموزش after و before در css

با سلام خدمت دوستان عزیز وب سایت سئو 90 به حرفه ای ترین آموزش after و before در css خوش اومدین . دوستان after و before یکی از مهمترین بخش ها در آموزش css هستند که معمولا به شکل خیلی مبتدی آموزش داده می شه و درک صحیحی از این بخش ها دریافت نمی شه . اما امروز ما اینجاییم تا به شما نشون بدیم که چطور می شه مبحث after و before که یکی مبحث خیلی ساده  و مبتدی بنظر میاد و ساده هست رو به شکل فوق حرفه ای در سایت استفاده کرد و میشه با اون چه کارهای عجیبی انجام داد .

این پکیج آموزشی یکی از پکیج های مکمب دوره آموزش css ( نابغه Css ) هست که به شکل رایگان در قالب یک دوره مجزا برای شما عزیزان تهیه و تدوین شده . این دوره به همراه یک مینی پروژه عملی برای شما تدریس شده و مثال های بسیار کاربردی در داخلش خدمتتان ارائه شده تا به موضوع افتر و بیفور در Css با دید بازتر و خلاقانه تری نگاه کنید .

همونطور که ممکنه بدونید after و before در فایل های CSS برای یک المان به شکل زیر تعریف می شن :

element::before{
       content:" ";
}
element::after{
       content:" ";
}

شاید کارهایی که ما در این بخش با after و before خواهیم کرد براتون باور کردنی نباشه به ابن دلیل که شما ممکنه after و before رو خیلی ساده و مبتدی یاد گرفتین و آموزش دیدین که after و before یک نوشته ای رو قبل یا بعد از المان های صفحه مثل تگ ها p , div و … ایجاد می کنن .

اما همه after و before همین نیست . ما در سئو 90 تعبیری داریم که که میگه :

اگر شما در نقطه 60 css هستید میتونید با یادگیری after و before به نقطه 90 برسید !

اگر در داخل نت هم در رابطه با after و before جستجو کنید خواهید دید که مطالب حتی در وب سایت های رسمی همچون سایت W3Schools خیلی ساده هستند و به شکل اصول مبتدی آموزش داده می شن .

حرفه ای ترین آموزش after و before در css چگونه است ؟

بهتره قبل از هر چیز بیاییم و نگاهی به سرفصل هایی که در دوره حرفه ای ترین آموزش after و before در css آموزش داده شده بندازیم : (البته دوره همین نیست و کم کم بخش های جدیدتری هم اضافه خواهد شد !)

جلسات آموزشی دوره After , Before
1

مفاهیم کلی ، اولین مثال برای منو ها

00:20:13
2

بررسی فونت آیکون ها ، اشکال هندسی

00:22:20
3

ساخت اعلانات پیشرفته توسط After , Before

00:21:25
4

استایل دکمه ها ، متن های پیشرفته در طراحی

00:25:36
5

تصاویر جذاب و افکت های انیمیشنی در طراحی

00:24:58
6

کار روی المان های فرم در طراحی

00:12:04

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

مزیت های آموزش after و before

یکی از مزایای استفاده از after و before این هستش که حجم صفحه ما خیلی پایین می یاد ! از چه نظر ؟ از نظر استفاده کمتر از تصاویر . برای مثال ممکنه شما در css خیلی ماهر باشید و بتونید همه المان هارو در محل خودش تنظیم کنید .

اما فعلا after و before رو بلد نیستید . برای همین مجبور می شید تا برای تعریف برخی اشکال بیایید و از تصاویر کوچیک استفاده کنید . این تصاویر به هرتعداد که در صفحه وب تکرار بشن به همون تعداد درخواست به سمت سرور داریم و سرعت سایت کند و همچنین حجم صفحه وب ما بالاتر خواهد رفت .

به همین دلیل می تونیم بیاییم و همون اشکال رو با after و before برای خودمون طراحی کنیم و به راحتی با css اونهارو بسازیم . مزیت بعدی استفاده از after و before این هست که شما می تونید خیلی راحت همه المان هارو تحت کنترل بگیرید . به چه شکل ؟

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

اما ما چطور می تونیم بیاییم و یک افکت پرشدن یا خالی شدن رو بر روی تگ a اعمال کنیم . برای مثال وقتی روی دکمه میریم داخل دکمه با یک رنگی پر بشه و وقتی خارج میشیم خالی بشه . خب حال شما این استایل رو می خواهید با چی بسازید ؟ آیا میشه داخل تگ a از تگ div استفاده کرد و اون رو position بندی کرد ؟ خیر !! پس اینجا باید از after و before استفاده کنیم اما نه به اون شکلی که توی css یاد دادن . به شکلی که ما قراره بهتون آموزش بدیم .

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

رایگان – خرید