پاسخ : آموزش css از سیر تا پیاز
در جلسه پنجاه و پنجم css3 به استايل دهي براي ورژن هاي مختلف ie مي پردازيم تا در صورت بروز مشکل بتوانيم براي ورژن های خاصي از ie استايل دهي را انجام دهيم و در اين رابطه پراپرتي هاي مختلفي را معرفي مي کنيم.
دانلود
- - - Updated - - -
در جلسه پنجاه و ششم css3 با استفاده از مطالبي که آموختيم يک vertical tab menu را طراحي مي کنيم و مشکلات و مسائل مربوط به اين منو را بررسي مي کنيم
دانلود
- - - Updated - - -
در جلسه پنجاه و هفتم css3 همچنان مباحث css3 را ادامه مي دهيم و به سراغ backgorund ها در css3 مي رويم.ابتدا multiple backgrounds ها را معرفي مي کنيم و مثالي را در اين رابطه پياده سازي مي کنيم.سپس به سراغ پراپرتي جديد background-size مي رويم.پراپرتي که يکي از نياز هاي ما به فتوشاپ يعني تغيير سايز تصاوير را برطرف کرده است.تمام نکات مربوط به آن را مطرح مي کنيم و سپس به سراغ ۲ پراپرتي مهم background-clip و background-origin مي رويم.اشتباهات رايجي که در اين ۲ پراپرتي وجود دارد را مطرح مي کنيم و به طور کامل کاربرد اين ۲ پراپرتي را مي گوييم.
دانلود
- - - Updated - - -
در جلسه پنجاه و هشتم css3 به يکي از پراپرتي هاي جالب css3 يعني transition ها مي پردازيم در مورد transition-duration,transition-delay,transition-property صحبت مي کنيم و به طور مفصل به transition-timing-function مي پردازيم و انواع آن را بررسي مي کنيم و تفاوت step-start و step-end را مطرح مي کنيم و سايتي را براي ايجاد transition هاي زيبا معرفي مي کنيم و در پايان مثالي ساده را به کمک آن پياده سازي مي کنيم.
دانلود
- - - Updated - - -
در جلسه پنجاه و نهم css3 با استفاده از مطالبي که آموختيم يک منوي کشويي (dropdown menu) از نوع افقي را طراحي مي کنيم و به صورت گام به گام پيش مي رويم تا با نحوه ايجاد اين منو آشنا شويد و با بکارگيري transition در اين مثال تاثير اين پراپرتي براي شما به طور کامل آشکار خواهد شد. اين منو از جمله منو هاي دشوار هست چون ترکيب دو منو عمودي و افقي مي باشد تا منو کشويي حاصل شود.
دانلود
- - - Updated - - -
در جلسه شصتم css3 يک منو کشويي (drop down menu) از نوع عمودي (vertical) را طراحي مي کنيم تا شما با دو حالت اين نوع منو آشنا شويد و تسلطتان افزايش يابد.
دانلود
- - - Updated - - -
سلام
در جلسه شصت و یکم css3 به يکي ديگر از مباحث جذاب css3 يعني transform ها مي پردازيم و تمام تابع هاي مرتبط به آن را در حالت ۲ بعدي (۲d) يعني
translate
,translatex
translateY
scale
scalex
scaleY
rotate
skew
skewx
skewY
matrix
مي پردازيم و نکات مربوط به value هاي اين توابع را نيز مطرح مي کنيم و در پايان سايتي را براي استفاده از تابع matrix معرفي مي کنيم.
دانلود
- - - Updated - - -
سلام
در جلسه شصت و دوم css3 به ادامه transform ها در css3 مي پردازيم و حالت ۳d آن را یعنی
translate3d
translateZ
scale3d
scaleZ
rotate3d
rotateX
rotateY
rotateZ
به طور مفصل بيان مي کنيم و رايج ترين اشتباهاتي که در زمينه پراپرتي perspective و تابع perspective وجود دارد را بيان مي کنيم و به تفاوت اين دو مي پردازيم و در نهايت در رابطه به تعريف perspective صحبت مي کنيم و حالتي را براي شبيه سازي scalez ايجاد مي کنيم.
دانلود
- - - Updated - - -
در جلسه شصت و سوم css3 در رابطه با نحوه نمايش به صورت جدولي صحبت مي کنيم به صورتي که از تگ هاي جدول استفاده نکنيم اما عناصرمان به شکل جدول نمايش داده شود و در اين رابطه مقادير جديدي را براي display مطرح مي کنيم يعني
display:table
display:table-row
display:table-cell
display:table-column
و مزاياي استفاده از اين مقادير را مي گوييم.
دانلود
- - - Updated - - -
- - - Updated - - -
در جلسه شصت و چهارم css3 به (compress css) فشرده سازي در css مي پردازيم و نکاتي را در اين رابطه مطرح مي کنيم تا باعث صرفه جويي در پهناي باند و افزايش سرعت لود شود و معايب اسفاده از فشرده سازي را بيان مي کنيم و در نهايت سايت هايي را براي فشرده سازي مطرح مي کنيم.
دانلود
- - - Updated - - -
در جلسه شصت و پنج css3 ابتدا در رابطه با استايل دهي متون select شده توسط موس صحبت مي کنيم و با استفاده از سلکتور :selection متون انتخاب شده را استايل مي دهيم سپس به سراغ کلاس هاي کاذب after و before ميرويم و پراپرتي content را توضيح مي دهيم و مثال هايي را براي کاربرد اين کلاس بيان مي کنيم و و در پايان تکنيک حرفه اي clearfix را توضيح مي دهيم.
دانلود
- - - Updated - - -
در جلسه شصت و ششم css3 در رابطه با يکي ديگر از پراپرتي هاي جالب css3 يعني animation ها صحبت مي کنيم و تمام مقادير آن را بیان مي کنيم و در رابطه با ۲تا پراپرتي transform-style و perspective-origin صحبت مي کنيم.
دانلود
- - - Updated - - -
در جلسه شصت و هفتم css3 به ادامه مباث css3 مي پردازيم و multiple columns يا چند ستوني را توضيح مي دهيم و در همين رابطه پراپرتي هاي
column-count
column-width
column-gap
column-rule
column-span
را مطرح مي کنيم و چند ستون را با استفاده از اين پراپرتي ها ايجاد مي کنيم تا تاثير آن در سرعت کار ما آشکار شود و در پايان پراپرتي هاي
resize
outline-offset
box-sizing
که از پرارپتي هاي css3 و براي UI سايت مي باشد را شرح مي دهيم.
دانلود
- - - Updated - - -
در جلسه شصت و هشت css3 به (selectors) سلکتور هاي باقي مانده در css مي پردازيم تا مباحث ما در سلکتور ها کامل شود و در همين رابطه چند سلکتور که نسبت به سلکتور هاي قبلي کاربرد کمتري را دارد مطرح مي کنيم از جمله سلکتور
+
~
>
first-line
first-letter
و يک سري attribute selector
دانلود
- - - Updated - - -
در جلسه شصت و نهم css3 به پراپرتي filter مي پردازيم که همچنان در css حتي نسخه سوم آن معرفي نشده است و با قدرت اين پراپرتي که از پراپرتي هاي آينده مي باشد آشنا مي شويم و مشاهده مي کنيم که به چه مقدار زيادي در اختيار ما فيلتر قرار مي دهد و ما را از فوتوشاپ بي نياز مي کند.
توابع مطرح شده در این قسمت:
grayscale
sepia
saturate
hue-rotate
invert
opacity
brightness
contrast
blur
drop-shadow
url
دانلود
- - - Updated - - -
در جلسه آخر css3 به یکی از مهم ترین مباحث css3 یعنی Media Querie ها می پردازیم که ارتباط مستقیم با مبحث Responsive دارند.مطالبی را در رابطه با ریسپانسیو بیان می کنیم و سپس یه سراغ media type ها و media feature ها می رویم و تمام حالت های مهم آن را بررسی می کنیم و عملگر های منطقی آن را توضیح می دهیم و درنهایت نکاتی را در رابطه با ابزار موجد در طراحی Responsive در مرورگر کروم می گوییم.
بدين ترتيب اين دوره به پايان رسید و اميدواريم که مطالب ارائه شده در اين دوره مورد توجه کاربران قرار گرفته باشد و باز هم بتوانيم با دوره هاي آموزشي بهتر و با کيفيت تر در خدمت کاربران عزیز باشيم.
دانلود
پاسخ با نقل قول