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

شروع موضوع توسط amoozesh-sara.i ‏6 آگوست 2015 در انجمن زبان HTML

کلمات کلیدی:
  1. amoozesh-sara.i

    amoozesh-sara.i Member

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

    دانلود


    منبع آموزش
     
    نوشته شده توسط amoozesh-sara.i در ‏19 سپتامبر 2015
  2. amoozesh-sara.i

    amoozesh-sara.i Member

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

    دانلود



    منبع آموزش
     
    نوشته شده توسط amoozesh-sara.i در ‏20 سپتامبر 2015
  3. amoozesh-sara.i

    amoozesh-sara.i Member

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

    دانلود


    منبع آموزش
     
    نوشته شده توسط amoozesh-sara.i در ‏21 سپتامبر 2015
  4. amoozesh-sara.i

    amoozesh-sara.i Member

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


    دانلود


    منبع آموزش
     
    نوشته شده توسط amoozesh-sara.i در ‏23 سپتامبر 2015
  5. amoozesh-sara.i

    amoozesh-sara.i Member

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

    دانلود


    منبع آموزش
     
    نوشته شده توسط amoozesh-sara.i در ‏25 سپتامبر 2015
  6. amoozesh-sara.i

    amoozesh-sara.i Member

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


    دانلود


    منبع آموزش
     
    نوشته شده توسط amoozesh-sara.i در ‏26 سپتامبر 2015
  7. amoozesh-sara.i

    amoozesh-sara.i Member

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


    منبع آموزش



    دانلود
     
    نوشته شده توسط amoozesh-sara.i در ‏29 سپتامبر 2015
  8. amoozesh-sara.i

    amoozesh-sara.i Member

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





    دانلود



    منبع آموزش
     
    نوشته شده توسط amoozesh-sara.i در ‏2 اکتبر 2015
  9. amoozesh-sara.i

    amoozesh-sara.i Member

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

    دانلود


    منبع آموزش
     
    نوشته شده توسط amoozesh-sara.i در ‏4 اکتبر 2015
  10. sadaf1818

    sadaf1818 New Member

    ارسال‌ها:
    1
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام ممنون از لطفتون من به دنبال مطلبی بودم که توی آموزش های شما پیدا کردم موفق باشید:oops:
     
    نوشته شده توسط sadaf1818 در ‏5 اکتبر 2015
  11. amoozesh-sara.i

    amoozesh-sara.i Member

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

    منبع آموزش

    دانلود
     
    نوشته شده توسط amoozesh-sara.i در ‏5 اکتبر 2015
  12. amoozesh-sara.i

    amoozesh-sara.i Member

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


    دانلود

    منبع آموزش
     
    نوشته شده توسط amoozesh-sara.i در ‏7 اکتبر 2015
  13. amoozesh-sara.i

    amoozesh-sara.i Member

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

    مي پردازيم و نکات مربوط به value هاي اين توابع را نيز مطرح مي کنيم و در پايان سايتي را براي استفاده از تابع matrix معرفي مي کنيم.

    دانلود
     
    نوشته شده توسط amoozesh-sara.i در ‏9 اکتبر 2015
  14. amoozesh-sara.i

    amoozesh-sara.i Member

    ارسال‌ها:
    52
    تشکر شده:
    9
    امتیاز دستاورد:
    6
    سلام
    در جلسه شصت و دوم css3 به ادامه transform ها در css3 مي پردازيم و حالت ۳d آن را یعنی
    translate3d
    translateZ
    scale3d
    scaleZ
    rotate3d
    rotateX
    rotateY
    rotateZ

    به طور مفصل بيان مي کنيم و رايج ترين اشتباهاتي که در زمينه پراپرتي perspective و تابع perspective وجود دارد را بيان مي کنيم و به تفاوت اين دو مي پردازيم و در نهايت در رابطه به تعريف perspective صحبت مي کنيم و حالتي را براي شبيه سازي scalez ايجاد مي کنيم.

    دانلود
     
    نوشته شده توسط amoozesh-sara.i در ‏11 اکتبر 2015
  15. amoozesh-sara.i

    amoozesh-sara.i Member

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

    دانلود
     
    نوشته شده توسط amoozesh-sara.i در ‏13 اکتبر 2015

به اشتراک بگذارید