illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!
2 6748 ۱۹ تیر ۹۳ محمد اسفندیاری
1 2

با سلام خدمت همه دوستان سون لرنی
امروز میخوام تعدادی سایت که در زمینه css به ما کمک میکنن و کدنویسی مارو سریع تر میکنن ، به شما معرفی کنم.این سایت ها رو در دو قسمت برای شما معرفی میکنم.

 

1. Cubic-bezier
cubic-bezier
اگه یادتون باشه در قسمت transition ها در css3 ، یک خاصیت بنام transition-timing-function وجود داشت که مقادیری رو می پذیرفت ، مانند ease و linear و .......
یکی از این خصوصیت ها cubic-bezierبود که 4 تا مقدار رو میگرفت .این خصوصیت پیشرفته تر از همشونه و با این خصوصیت میشه انواع دیگه رو به راحتی ساخت.کار کردن با این خصوصیت یک مقدار سخت و گیج کننده هست.این سایتی که معرفی کردم کار مارو خیلی راحت میکنه. به این صورت که ما میایم و با استفاده از اون اهرم ها و تنظیماتی که وجود داره ، transition-timing-function مدنظر خودمونو میسازیم و بعد با استفاده از دکمه SAVE اونو کپی میکنیم و در فایل CSS خودمون paste میکنیم.

 

2. Animatable
Animatable
در این سایت تعدادی Animation قرار داده شده که با hover کردن روی هر کدام از آنها انیمیشن مربوط به آن شکل اجرا میشود. با کلیک کردن بر هر کدام از آنها اطلاعاتی راجع به آن انیمیشن در اختیار ما قرار خواهد گرفت.

 

3. The Web Font Combinator
font-combinator
با استفاده از این سایت میتوانید ابتدا تنظیماته مورد نظر از قبیل font و size و color و ...را بر روی متن انجام داده و آنرا در مرورگر مشاهده کنید تا به مدل مورد نظر برسید و بعد این مقادیر را در کدهای CSS خود وارد کنید.متن هایی که در این سایت قرار دارند رو نیز میشه تغییر داد و متن مورد نظر خودتونو بنویسید.البته این سایت بیشتر برای متن های انگلیسی هست.

 

4. Border Radius
border-radius
با استفاده از این سایت میتونیم border-radius مدنظر خودمونو به راحتی با استفاده از چهار عددی که در چهار گوشه شکل قرار داره بسازیم و کد مربوطه رو کپی کنیم و در کدهای CSS خودمون وارد کنیم.

 

5. Button Maker
Button Maker
با استفاده از این سایت و امکاناتی که در اون قرار داده شده میتونید استایل مورد نظرتون رو به دکمه ای که وجود داره بدید و تغییرات رو عینا مشاهده کنید و بعد از اتمام کار روی اون دکمه کلیک کنید و کدهای مربوطه را کپی کرده و در مقصد paste کنید.

1 2

اهداف و مزایای استفاده از این ابزار :

  • سرعت بخشیدن به کدنویسی
  • استفاده آسان و راحت
  • صرفه جویی در وقت

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    محمدرضا(۲۸ تیر ۱۳۹۳)

    سلام
    من به قسمت پنجم یعنی Button Maker رفتم و کد مربوط به فایل css رو کپی کردم.
    حالا کلاس یا ایدی مربوطه رو باید به چه بخشی بدم؟
    مثلا ایدی ش رو به باید به کد لینک یا کد تصویر بدم یا چیز دیگه ای؟
    ایدش هم با button شروع میشه.

  • ‏‏
    محمد اسفندیاری(۲۸ تیر ۱۳۹۳)

    دوست عزیز بیشتر برای button به کار میره این سایت ولی برای چیزای دیگه هم میشه ازون استفاده کرد….باید به عنصر مورد نظر class = button بدهید و کار تمامه
    برای مثال :
    DIV
    BUTTon
    و ….
    اگه حل نشد بگید تا بیشتر توضیح بدم
    یا علی

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram