آموزش Css3 به صورت کاملا تصویری (بیش از 30 مطلب آموزش CSS3) و مرحله به مرحله در سطوح مقدماتی و پیشرفته جهت استفاده شما بازدید کننده محترم در این بخش قرار گرفته است

کدهای CSS نوشته شده را به صورت آنلاین با سایت CSS Lint چک کنید

1 کدهای CSS نوشته شده را به صورت آنلاین با سایت CSS Lint چک کنیدکدهای CSS نوشته شده را به صورت آنلاین با سایت CSS Lint چک کنید ! عنوان مقاله شاید کمی مبهم باشد ولی اجازه بدهید با کمی توضیحات مختصر این موضوع را روشن کنم . کدهای قالب که مربوط به ظاهر و پوسته یک تم می شود در فایل Css ذخیره می شود . وقتی شروع به نوشتن دستورات می کنید ممکن است از یک کلاس 2 بار استفاده کنید یا علامت سمی کالن را در پایان یک تگ قرار ندهید .چه اتفاقی می افتد ؟ باید کلی زمان بزارید و از دوباره تمام تگ ها را خط به خط بررسی کنید .

راه حل چیست ؟ CSS Lint یک ابزار آنلاین تعیین خطا و error است که گرامر و ترکیب CSS را از لحاظ عملکرد و کارایی، دسترس‌پذیری و سازگارپذیری CSS بررسی می‌کند. از نتایج حاصله متعجب خواهید شد، انتظار تعداد زیادی هشدار در CSS خود را داشته باشید. به هر حال، این خطاها در نهایت به شما کمک می‌کنند گرامر و ترکیب CSS خود را تصحیح کرده و آن را کارا تر کنید. علاوه بر این، به یک CSS نویس بهتر تبدیل می‌شوید. در ادامه لینک وب سایت همراه با آموزش استفاده از سایت CSS Lint را قرار میدهم . 

رنگ HSL در Css3

hsl-color-lightness


در درس قبلی کاربرد و نحوه استفاده رنگهای RGBA را آموزش داده ام . در این بخش میخواهم شما را با رنگهای HSL . HSLA در Css3 آشنا کنم  . 


تعیین رنگ HSL . HSLA این امکان را به طراح میدهد که با استفاده از سه واژه Hue, saturation, Lightness به رنگ مورد نظر برسد . شاید از خودتان این سوال را بپرسید که کاربرد این سه گزینه به چه شکلی می باشد ؟

HUE مشخص کننده رنگ مورد نظر می باشد که با استفاده از یک عدد که بین 0 تا 360 درجه قرار گرفته است رنگ تعیین می شود . 

رنگ RGBA در Css3

colorwhh

پیکی از ویژگیهای جدیدی که به Css3 اضافه شده است پالت رنگ RGBA می باشد . اگر با ورژن قبلی Css کار کرده باشید حتما میدانید که برای تعیین رنگ یک عنصر یا المنت از ترکیب رنگهای RGB یا درصد رنگ یا بهتر هست بگویم کدهای هگزا دسیمال که به این شکل FFFFFF# نوشته می شدند استفاده می کردیم .
RGBA چه قابلیت هایی رادر اختیار طراح قرار میدهد ؟  با استفاده از RGBA می توانیم شفافیت المنت مورد نظر را با استفاده از آلفا تغییر بدهیم و این درصد را کم یا زیاد کنیم . 

این ویژگی در اینترنت اکسپلورر10+ ، فایرفاکس 3+ ، کروم ، سافاری و اوپرا 10+ پشتیبانی می شود .

رنگهای RGB
نحوه نوشتن کدهای RGB به شکل زیر می باشد . 255 برابر است با رنگ قرمز - 0 برابر است با سبز ، 0 سوم برابر است با رنگ آبی | rgb(red, green, blue
می توانیم از درصد هم برای استفاده از مقدار رنگها استفاده کنیم . rgb(0%,0%,100%
هرچه مقدار عدد و درصد بیشتر شود ، درصد شفافیفت رنگ مورد نظر بیشتر می شود . 

User Interface در Css3

outline-offset

با آخرین بخش از آموزشهای Css3 در خدمت شما هستم .آخرین ویژگی User Interface می باشد . این ویژگی دارای 3 متد می باشد
به وسیله خواص جدید معرفی شده در این بخش می توان اندازه عناصر ، نحوه نمایش و خروجی آنها را بر روی صفحه  ، تغییر داد .
ویژگی User Interface دارای 3 متد می باشد که در ادامه برای شما توضیح میدهم  .
خاصیت outline-offset یک خط حاشبه را برای عنصر تعیین کرده و آن را به دور عنصر ایجاد می کند .
خاصیت resize ، تعیین می کند که آیا کاربر می تواند اندازه یک عنصر را بر روی صفحه تغییر دهد یا خیر .

ستون های چندگانه در Css3

css3-techniques-27

با استفاده از Css3 می توانیم چند ستون برای یک متن کلی همانند روزنامه ایجاد کنید . به صفحات روزنامه دقت کرده اید ؟ ادامه متن در یک ستون دیگر قرار می گیرد .
در ادامه روش انجام اینکار در Css آموزش داده می شود . 
اینترنت اکسپلورر 100 ، فایرفاکس ، کروم ، سافاری و اوپرا از این ویژگی پشتیبانی می کند . 
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.

انیمیشن در Css3

anim03

یکی دیگر از کاربردی ترین و اصلی ترین قابلیت هایی که به Css3 اضافه شده ، ساخت انیمیشن می باشد  . اگر به آموزشهای طراحی قالب دقت کرده باشید ، برای ساخت یک تصویر انیمیشن باید از یک سری نرم افزار یا با استفاده از جی کوئری اینکار صورت میگرفت که کمی کار زمان بر و سختی بود اما با استفاده از ویژگی Animation به راحتی می توانیم به تصاویر و المنت های دلخواه ، با انیمیشن افکت بدهیم .
تا به حال با نرم افزار فتوشاپ و فلش بنر طراحی کرده اید ؟ برای حرکت دادن اجزا همیشه باید یک فریم ایجاد کنیم . در Css3  نیز قبل از ساخت انیمیشن باید با Keyframe آشنا شوید .
Keyframe چیست ؟ بوسیله Keyframe مشخص می کنیم که در چه زمانی باید چه تغییراتی درون Css انجام شود مثلاً در 0% از زمان بکگراند آبی و در 100% زمان قرمز باشد .
اینترنت اکسپلورر 10 , موزیلا یا همان فایرفاکس ، سافاری ، کروم و اوپرا از این ویژگی پشتیبانی می کنند.
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.
اپرا برای این ویژگی نیاز به پیشوند -o- دارد . 

Transitions در Css3

Css Transition در نسخه قبلی Css3 اگر میخواستیم یک افکت بر روی متن یا تصویر اعمال کنیم باید از کدهای جاوا استفاده می کردیم اما در Css3  ویژگی اضافه شده با نام Transitions که به راحتی این امکان را به طراح میدهد یک تصویر را بزرگ ، وقتی ماوس روی یک کادر قرار می گیرد اندازه آن بزرگتر شده یا افکت های دیگر ، را بدون استفاده از جاوا ایجاد کند . 
با استفاده از CSS Transitions شما می توانید بدون استفاده از فلش یا جاواسکریپت با hover المنت خود را از یک حالت به حالت دیگری تغییر دهید .
این ویژگی در اینترنت اکسپلورر 10 ، فایرفاکس ، کروم ، سافاری و اوپرا پشتیبانی می شود  .
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.
اپرا برای این ویژگی نیاز به پیشوند -o- دارد .

 CSS Transitions باعث می شود حالت یک المنت به حالت دیگری تغییر کند . 
برای انجام اینکار ابتدا باید دو مرحله زیر را انجام بدهید .  

تبدیل سه بعدی در Css3

css3-3dtransforms

یکی از قابلیت های فوق العاده ای که به Css3 اضافه شده است ، ساخت المنت  با جلوه سه بعدی می باشد .
با استفاده از ویژگی 3D Transforms در Css3 می توانیم به المنت های خود جلوه سه بعدی اضافه کنیم .
ویژگی 3D Transforms دارای دو متد زیر مجموعه می باشد .
rotateX()
rotateY()
تمام مرورگرها به غیر از اوپرا از این ویژگی پشتیبانی می کنند اما در نسخه های جدید .
اینترنت اکسپلورر نسخه 10 , فایرفاکس , موزیلا و سافاری از این ویژگی پشتیبانی می کنند  .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند .
اوپرا از این ویژگی پشتیبانی نمی کند . 

تبدیل دو بعدی در Css3

 2d-transformیکی دیگر از ویژگیهایی که در نسخه قدیمی Css3 وجود نداشت تبدیل دو بعدی بود . با استفاده از این ویژگی می توانیم اجزای مورد نظرمان را در جهت دلخواه بچرخانیم ، بزرگ یا کوچک کنیم یا کمی آن را خم نمائیم . 
این ویژگی در اینترنت اکسپلورر نسخه 10 ، موزیلا و اوپرا پشتیبانی می شود  .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارد .
اینترنت اکسپلورر 9 برای این ویژگی نیاز به پیشوند -ms- دارد . 

 2D Transforms دارای ویژگیهای زیر می باشد که در ادامه هر کدام را به صورت کامل توضیح میدهم . 

صفت Font در Css3

FONT-FACE

اگر به آموزشهای طراحی قالب با Html . Css دقت کرده باشید ، برای تعیین نوع فونتهای وب سایت معمولا از Tahoma استفاده می کردم .
دلیل این کار هم این بود که مرورگرها فقط از یک سری فونت استاندارد که قدرت خواندن آن را داشته اند پشتیبانی می کردند و طراحان نمی توانستند از فونت دلخواه در طراحی قالب وب سایت استفاده کنند .
ولی این مشکل در Css3 برطرف شده و شما می توانید به راحتی فونت مورد نظر را به عنوان یا متن اصلی صفحه اختصاص بدهید  .
این ویژگی در همه مرورگرها پشتیبانی می شود  .
فایرفاکس ، کروم ، سافاری و اپرا از فونت های .ttf و .otf پشتیبانی میکنند .
اینترنت اکسپلورر 9 به بالا از @font-face پیروی میکند ولی فقط از فونت .eot پشتیبانی می کند .
اینترنت اکسپلورر 8 به پایین از @font-face پشتیبانی نمی کند .

Text Effect در Css3

text-shadow

یکی از ویژگیهایی که خود من در قالب جدید از آن استفاده کرده ام Text Shadow می باشد با استفاده از این قابلیت به راحتی می توانیم یک سایه برای متن یا عنوانهای اصلی سایت ایجاد کنیم . ویژگی Text Shadow و Word wrap زیر مجموعه Text Effect می باشد .
اینترنت اکسپلورر 10 ، فایرفاکس ، اوپرا ، کروم . سافاری از ویژگی Text Shadow پشتیبانی می کنند .
تمام مرورگرها از ویژگی word warp پشتیبانی می کنند .

صفت Background در Css3

css-background-442x268

دومین ویژگی جدید که به Css3 اضافه شده است استفاده از چند تصویر به عنوان پس زمینه قالب وب سایت می باشد . ویژگی Background هم دارای دو زیر مجموعه می باشد که قصد دارم در ادامه برای شما توضیح بدهم . اولین ویژگی background-size و دومین ویژگی background-origin می باشد .
هر دو خاصیت در مرورگرهای اینترنت اکسپلورر نسخه 9 به بعد ، فایرفاکس ، کروم ، سافاری و اوپرا پشتیبانی می شود .

صفت Border در Css3

css3-border

یکی از ویژگیهای جدید Css3 بوردر (Border) می باشد . در نسخه قبلی Css3  اگر میخواستیم یک کادر با لبه های گرد در قالب وب سایت ایجاد کنیم باید از تصاویری که در پوسته قالب در نرم افزار فتوشاپ طراحی شده بود استفاده می کردیم که بسیار کار زمان بر و خسته کننده ای بود اما در Css3 این ویژگی اضافه شده و طراحان براحتی می توانند یک کادر با لبه های گرد ایجاد کنند .
3 ویژگی در Css3  برای Border اضافه شده است . اول لبه های گرد ، دوم سایه دار کردن کادر و در پایان استفاده از تصاویر به عنوان لبه های کادر کشیده شده که هر کدام را در ادامه با مثال آموزش میدهم .
قبل از استفاده از ویژگیهای جدید طراحان باید بدانند که آیا تمام مرورگرها از این خاصیت های جدید پشتیبانی می کنند یا خیر ؟
اینترنت اکسپلورر نسخه 9 به بعد ، فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی border- radius پشتیبانی می کنند .
اینترنت اکسپلورر  ، فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی box-shadow پشتیبانی می کنند .
 فایرفاکس ، کروم ، سافاری و موزیلا از ویژگی border-image پشتیبانی می کنند .(اینترنت اکسپلورر از این خاصیت پشتیبانی نمی کند)
نکته مهم :
فایرفاکس برای border-image نیاز به پیشوند -moz دارد.
کروم و سافاری برای استفاده از border-image نیاز به پیشوند -webkit- دارند .
اوپرا برای border-image نیاز به پیشوند -o- دارد.        

 

آموزش Css3 - مقدمه

css3

CSS روشی است برای تغییر ظاهری اسناد HTML یا صفحات وب . این جمله ایست که در بخش مقدماتی آموزش CSS توضیح داده ام .
اما Css3 چیست و چه تفاوتی با Css دارد ؟
Css3 ورژن جدید همان Css است اما با قابلیت ها و ویژگیهای بیشتر که بسیار کار طراحان را راحت تر کرده است . ویژگیهای مثل سایه دار کردن متن تایپ شده همانند عنوانهایی که برای آموزشهای سایت آسا رایان استفاده شده است  . 
منحنی کردن لبه های کادرهایی که در Css وجود نداشت ولی در Css3 گنجانده شده است .
استفاده از چند تصویر پس زمینه به عنوان بک گراند ، ویژگی که در Css وجود نداشت .
ایجاد افکت های حرکتی بر روی عناصر صفحه ، ویژگی که به طراح این امکان را میدهد که بدون نیاز به جاوا به هدف خود برسد .
انیمیشن ، به حرکت در آوردن اجزا صفحه و ... .

مشترک این خوارک خبری شوید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا