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

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

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

شاید کارهایی که ما در این بخش با 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 می تونن همه اینکار ها رو بکنن ؟ بله بشرطی که شما یادبگیرید چطوری با 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 دریباریم پس حتما دوره رو با دقت مطالعه کنید و ازش لذت ببرید .

جلسات آموزشی در این دوره
بررسی ساختار کلی after و before در css4 دقیقه
ایجاد مثال کلی از after و before در css7 دقیقه
ایجاد آیتم های جذاب برای منو ها با after و before7 دقیقه
ساخت اشکال هندسی به کمک after و before9 دقیقه
ایجاد افکت بر روی تصاویر4 دقیقه
استفاده از تصاویر و فونت آیکون ها در after و before10 دقیقه
ساخت افکت های کاغذی4 دقیقه
ساخت باکس های 3 بعدی ( بسیار کاربردی )9 دقیقه
ساخت افکت های پیشرفته برای دکمه ها در سایت ( بسیار کاربردی )10 دقیقه
ساخت ProgressBar های جذاب7 دقیقه

لیست آموزش های این دوره