آموزش css از سیر تا پیاز

[amoozesh-sara.i]

سلام در جلسه چهلم css3 به پراپرتی و خاصیت border-radius که از پراپرتی های css3 است می پردازیم و تمام حالت ها و value هاي آن را معرفي مي کنيم و نشان مي دهيم که به راحتي با استفاده از اين خاصيت مي توان يک دايره را ايجاد کرد.

دانلود


منبع آموزش

 

[amoozesh-sara.i]

سلام در جلسه چهل و یکم css3 به پراپرتی و خاصیت border-image که از پراپرتی های css3 است می پردازیم و تمام حالت ها و value هاي آن را معرفي مي کنيم و با استفاده از عکس يک border را به زيبايي ايجاد مي کنيم.

دانلود



منبع آموزش

 

[amoozesh-sara.i]

در جلسه پنجاه و دوم css3 به ادامه مبحث گرادينت پرداخته و حالت دوم آن يعني radial-gradient را به صورت کامل بيان مي کنيم.سپس اختلاف بين syntax عمومي و syntax با پيشوند را بیان مي کنيم و تمام کلمات کليدي چه در حالت عمومي و چه در حالت با پيشوند را مطرح مي کنيم .انواع مقياس دهي براي مرکز گرادينت را بيان کرده و حالت دایره و بيضي آن را بررسي مي کنيم.سپس به سراغ يک حالت قديمي و خاص در هسته webkit رفته و تمام حالت ها را بررسي مي کنيم و اختلافات موجود را بيان مي کنيم.

دانلود


منبع آموزش

 

[amoozesh-sara.i]

سلام در جلسه پنجاه و سوم css3 به طور مفصل در رابطه با چند مرورگري (cross browser) صحبت مي کنيم و اینکه چطور يک سايت را با چندين مرورگر سازگار کنيم و در ادامه راهکاري را معرفي مي کنيم تا حالت هاي مختلف Ie یا internet explorer را شبيه سازي کنيم.


دانلود


منبع آموزش

 

[amoozesh-sara.i]

سلام در جلسه پنجاه و چهارم css3 به يکي از تکنيک ها در css يعني css sprite مي پردازيم و معایب و مزاياي اين تکنيک را بررسي مي کنيم و سپس منوي عمودي که قبلا طراحي کرده ايم را با استفاده از اين تکنيک اصلاح مي کنيم.

دانلود


منبع آموزش

 

[amoozesh-sara.i]

در جلسه پنجاه و پنجم css3 به استايل دهي براي ورژن هاي مختلف ie مي پردازيم تا در صورت بروز مشکل بتوانيم براي ورژن های خاصي از ie استايل دهي را انجام دهيم و در اين رابطه پراپرتي هاي مختلفي را معرفي مي کنيم.


دانلود


منبع آموزش

 

[amoozesh-sara.i]

در جلسه پنجاه و ششم css3 با استفاده از مطالبي که آموختيم يک vertical tab menu را طراحي مي کنيم و مشکلات و مسائل مربوط به اين منو را بررسي مي کنيم


منبع آموزش


دانلود

 

[amoozesh-sara.i]

در جلسه پنجاه و هفتم css3 همچنان مباحث css3 را ادامه مي دهيم و به سراغ backgorund ها در css3 مي رويم.ابتدا multiple backgrounds ها را معرفي مي کنيم و مثالي را در اين رابطه پياده سازي مي کنيم.سپس به سراغ پراپرتي جديد background-size مي رويم.پراپرتي که يکي از نياز هاي ما به فتوشاپ يعني تغيير سايز تصاوير را برطرف کرده است.تمام نکات مربوط به آن را مطرح مي کنيم و سپس به سراغ ۲ پراپرتي مهم background-clip و background-origin مي رويم.اشتباهات رايجي که در اين ۲ پراپرتي وجود دارد را مطرح مي کنيم و به طور کامل کاربرد اين ۲ پراپرتي را مي گوييم.





دانلود



منبع آموزش

 

[amoozesh-sara.i]

در جلسه پنجاه و هشتم css3 به يکي از پراپرتي هاي جالب css3 يعني transition ها مي پردازيم در مورد transition-duration,transition-delay,transition-property صحبت مي کنيم و به طور مفصل به transition-timing-function مي پردازيم و انواع آن را بررسي مي کنيم و تفاوت step-start و step-end را مطرح مي کنيم و سايتي را براي ايجاد transition هاي زيبا معرفي مي کنيم و در پايان مثالي ساده را به کمک آن پياده سازي مي کنيم.

دانلود


منبع آموزش

 

[sadaf1818]

سلام ممنون از لطفتون من به دنبال مطلبی بودم که توی آموزش های شما پیدا کردم موفق باشید

 

[amoozesh-sara.i]

در جلسه پنجاه و نهم css3 با استفاده از مطالبي که آموختيم يک منوي کشويي (dropdown menu) از نوع افقي را طراحي مي کنيم و به صورت گام به گام پيش مي رويم تا با نحوه ايجاد اين منو آشنا شويد و با بکارگيري transition در اين مثال تاثير اين پراپرتي براي شما به طور کامل آشکار خواهد شد. اين منو از جمله منو هاي دشوار هست چون ترکيب دو منو عمودي و افقي مي باشد تا منو کشويي حاصل شود.

منبع آموزش

دانلود

 

[amoozesh-sara.i]

در جلسه شصتم css3 يک منو کشويي (drop down menu) از نوع عمودي (vertical) را طراحي مي کنيم تا شما با دو حالت اين نوع منو آشنا شويد و تسلطتان افزايش يابد.


دانلود

منبع آموزش

 

[amoozesh-sara.i]

سلام
در جلسه شصت و یکم css3 به يکي ديگر از مباحث جذاب css3 يعني transform ها مي پردازيم و تمام تابع هاي مرتبط به آن را در حالت ۲ بعدي (۲d) يعني
translate
,translatex
translateY
scale
scalex
scaleY
rotate
skew
skewx
skewY
matrix
مي پردازيم و نکات مربوط به value هاي اين توابع را نيز مطرح مي کنيم و در پايان سايتي را براي استفاده از تابع matrix معرفي مي کنيم.

دانلود

 

[amoozesh-sara.i]

سلام
در جلسه شصت و دوم css3 به ادامه transform ها در css3 مي پردازيم و حالت ۳d آن را یعنی
translate3d
translateZ
scale3d
scaleZ
rotate3d
rotateX
rotateY
rotateZ
به طور مفصل بيان مي کنيم و رايج ترين اشتباهاتي که در زمينه پراپرتي perspective و تابع perspective وجود دارد را بيان مي کنيم و به تفاوت اين دو مي پردازيم و در نهايت در رابطه به تعريف perspective صحبت مي کنيم و حالتي را براي شبيه سازي scalez ايجاد مي کنيم.

دانلود

 

[amoozesh-sara.i]

در جلسه شصت و سوم css3 در رابطه با نحوه نمايش به صورت جدولي صحبت مي کنيم به صورتي که از تگ هاي جدول استفاده نکنيم اما عناصرمان به شکل جدول نمايش داده شود و در اين رابطه مقادير جديدي را براي display مطرح مي کنيم يعني
display:table
display:table-row
display:table-cell
display:table-column
و مزاياي استفاده از اين مقادير را مي گوييم.

دانلود