پیشرفته ترین آموزش after و before در CSS – رایگان

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

دوستان after و before یکی از مهمترین بخش ها در آموزش css هستند که معمولا به شکل خیلی مبتدی آموزش داده می شوند و اگر به منابع استاندارد آموزش css مراجعه کنید برای مثال منابعی همچون w3schools خواهید دید که درک صحیحی از این بخش ها دریافت نمی کنید اگر هم به سراغ منابع و ترفند های بسیار پیشرفته همچون Youtube بروید ، از نحوه کد نویسی در قسمت after و before درک درستی به هبچ عنوان نخواهید داشت  . امروز اینجا هستیم تا به شما نشان دهیم که چگونه می توان مبحث after و before که یک مبحث خیلی ساده و مبتدی بنظر آمده و ساده می باشد را به شکل پیشرفته در سایت استفاده نموده و با این المان ها چه کارهای عجیبی انجام داد .

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

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

اما چگونه می توان با یادگیری یک مبحث به ظاهر ساده 20% به میزان توانایی خود در طراحی قالب های مختلف اضافه کنیم ؟؟ تمامی این موارد سوالاتی هستند که از ابتدای مطلب در ذهن شما وجود دارند و تاکنون هم باور نمی کنید که با افتر و بیفور بتوانیم حتی 1% به مهارت خود اضافه کنیم . اما صبور باشید تا در انتهای دوره و پروژه نهایی ، دقیقا نحوه کار و تعامل با ویژگی این عناصر صفحات وب را بخوبی فرا بگیرید .

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

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

یکی از مزایای استفاده از after و before در صفحات وب کاهش حجم صفحه وب خواهد بود ! از چه نظر ؟ از نظر استفاده کمتر از تصاویر . برای مثال ممکن است شما در css خیلی ماهر باشید و بتوانید تمامی عناصر را از نظر محل قرار گیری در جای درست خود تنظیم کنید . اما فعلا از after و before سررشته کافی ندارید . به همین خاطر مجبور می شوید تا برای تعریف برخی اشکال ، از تصاویر کوچیک استفاده کنید که غالبا png هستند . این تصاویر به هر تعداد که در صفحه وب تکرار شوند به همان تعداد درخواست به سمت سرور خواهد داشت و سرعت سایت کند شده و همچنین حجم صفحه وب نیز بالاتر خواهد رفت .

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

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

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

تفاوت قالب های یک شخص ماهر با مبتدی در چیست ؟

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

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

برای مثال سایت هایی که مضمون غذا و فست فود دارند معمولا در طیف سه رنگ قرمز مشکی و قهوه ای هستند که رنگ قرمز در این بین بسیار مرسوم است و علت آن نیز تشویق به افزایش اشتها است . شما ممکن است قالب اغذیه طراحی نموده و از رنگ طیف آبی برای آن استفاده کنید که این بزرگترین اشتباه شما از نظر یک شخص ماهر است .

مورد مهم دوم استفاده از افکت های css3 می باشد . افکت هایی همچون shadow که اگر بخوبی استفاده شوند می توانند وجه بسیار زیبایی به سایت شما دهند . یا برای مثال استفاده از انیمیشن ها که حقیقتا تحولی در طراحی قالب های جذاب بودند . هر کدام از این المان ها اگر به درستی و در جای مناسب استفاده شوند ، قالب شما جذاب تر خواهد شد اما اگر به شکل نادرست استفاده شوند نه تنها روی قالب شما تاثیر مثبت ندارند بلکه طراحی شما را بدتر نیز خواهند کرد .

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