آموزش کامل CSS3

در این بخش از آموزش طراحی سایت به سراغ آموزش کامل CSS3 می رویم.

پس از یادگیری آموزش CSS ، به سراغ آموزش CSS3 می رویم.

بعضی افراد به اشتباه فکر می کنند که باید بجای CSS از CSS3 استفاده کنند چون جدیدتر است اما چنین نیست. دستورات CSS3 با دستورات CSS کاملا متفاوت است و شما باید هر دو را بیاموزید.

دستور border-radius :

دستور border-radius یکی از دستورات CSS3 میباشد. در این بخش از آموزش کامل CSS3 با این دستور آشنا می شویم.

دستور border-radius برای گرد کردن گوشه های یک باکس یا عکس و غیره استفاده می شود.

با استفاده از عدد می توانیم گردی باکس را مشخص کنیم مثلا گوشه ها به اندازه 10 پیکسل گرد شود.

همچنین می توانیم هر گوشه را یک اندازه مشخص داد. مثلا اندازه یک گوشه 5 و بقیه 10 پیکسل باشد.

برای واحد اندازه گیری نیز از پیسکل استفاده می کنیم.

دستور border-image :

دستور border-image یکی دیگر از دستورات CSS3 میباشد که در این بخش از آموزش کامل CSS3 آن را توضیح خواهیم داد.

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

با استفاده از دستور border-image می توانیم بجای خط دور عنصر از تصویر استفاده کنیم.

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

دستور background :

با استفاده از دستور background می توانیم در پس زمینه متن یک عکس قرار دهیم.

در این بخش از آموزش کامل CSS3 این دستور را آموزش خواهیم داد.

با استفاده از background-image آدرس عکس یا تصویر را مشخص می کنیم.

با استفاده از background-position موقعیت عکس یا تصویر را مشخص می کنیم.

با استفاده از  background-repeatوضعیت تکرار عکس یا تصویر را مشخص می کنیم.

می توانیم از این دستورات بصورت جداگانه استفاده کنیم یا اینکه از ترکیب این دستورات استفاده کنیم.

آموزش دستور COLOR و Gradients در CSS3 :

در این بخش از آموزش کامل CSS3 به دستور COLOR و Gradients در CSS3 می پردازیم.

در طراحی قالب سایت ، یکی از گزینه های مهم رنگ ها هستند. رنگ ها نقش مهمی در طراحی سایت دارند.

ما می توانیم از رنگ های ساده یا گرادینت استفاده کنیم.

دستور Shadow در CSS3 :

دستور Shadow در CSS3 برای سایه زدن استفاده می شود. در این بخش از آموزش کامل CSS3 در مورد سایه زدن صحبت خواهیم کرد.

ما می توانیم برای متن یا باکس سایه بزنیم.

اگر به درستی از سایه ها استفاده کنیم کار را بسیار زیبا می کنند.

دستور Text Effects در CSS3 :

در این قسمت از آموزش کامل CSS3 به دستور Text Effects در CSS3 می پردازیم.

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

دستورات Text Overflow, Word Wrap, and Line Breaking Rules برای کار با متن در CSS3 مناسب است.

دستورات 2D Transforms و 3D Transforms در CSS3 :

در این قسمت از آموزش کامل CSS3 به سراغ دستورات 2D Transforms و 3D Transforms در CSS3 میرویم.

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

اگر به دستورات CSS3 مسلط شویم می توانیم قالب سایت را زیبا طراحی کنیم.

با استفاده از این دستورات می توانیم عنصری را بچرخانیم یا کوچک و بزرگ کنیم.

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

 دستور Media Queries در CSS3 :

در این قسمت از آموزش کامل CSS3 به دستور Media Queries در CSS3 می پردازیم.

از دستور Media Queries در CSS3 برای ریسپانسیو یا واکنشگرا کردن قلب سایت استفاده می کنیم.

مثلا ما دوست داریم در زمانی که فردی یا کاربری با موبایل سایت را بازدید می کند عناصر به شکل خاصی نمایش داده شود یا فاصله عناصر کمتر شود در این موارد از دستور Media Queries استفاده می کنیم.

این دستور بسیار مهم است مخصوصا امروز که سایت ها همه ریسپانسیو هستند.

اضافه کردن فونت فارسی با CSS3 :

در این قسمت از آموزش CSS3 به بحث اضافه کردن فونت فارسی با CSS3 می پردازیم.

برای افزودن فونت فارسی به قالب وردپرس یا قالب HTML می توانیم از CSS3 استفاده کنیم.

هر برنامه نویس دوست دارد سایت خود را به نحوی طراحی کند و از فونت خاصی استفاده کند.

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


نویسنده : هدایت عباسی

عضویت طلایی
ثبت نظر