آموزش CSS3

سرفصل ها و درس ها

مقدمه ای بر CSS3 Introduction to CSS3

• مقدمه Introduction

• بررسی اجمالی دوره Course Overview

• مباحث تحت پوشش Topics Covered

• آشنایی سریع با CSS Accelerated Introduction to CSS

• نحو CSS CSS Syntax

• DEMO: شروع کار با Visual Studio DEMO: Getting Started with Visual Studio

• DEMO: بررسی منبع HTML DEMO: Examining the HTML Source

• DEMO: افزودن سبک به HTML DEMO: Adding Style to HTML

• DEMO: نحو ساده CSS DEMO: Simple CSS Syntax

• خلاصه Summary

محتوا Content

• مقدمه Introduction

• قلم ها Fonts

• سایه متن Text Shadow

• DEMO: صورت قلم DEMO: Font Face

• DEMO: سایه متن DEMO: Text Shadow

• انتخاب کنندگان Selectors

• DEMO: انتخابگرهای موقعیتی DEMO: Positional Selectors

• DEMO: انتخاب کننده هدف DEMO: Target Selector

• DEMO: انتخابگر DEMO: Selection Selector

• ورودی های فرم یک ظاهر طراحی شده Styling Form Inputs

• DEMO: انتخاب کنندگان با حالت DEMO: Stateful Selectors

• خلاصه Summary

چیدمان Layout

• مقدمه Introduction

• چیدمان ها Layouts

• چیدمان جعبه Box Layout

• پیشوندهای فروشنده Vendor Prefixes

• ستون ها Columns

• DEMO: ستون ها DEMO: Columns

• DEMO: طرح بندی جعبه DEMO: Box Layout

• زمینه Background

• DEMO: پس زمینه چند تصویر DEMO: Multiple Image Background

• خلاصه Summary

رنگها Colors

• مقدمه Introduction

• تیرگی Opacity

• DEMO: کدورت DEMO: Opacity

• RGBA و HSLA RGBA and HSLA

• آلفا Alpha

• جریان فعلی currentColor

• DEMO: رنگ ها DEMO: Colors

• شیب ها Gradients

• DEMO: شیب ها DEMO: Gradients

• خلاصه Summary

مرز ها Borders

• مقدمه Introduction

• مرزهای قابل تغییر اندازه Resizable Borders

• گوشه های گرد Rounded Corners

• DEMO: مرزها DEMO: Borders

• سایه زدن Shadowing

• سایه های جعبه پیچیده Complex Box Shadows

• DEMO: سایه زدن DEMO: Shadowing

• خلاصه Summary

تبدیل می شود Transforms

• مقدمه Introduction

• چرخش Rotate

• کج Skew

• مقیاس Scale

• ترجمه کردن Translate

• DEMO: تغییر شکل می دهد DEMO: Transforms

• خلاصه Summary

تصاوير متحرك Animations

• مقدمه Introduction

• تصاوير متحرك Animations

• فریم های کلیدی KeyFrames

• قاب ها و انیمیشن ها KeyFrames and Animations

• DEMO: انیمیشن ها DEMO: Animations

• انتقال Transitions

• DEMO: انتقال DEMO: Transitions

• خلاصه Summary

داستان های رسانه Media Queries

• مقدمه Introduction

• بررسی اجمالی مختصر طراحی پاسخگو Brief Overview of Responsive Design

• پاسخ به ابعاد مشاهده Responding to Viewing Dimensions

• پاسخ به محدودیت های دستگاه Responding to Device Constraints

• DEMO: سایت قبل از تغییر DEMO: Site before changes

• DEMO: اعمال س Mediaالات مدیا DEMO: Applying Media Queries

• خلاصه Summary

فیلمنامه Script

• مقدمه Introduction

• مدیریت سبک ها در اسکریپت Managing Styles in Script

• پشتیبانی از چندین مرورگر Supporting Multiple Browsers

• DEMO: افزودن اسکریپت ها DEMO: Adding Scripts

• DEMO: مشاهده با چندین مرورگر DEMO: Viewing with Multiple Browsers

• DEMO: با استفاده از Modernizr ، پشتیبانی نمی شود DEMO: Using Modernizr, No Support

• DEMO: با استفاده از Modernizr ، پشتیبانی می شود DEMO: Using Modernizr, Supported

• DEMO: اسکریپت برای تشخیص ویژگی DEMO: Script for Feature Detection

• DEMO: استفاده از jQuery برای تغییر سبک DEMO: Using jQuery to Change Style

• خلاصه ماژول Module Summary

• منابع Resources

• خلاصه دوره Course Summary