دوره آنلاین و رایگان اموزش Css3 (پیشرفته)

دوره آنلاین و رایگان اموزش Css3 (پیشرفته) پیش رو یکمی از کامل ترین دوره های آموزش  Css3Css3 است.هدف ما از آماده سازی این دوره ورود کاربران سایت به صورت مستقیم به بازار کار است.آموزش درست سی اس اس و یادگیری حرفه ای آن، می تواند فرق اصلی بین طراح سایت مبتدی و حرفه ای قالب های سایت باشد.
دوره اموزش Css3 ما بصورت کاملا حرفه ای به مقوله پرداخته اند. آموزش Css3 (سی اس اس نسخه 3)بسیار ساده می باشد و دستورات آن محدود می باشند ولی نوع استفاده از آن و هماهنگی آن با اچ تی ام ال و نیز رعایت نکات آن است که Css را پیچیده کرده است.(در این دوره از محیط توسعه نت بینز برای آموزش استفاده شده است.)

اموزش Css3

CSS مخفف Cascading Style Sheets به معنی الگو های آبشاری می باشد. پس از یادگیری این زبان میتوانید مفهوم این عبارت را متوجه شوید.با استفاده از CSS میتوان تگ های html را به راحتی به استایل های مختلف در آورد. رنگ بندی و تعیین پس زمینه ، تعیین مکان و عرض و طول ، فرمت دهی font و … همگی کارهایی است که با آموزش Css می توان به راحتی آنها را برای صفحات وب سایت هایمان انجام دهیم.

CSS3 نسخه جدید CSS از لحاظ ویژگی های فنی می باشد. همچنین از نظر تعمیرات بهتر، سرعت بارگزاری و ویژگی های طراحی صفحه، بسیار متنوع تر از CSS می باشد. طراحان برای پیاده سازی المان های CSS3 کار بسیار راحت تری نسبت به CSS در پیش دارند.

برخی از مزایای CSS بصورت خلاصه:

1.سرفه جویی در وقت افزایش روند توسعه.
2.تغییر مجدد استایل تگ های Html به سادگی.
3.طراحی صفحه بدون نیاز به تگ های قالب بندی HTML .
4.طراحی صفحات دینامیک به کمک javascript
5.افزودن انیمیشن به صفحات وب.
6.ایجاد صفحات واکنش گرا (ریسپانسیو)
7.کنترل ظاهر بخش های مختلف سایت در هنگام کلیک.
8.تنظیم قلم و فونت مدنظر برای محتوای وب سایت.
9.و کلی امکانات دیگر که در طول دوره آموزش آنلاین و رایگان Css &Css3  با آن آشنا خواهیم شد.

مزیت های CSS3 در طراحی سایت:

طرح چندستونه

یکی از مزیت های CSS3 این است که می توان بدون استفاده از چندین div طرح های چندستونه شکل داد. مرورگر پس از به خواندن و قبول این ویژگی CSS3، آن را در وبسایت نمایش می دهد. هم اکنون تنها مرورگرهای Safari و Firefox قادر به اجرای این ویژگی هستند.

سایه متن

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

شعاع حاشیه (Border Radius)

ویژگی border- radius به شما این امکان را می دهد که گوشه تمام تصاویر پشت زمینه ما گرد باشد. این ویژگی یکی از پرکاربردترین ویژگی های مورد استفاده توسط طراحان است. با این ویژگی CSS3 طراحی صفحه تمیزتر از آب در می آید. البته شاید این ویژگی از منظر بعضی دوستان آن قدرها هم ضروری نباشد، اما با این وجود با به کار بردن این خصیصه CSS3، حکم سنگ گرانبهایی را دارد که هر کسی از وجود آن با خبر نیست.

سایه (Box Shadow)

این ویژگی بدون هیچ کد اضافه یا تصویر پیش زمینه، به طرح شما سایه اضافه می کند. ضمنا ویژگی box shadow، بدون تاثیر بر روی قابلیت خوانده شدن محتوا، جزییات طرح را افزایش می دهد.

سایز بندی (Box Sizing)

این ویژگی به طور اخص برای تنطیم لایه (Padding) و حاشیه (Boarder) تا مقداری تعیین شده، مناسب است. با استفاده از این ویژگی، طراح نوح محاسبه مرورگر برای طول و عرض یک المان را متوجه می شود.

کوئری های مدیا

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

سایز فایل و زمان لود

یکی از نقاط قوت CSS3 نسبت به CSS وجود زبانی است که از سرعت بالاتر لود پشتیبانی می کند. زبان CSS3 بر این مبنا پایه گذاری شده که فایل ها بهتر به کار برده شوند. همچنین این زبان با سرعت بالای لود خود، برای سایت هایی مناسب است که ترافیک بالایی دارند.

مزایای دوره آنلاین و رایگان اموزش Css3 (پیشرفته) کدفرند:

1. 5 ساعت اموزش Css3 کاملا رایگان
2.آموزش قدم به قدم همراه با توضیحات و مثال
3.آموزش بصورت اصولی و کاربردی و در سریع ترین زمان
4.کار با بخش های مختلف  سی اس اس
5.آشنایی و کار با Css3
6.کار کردن در قالب پروژه های کوچک برای یادگیری بهتر
7.کار با بخش های جدید معرفی شده در Css3
8.دانلود آموزش به صورت کامل در قالب پکیج
9.بروز رسانی دائمی.

شروع دوره آنلاین و رایگان اموزش Css3 (پیشرفته):

از ویژگی display برای تعیین نوع چارچوب یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع چارچوب هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند.
در این ویدئو با ویژگی Box model در css کار خواهیم کرد.
با استفاده از ویژگی width اندازه عرض ناحیه محتوای عنصر تعیین می شود. با استفاده از ویژگی height اندازه ارتفاع ناحیه محتوای عنصر تعیین می شود.
ویژگی padding از ویژگی های مختصر نویسی می باشد که می توان بوسیله آن چهار ویژگی padding-top، padding-right، padding-bottom و padding-left را در یک اعلان تعیین کرد.
ویژگی margin از ویژگی های مختصر نویسی می باشد که می توان بوسیله آن چهار ویژگی margin-top، margin-right، margin-bottom و margin-left را در یک اعلان تعیین کرد.
از ویژگی box-sizing برای تغییر روش اندازه دهی به یک عنصر بر اساس مدل قسمت بندی آن استفاده می شود.
با استفاده از ویژگی min-width می توان یک عرض حداقل برای عناصر مشخص کرد.با استفاده از ویژگی max-width می توان یک عرض حداکثر برای عناصر مشخص کرد.
ویژگی float از آن دسته از ویژگی هایی است که مکان عنصر را مشخص می کند. این ویژگی باعث می شود تا عنصر به سمت چپ یا راست عنصر نگهدارنده اش هول داده شده یا شناور شود.
ویژگی float از آن دسته از ویژگی هایی است که مکان عنصر را مشخص می کند. این ویژگی باعث می شود تا عنصر به سمت چپ یا راست عنصر نگهدارنده اش هول داده شده یا شناور شود. بخش دوم کار کردن با ویژگی float در سی اس اس
ویژگی float از آن دسته از ویژگی هایی است که مکان عنصر را مشخص می کند. این ویژگی باعث می شود تا عنصر به سمت چپ یا راست عنصر نگهدارنده اش هول داده شده یا شناور شود. بخش سوم کار کردن با ویژگی float در سی اس اس.
ویژگی clear بطور مستقیم با ویژگی float در ارتباط است. کار این ویژگی این است که اطراف عنصر شناور را پاکسازی کند تا عناصر دیگر به پایین عنصر شناور سقوط کنند.برای درک بهتر مفهوم Clear بهتر است از قسمت ششم این دوره یعنی Box-sizing استفاده کنید.
ویژگی vertical-align به ما کمک می کند تا عناصر خطی چیده شده در کنار هم را نسبت به راستای عمود تراز بندی کنیم.
با استفاده از ویژگی position می توان مکان یک عنصر را در صفحه مشخص کرد.در این بخش با postition-relative در سی اس اس آشنا می شویم.
با استفاده از ویژگی position می توان مکان یک عنصر را در صفحه مشخص کرد.در این بخش با postition-absolute-fixedدر سی اس اس آشنا می شویم.
از ویژگی z-index برای تعیین ترتیب عناصر زمانی که روی هم قرار می گیرند, استفاده می شود. یعنی مشخص می کند که عنصر, رو یا زیر عنصر یا عناصر دیگر قرار بگیرد.
با استفاده از ویژگی background-image می توان یک تصویر یا چند تصویر روی هم به عنوان پس زمینه عنصر قرار داد.
اگر عنصر، تصویری در پس زمینه داشته باشد می توان توسط ویژگی background-repeat تعیین کرد که تصویر تکرار شود یا نه و یا اینکه چگونه تکرار شود.
اگر برای یک عنصر پس زمینه ای تعریف شود ویژگی background-position مکان آن پس زمینه را برای آن عنصر (بعد از هرگونه تغییر اندازه پس زمینه) با توجه به ناحیه مشخص شده برای ترسیم پس زمینه تعیین می کند.
ویژگی background-attachment رفتار تصویر پس زمینه را نسبت به اسکرول صفحه و عنصر کنترل می کند.
توسط ویژگی border می توان عرض، نوع و رنگ حاشیه هر چهار سمت یک عنصر را تعریف کرد.
از این ویژگی border-radius برای گرد کردن گوشه های یک عنصر استفاده می شود..
از ویژگی text-shadow برای اضافه کردن سایه به متن استفاده می شود.می توان به متن یک عنصر چندین سایه اضافه کرد, که در این صورت اولین سایه در بالا و بقیه به ترتیب زیر آن قرار می گیرند. اگر متنی همراه با خط هم باشد (مثلا زیر خط دار باشد) سایه به آن خط هم اعمال می شود.
از ویژگی box-shadow برای اضافه کردن سایه به یک عنصر یا باکس استفاده می شود. تمام عناصر در یک صفحه می توانند سایه بگیرند.
یک نوع تصویر می باشد که از دو یا چند رنگ که به آرامی در هم محو می شوند تشکیل می شود. به عنوان مثال از آن برای سایه روشن کردن دکمه ها و یا عناصر دیگر استفاده می شود.
از تابع ()linear-gradient برای ساخت گرادینت () از نوع خطی استفاده می شود به این معنا که دو و یا چند رنگ به صورت خطی در یک راستای موافق در هم محو می شوند.
از تابع ()linear-gradient برای ساخت گرادینت () از نوع خطی استفاده می شود به این معنا که دو و یا چند رنگ به صورت خطی در یک راستای موافق در هم محو می شوند.
از نوع داده ای برای تعیین فرمول ترکیب کردن رنگ های یک عنصر با محتوای پشت سرش استفاده می شود.
با استفاده از ویژگی transform می توانید شکل, مکان و یا وضعیت یک عنصر را تغییر دهید. این تغییر می تواند دو بعدی و یا سه بعدی باشد. با استفاده از تابع translate که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای دو بعدی جابجا کرد.
با استفاده از تابع translateX که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای دو بعدی در جهت محور X جابجا کرد. با استفاده از تابع translateX که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای دو بعدی در راستای محور Y جابجا کرد.
با استفاده از تابع scale که برای ویژگی transform تعیین می شود می توان یک عنصر را در ظاهر بزرگ یا کوچک کرد.
با استفاده از تابع rotate که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای دو بعدی بچرخانید.
با استفاده از تابع skew که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای دو بعدی به صورت کج یا مورب تغییر شکل دهید.
از ویژگی transform-origin برای تعیین مبدا مختصاتی تغییر شکل, مکان و یا وضعیت عناصر استفاده می شود.
با استفاده از تابع rotate3d که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای سه بعدی بچرخانید.
با استفاده از تابع scale3d که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای سه بعدی بزرگتر یا کوچکتر نمایش دهید.
از ویژگی transition-property برای تعیین ویژگی هایی که قرار است transition بر روی آنها اعمال شود استفاده می شود. ویژگی transition-duration تعیین می کند که transition چه مدت زمانی به طول می انجامد. یعنی چه مدت طول می کشد تا مقدار ویژگی که transition بر روی آن اعمال می شود از مقدار قبلی به مقدار جدید برسد.
ویژگی transition-delay مدت زمان مکث یا درنگ قبل از اعمال transition بر روی یک عنصر را تعیین می کند.
از ویژگی transition-timing-function برای تعیین سرعت تغییر ویژگی یک عنصر دارای transition در گذر زمان, استفاده می شود.
transition یک ویژگی از نوع ویژگی های مختصر نویسی می باشد که با استفاده از آن می توان ویژگی های بالا را به صورت یکجا و مختصر در CSS تعریف کرد.
از دستور keyframes@ برای تعریف رفتار یک چرخه انیمیشن در CSS استفاده می شود.
از دستور keyframes@ برای تعریف رفتار یک چرخه انیمیشن در CSS استفاده می شود.
ویژگی animation-iteration-count تعیین می کند که یک انیمیشن چند بار برای عنصر انتخاب شده اجرا شود. ویژگی animation-delay اجرای یک انیمیشن را به تاخیر می اندازد. در واقع وقتی که انیمیشن به یک عنصر اعمال می شود بعد از مقدار تنظیم شده به این ویژگی اجرا می شود.
در این ویدئو با نحوه افزودن کتابخانه خارجی css به پروژه و چگونگی استفاده از کتابخانه آشنا می شویم.
در این ویدئو با نحوه بیهنه سازی فایل و کدهای سی اس اس آشنا می شویم.
بیشتر مواقع نیاز داریم تا هنگام طراحی یک صفحه وب بر روی عناصر از فیلتر های مختلفی که در برنامه های ویرایش تصویر مانند فتوشاپ هستند استفاده کنیم.در سی اس اس بخصوص Css3 فیلترهای بسیار کاربردی در اختیار توسعه دهندگان قرار گرفت تا به راحتی بتوانید بر روی عناصر و تصاویر خود از این فیلتر ها در دنیای وب استفاده کنند.
ویژگی object-fit در Css3 به توسعه دهنده فرانت اند این اجاره رو میده تا بتونیم تصاویر سایت رو براساس عرض و ارتفاع باکس نگه دارنده یا کانتنت باکس فیت یا سازگار کنیم.

دانلود پکیج آموزش Css &Css3 (پیشرفته)

کدفرند

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

همه مطالب این نویسنده

تعداد نظرات 6