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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

8 CSS3 Transition ساده که ممکن است کاربران شمارا متعجب کند!

1 6122 ۱۷ اردیبهشت ۹۳

به نام خدا

با سلام خدمت همگی دوستان سون لرنی؛ امیدوارم حالتون خوب باشه.

mouseinout-5

CSS3 برای طراحان UX(برای اطلاعات بیشتر درباره ی طراحی UX کلیک کنید) امکانات زیادی معرفی کرده است که بهترین ویژگی در مورد اونها این است که واقعا ساده اجرا میشن. فقط چند خط کد باعث میشه که به صفحه ی شما جلوه ی ویژه ای بده و کاربران شما رو هم متحیر کنه.

در این مطلب 8 افکت واقعا ساده هست که در عین سادگی زیبایی بسیاری داره.

HTML: (کد های HTML ما در همه ی افکت ها تنها یک div با کلاس مشخص هست.)

CSS:

 

1. محو کردن

چیز های محوی که با Hover کردن پدیدار میشن، معمولا توجه رو جلب میکنن.

این افکت دو مرحله داره؛ یکی مرحله اول که حالت پیشفرضشو مشخص میکنیم و دوم وقتی که روی اون هاور شد.

2. تغییر رنگ

متحرک سازی رنگ به طور باور نکردنی پیچیده هست و با محاسبات ریاضی درگیره؛ ابتدا باید ارزش رنگ به صورت RGB تعیین شه و سپس ترکیب دو رنگ با هم! درحالی که ما میتونیم با چند خط کد این تغییر رنگ رو به صورت انیمیشن اجرا کنیم.

3. بزرگ و کوچک کردن

یا اضافه کردن کد زیر به استایل صفحه خودتون و ست کردن div با کلاس "grow"، میتونید از افکت بزرگ شدن استفاده کنید.

افکت کوچک شدن هم مثل افکت بزرگ شدنه.

4. چرخش عنصر ها

یکی از بهترین CSS Transform ها Rotate هست که میشه با اون عنصری رو چرخوند.

5. مربع به دایره

یکی از افکت های محبوب تبدیل مربع به دایره و بالعکس هست که میشه به سادگی در سی اس اس این کار رو با خاصیت border-radius انجام داد.

6. 3D shadow

معمولا وقتی میخوان عنصری رو سه بعدی نشون بدن بهش border پایین و چپ یا راست میدن که با این کار به درستی نمیشه سه بعدی بودن رو پیاده کرد، بنابراین ما از خاصیت box-shadow با دو مقدار افقی و عمودی استفاده میکنیم.

 

7. حاشیه داخلی

حاشیه سنگین با رنگ متمایز به پس زمینه که به صورت انیمیشن به یک عنصر میدیم یک افکت بسیار جذاب و زیبا رو میسازه. البته نکته ای که حائز اهمیته اینه که نباید در این افکت از خاصیت border استفاده کرد چون باعث حرکت عنصر میشه، بنابراین باز هم از box-shadow استفاده میکنیم.

8. آونگ

یکی از افکت هایی که جدیدا بیشتر ازش استفاده میکنن، افکت حرکت آونگی هست. در سی اس اس با استفاده از فریم ها ( @keyframes ) میتونیم انیمیشن های پیچیده ای بسازیم و اجرای اون انیمیشن رو بینهایت کنیم.

در ابتدا انیمیشن رو تعریف میکنیم.(دقت داشته باشید برای اینکه این انیمیشن رو همه ی مرورگر ها پستیبانی کنن باید برای هر مرورگرها این انیمیشن رو تعریف کنید، منظورم اینه که دوباره این فریم رو با پیشوند مثلا -moz- تعریف کنید.)

و حالا استفاده از این انیمیشن.

میتونید از لینک زیر این 8 افکت رو یکجا دانلود کنید.

امیدوارم از این مطلب استفاده برده باشید.

در پناه حق باشید؛ یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها یک نظر ارسال شده است.

  • ‏‏
    پویابهروش(۱۷ اردیبهشت ۱۳۹۳)

    سلام. اینم یه رادار فول CSS که با box-shadow و keyframes نوشته شده :smile: از من تقدیم به شما:
    http://tuts.icomp.ir/post/3666.php
    😉

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram