حضرت امیر : آفت دانش به کار نبستن آن, و آفت کار دلبستگی نداشتن به آن است.
مشاهده همه بسته های آموزشی

طراح وب

با پیشرفتی که داره تو دنیای وب و تکنولوژی میشه خیلی از کسب و کارهای سنتی دارن به این سمت میرن که برای کسب و کار خودشون یه سایت داشته باشن ، چون تو فکر یک آدم سنتی اینه که فقط سایت رو بزنه اما نمیدونه که زدن سایت مثل شروع یه مغازه تو کویره . اینجاست که نیازه تا تو یک طراح وب داشته باشی .

خب حالا ما تصمیم گرفتیم که یه طراح وب بشیم و حالا یا آزاد و به صورت پروژه ای یا هم به صورت تمام وقت برای شرکت ها کار کنیم . این ظاهر ماجراست به قولی این راحت ترین چیزیه که تو اول قضیه به ذهنت میاد .

برای شروع لازمه بگم که تکلیفتو با خودت مشخص کن ! میخوای یه طراح وب بشی که کسی رو دستت نباشه یا هم میخوای در حد یه طراح وب معمولی باشی ؟ این تویی که باید تصمیمتو از بین این دو مورد بگیری !

خب اگه انتخابت مورد دومه که من دیگه هیچی نگم بهتره اما اگه میخوای یه طراح وب حرفه ای بشی راه برات هموار نیست و باید باز هم از دایره ی تنبلیت بیای بیرون و یه تکونی به خودت بدی !!

قدم اول :شروع کن !!

شاید سخت ترین کار تو هر کاری شروع کردن اون باشه . اگه میخوای یه طراح وب بشی باید از مفاهیم پایه طراحی وب سایت شروع کنی . باید برنامه نویسی تحت وب رو از Html و CSS شروع کنی .

HTML پرکاربرد ترین و به قولی ساده ترین زبان برای طراحی وب هست . همین صفحه ای که الان جلوی شماست از HTML برای نوشتنش استفاده شده . پس شروع کن به یاد گرفتنش .

Css یک روش ساده برای نمایش چیدمان و زیباکردن صفحه مثل نوع قلم و رنگ و اندازه هاست که از این زبان استفاده میشه .

یه طراح وب خوب لازمه یه کم طراحی هم بلد باشه به قولی بهتره که فتوشاپ رو هم در حدی که بتونین نیازتون رو رفع کنین بلد باشین . خب قدم اول تموم شد .

این رو هم بگم که برای یه طراح وب خوب شدن لازمه وردپرس ، PHP  و ASP  رو هم بلد باشی . شاید شنیده باشی که میگن یکی از اینا رو یاد بگیری کافیه اما تجربه ما با حضور تو بازار کار نشون داده که مشتری برات تعیین میکنه که پروژه رو با چه زبانی بنویسی . پس برای اینکه پروژه هات رو از دست ندی لازمه هرچی برای طراحی وب نیاز هست رو یاد بگیری.

خب وقت اینه که یه سر به چارت آکادمی لرن فایلز بزنی که ما برات آمادش کردیم و روال طراح وب شدن رو برات اونجا مفصل توضیح دادیم .

گام دوم : تلاش تلاش تلاش!!!

برای موفق شدن تو هرکاری لازمه که تلاش کنی و پروژه های بیشتری انجام بدی . شده برای چند نفر رایگان کار کن تا برای خودت نمونه کار داشته باشی و تجربه کاری به دست بیاری . اگه خودت هم در جریان بازار کار باشی الان دوره ی اینکه بهت بگن مدرکت چیه گذشته . برای یک طراح وب فقط نمونه کاراشه که میتونه به بقیه ثابت کنه کار بلده پس خودت رو به همه معرفی کن .

گام سوم : تحقیق کن!!

با دیدن سایت های مختلف میتونی ایده های خوبی در مورد طراحی یه سایت کارا رو به دست بیاری . سایتای مختلف رو ببین و سایتی رو طراحی کن که نواقصی که تو سایت های دیگه میبینی رو نداشته باشه . پس همه این سایتا میتونن برای تو یه کلاس درس ایده گرفتن باشن .

گام چهارم : پیدا کردن منبع 

اینکه از چه منبعی استفاده کنی و با چه روشی پیش بری به خودت بستگی داره . میتونی از یک کتاب برای آموزش خودت استفاده کنی و یا از داکیومنت های موجود در در سطح وب استفاده کنی و یا از ویدئو های آموزشی که داخل سایت های مختلف هستند . هر کدوم از این ها میتونه به یک نحوی برای تو مفید باشه . اگر تو انتخاب های تو ویدئوهای آموزشی بود پس حتما یک سر به چارت آموزشی ما بزن شاید بتونیم نیاز های تو رو برطرف کنیم .

سخن آخر :

برای رسیدن به کاری که دوس داری باید تلاش کنی فقط کافیه تصمیم بگیری و اولین قدم رو برداری !

تاریخ ارسال
14 بهمن 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
4 دیدگاه

چند انیمیشن جالب با CSS که شما باید ببینید

چند انیمیشن جالب با CSS که شما باید ببینید ( قسمت پنجم )

سی اس اس ( CSS: Cascading Style Sheets ) در کنار اچ تی ام ال ( HTML ) هستهٔ فناوری ساخت صفحه های وب هستند. سی اس اس روشی ساده برای نمایش چیدمان و جلوه های تصویری ( مانند نوع قلم، رنگ و اندازه ها ) بر صفحه های وب است. در اینجا ما به شما چند انیمیشن که برای برنامه نویس ها و طراحان وب می تواند بسیار مفید و جالب و جذاب باشد را نشان می دهیم. با این حال این مجموعه در بسیاری از چیزهایی که شما می توانید با CSS تحرک را ایجاد کنید تمرکز دارد و خلاقیت شما برای ایجاد انیمیشن با CSS نیز چند پله بالاتر می برد. پس با ما همراه باشید ( مثل قسمت قبل ) در چند انیمیشن جالب با CSS که شما باید ببینید.

در آغاز، وب سایتها با کُدهای ساده HTML نوشته میشدند. با پیشرفت وب و هنر طراحی آن، زبان کُد نویسی اش، اچ تی ام ال، پیچیده تر و پرانعطاف تر شد. با پیدایش الگوهای «CSS»، روش نادرست طراحی با جدول های پنهان در صفحه از گردونه خارج، و بجای آن استفاده مناسب از زبان کمکی «CSS» جایگزین شد. فناوریهای یکپارچه سازی پایگاه داده (Database)، مانند زبان های کُدنویسی سمت سرور (Server-Side Scripting) مانند CGI، PHP، ASP. NET، ASP، JSP و ColdFusion، و استانداردهای طراحی مدرن با الگو ها (CSS)، ساختار وب سایت ها را باز هم تغییر داده و آن را پیشرفته تر کرده اند.

برای درج CSS در یک سند اچ تی ام ال از یکی از سه روش زیر میتوان بهره گرفت (به طور مفصل تر در مقاله نخست) :

شیوه نامهٔ داخلی

شیوه نامهٔ داخلی در قسمت <head> در سند اچ تی ام ال، با استفاده از تگ <style> معین می گردد.

شیوه نامهٔ خارجی

در این روش برای اتصال یک سند CSS که با پسوند .css شناخته می شود، از تگ <link> در قسمت <head> استفاده می شود.

شیوه نامهٔ درون خطی

در این روش مشخصات شیوه نامهٔ در تگ مربوطه ذکر میشود.

ما در اینجا کد های مربوط به انیمیشن ها را در اختیار شما قرار می دهیم و شما می توانید با استفاده از سایت codepen.io کد ها را وارد کرده و آن ها را اجرا کنید و می توانید در قسمت پایینی این سایت انیمیشن را تماشا کنید.

Animated Shopping Cart Icon.1 ( انیمیشن مربوط به آیکون های خرید )

انیمیشن های متحرک زیبا برای زمانی که مواد غذایی به سبد خرید اضافه شده است. در این جا سه نمونه متفاوت از هر مدل انیمیشن وجود دارد که شامل سبد خرید و ستاره دار کردن برای خرید در زمانی دیگر ( save for later ) و علامت دار کردن به عنوان یک هدیه ( this is a Gift ) و اضافه کردن محصول به علاقه مندی و … می شود. حتما این انیمیشن ها را امتحان کنید.

برای دیدن این انیمیشن اینجا را کلیک کنید.

کد HTML

<link href=’http://fonts.googleapis.com/css?family=Nunito:400′ rel=’stylesheet’ type=’text/css’> 

<header>

  <img class=”shop-sign”src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/headerpic.svg” alt=”Fake Fruit Shop Sign” />

</header>

  <div class=”demo demo-1″>

    <div class=”contain-all”>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin First Cart Icon–>

        <svg class=”cart-icon-1″ version=”1.1″ width=”150px” height=”150px” viewBox=”0 0 90.156 89.89″>

          <path class=”main-path” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.973,26.021V15.296c0-1.109-0.865-2.292-1.922-2.628L1.49,8.99 M62.354,55.639c0,1.109-0.101,2.236-0.224,2.504

          c-0.123,0.268-1.684,0.487-2.793,0.487H17.989c-1.109,0-2.242-0.098-2.517-0.218c-0.275-0.12-0.5-1.664-0.5-2.773V23.273

          c0-1.109,0.101-2.236,0.224-2.504c0.123-0.268,1.684-0.487,2.793-0.487h41.348c1.109,0,2.242,0.098,2.517,0.218  c0.275,0.12,0.5,1.664,0.5,2.773V55.639z”/>

          <line fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”30.863″ y1=”20.74″ x2=”30.863″ y2=”58.63″/>

          <line fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”46.837″ y1=”20.74″ x2=”46.837″ y2=”58.63″/>

          <line fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”33.308″ x2=”61.24″ y2=”33.308″/>

          <line fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”46.285″ x2=”61.125″ y2=”46.285″/>

          <circle class=”wheel” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”23.442″ cy=”64.554″ r=”5.924″/>

          <circle class=”wheel” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”53.314″ cy=”64.554″ r=”5.924″/>

          <path class=”outer-plus-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-miterlimit=”10″ d=”M67.378,52.665

          c1.29-0.143,2.615-0.147,3.959,0.001c9.837,1.087,16.93,9.943,15.843,19.78s-9.943,16.93-19.78,15.843

          c-7.378-0.815-13.212-6.001-15.21-12.692″/>

          <path class=”cart-plus-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.516,70.556h17.695 M70.364,61.708v17.695″/>

          <path class=”check-1″ fill=”none” stroke=”#7aa23f” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M60.207,73.377l6.817,6.817 M81.273,64.554l-14.249,15.64″/>

        </svg>

        <!–End First Cart Icon–>

        <img class=”apple-1″ src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/apple.svg” alt=”Apple Icon” />

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <img class=”lime-1″ src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/lime.svg” alt=”Lime Icon” />

        <!–Begin Second Cart Icon–>

        <svg class=”cart-icon-2″ version=”1.1″ width=”150px” height=”150px” viewBox=”0 0 90.156 89.89″>

          <path class=”main-path” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.973,26.021V15.296c0-1.109-0.865-2.292-1.922-2.628L1.49,8.99 M62.354,55.639c0,1.109-0.101,2.236-0.224,2.504

          c-0.123,0.268-1.684,0.487-2.793,0.487H17.989c-1.109,0-2.242-0.098-2.517-0.218c-0.275-0.12-0.5-1.664-0.5-2.773V23.273

          c0-1.109,0.101-2.236,0.224-2.504c0.123-0.268,1.684-0.487,2.793-0.487h41.348c1.109,0,2.242,0.098,2.517,0.218 c0.275,0.12,0.5,1.664,0.5,2.773V55.639z”/>

          <line class=”center-line” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”30.863″ y1=”20.74″ x2=”30.863″ y2=”58.63″/>

          <line class=”center-line” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”46.837″ y1=”20.74″ x2=”46.837″ y2=”58.63″/>

          <line class=”center-line” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”33.308″ x2=”61.24″ y2=”33.308″/>

          <line class=”center-line” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”46.285″ x2=”61.125″ y2=”46.285″/>

          <circle class=”wheel” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”23.442″ cy=”64.554″ r=”5.924″/>

          <circle class=”wheel” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”53.314″ cy=”64.554″ r=”5.924″/>

          <path class=”outer-plus-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-miterlimit=”10″ d=”M67.378,52.665

          c1.29-0.143,2.615-0.147,3.959,0.001c9.837,1.087,16.93,9.943,15.843,19.78s-9.943,16.93-19.78,15.843

          c-7.378-0.815-13.212-6.001-15.21-12.692″/>

          <path class=”cart-plus-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.516,70.556h17.695 M70.364,61.708v17.695″/>

        </svg>

        <!–End Second Cart Icon–>    

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Third Cart Icon–>

        <svg class=”cart-icon-3″ version=”1.1″ width=”150px” height=”150px” viewBox=”0 0 90.156 89.89″>

          <path class=”main-path-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.973,26.021V15.296c0-1.109-0.865-2.292-1.922-2.628L1.49,8.99 M62.354,55.639c0,1.109-0.101,2.236-0.224,2.504

          c-0.123,0.268-1.684,0.487-2.793,0.487H17.989c-1.109,0-2.242-0.098-2.517-0.218c-0.275-0.12-0.5-1.664-0.5-2.773V23.273

          c0-1.109,0.101-2.236,0.224-2.504c0.123-0.268,1.684-0.487,2.793-0.487h41.348c1.109,0,2.242,0.098,2.517,0.218 c0.275,0.12,0.5,1.664,0.5,2.773V55.639z”/>

          <line class=”center-line-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”30.863″ y1=”20.74″ x2=”30.863″ y2=”58.63″/>

          <line class=”center-line-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”46.837″ y1=”20.74″ x2=”46.837″ y2=”58.63″/>

          <line class=”center-line-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”33.308″ x2=”61.24″ y2=”33.308″/>

          <line class=”center-line-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”46.285″ x2=”61.125″ y2=”46.285″/>

          <circle class=”wheel-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”23.442″ cy=”64.554″ r=”5.924″/>

          <circle class=”wheel-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”53.314″ cy=”64.554″ r=”5.924″/>

          <path class=”outer-plus-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-miterlimit=”10″ d=”M67.378,52.665

          c1.29-0.143,2.615-0.147,3.959,0.001c9.837,1.087,16.93,9.943,15.843,19.78s-9.943,16.93-19.78,15.843

          c-7.378-0.815-13.212-6.001-15.21-12.692″/>

          <path class=”cart-plus-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.516,70.556h17.695 M70.364,61.708v17.695″/>

          </svg>

        <!–End Third Cart Icon–>

        <div class=”one”>1</div>

      </a>

    </div>

  </div>

  <div class=”demo demo-2″>

    <div class=”contain-all”>

      <a href=”#” class=”contain-icon icon-hook”>

      <!–Begin First Star Icon–>

        <svg class=”star-icon star-icon-1″ version=”1.1″ width=”103px” height=”103px” viewBox=”0 0 105.602 102.931″>

          <path class=”main-star-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”6″ stroke-miterlimit=”10″ d=”M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0  l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754

          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413

          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287

          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z”/>

          <path class=”star-dashes-1″ fill=”#FFFFFF” stroke=”#FFFFFF” stroke-width=”5″ stroke-linecap=”round” stroke-miterlimit=”10″ d=”M20.881,6.26

          l6.333,7.333 M103.214,63.961l-9.173-3.122 M78.519,13.835l5.724-7.818 M52.777,100.544l0.048-9.69 M11.823,61.737l-9.436,2.204″/>

          <path class=”star-check-1″ fill=”none” stroke=”#f9f706″ stroke-width=”5″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M42.681,47.839l6.817,6.817 M63.747,39.016l-14.249,15.64″/>

        </svg>

        <!–End First Star Icon–>

        <span class=”text save-text”>Save for Later</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Second Star Icon–>

        <svg class=”star-icon star-icon-2″ version=”1.1″ width=”106px” height=”103px” viewBox=”0 0 105.602 102.931″>

          <path class=”main-star-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”6″ stroke-miterlimit=”10″ d=”M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0 l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754

          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413

          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287

          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z”/>

          <path class=”star-dashes-2″ fill=”#FFFFFF” stroke=”#FFFFFF” stroke-width=”5″ stroke-linecap=”round” stroke-miterlimit=”10″ d=”M20.881,6.26

          l6.333,7.333 M103.214,63.961l-9.173-3.122 M78.519,13.835l5.724-7.818 M52.777,100.544l0.048-9.69 M11.823,61.737l-9.436,2.204″/>

          M42.681,47.839l6.817,6.817 M63.747,39.016l-14.249,15.64″/>

        </svg>

        <!–End Second Star Icon–>

        <span class=”text save-text”>Save for Later</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Third Star Icon–>

        <svg class=”star-icon star-icon-3″ version=”1.1″ width=”106px” height=”103px” viewBox=”0 0 105.602 102.931″>

          <path class=”main-star-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”6″ stroke-miterlimit=”10″ d=”M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0 l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754

          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413

          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287

          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z”/>

          <path class=”main-star-4″ fill=”none” stroke=”#f9f706″ stroke-width=”6″ stroke-miterlimit=”10″ d=”M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0  l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754

          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413

          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287

          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z”/>

        </svg>

        <!–End Third Star Icon–>

        <span class=”text save-text”>Save for Later</span>

      </a>

    </div>

  </div>

  <div class=”demo demo-3″>

    <div class=”contain-all”>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin First Gift Icon–>

        <svg class=”box-icon box-icon-1″ version=”1.1″ width=”74px” height=”89px” viewBox=”0 0 74.479 89.141″>

          <path class=”box-bottom-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M67.874,84.885

          c0,1.173-0.959,2.132-2.132,2.132H8.737c-1.173,0-2.132-0.959-2.132-2.132V44.389c0-1.173,0.959-2.132,2.132-2.132h57.005 c1.173,0,2.132,0.959,2.132,2.132V84.885z”/>

          <path class=”box-top-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M72.354,41.018

          c0,0.655-0.536,1.191-1.191,1.191H3.315c-0.655,0-1.191-0.536-1.191-1.191v-9.795c0-0.655,0.536-1.191,1.191-1.191h67.849

          c0.655,0,1.191,0.536,1.191,1.191V41.018z”/>

          <path class=”bow-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M36.491,87.017c0,0,0-56.14,0-56.976c0-9.195,1.934-26.713-11.045-27.872c-9.035-0.807-14.344,9.487-11.634,17.091

          c3.113,8.734,14.479,10.773,22.678,10.773″/>

          <path class=”bow-1 bow-1-right” fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M37.988,87.017c0,0,0-56.14,0-56.976c0-9.195-1.934-26.713,11.045-27.872c9.035-0.807,14.344,9.487,11.634,17.091

          c-3.113,8.734-14.479,10.773-22.678,10.773″/>

        </svg>

        <!–End First Gift Icon–>

        <span class=”text gift-text”>This is a Gift</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

      <!–Begin Gift Star Icon–>

        <svg class=”box-icon box-icon-2″ version=”1.1″ width=”74px” height=”89px” viewBox=”0 0 74.479 89.141″>

          <path class=”box-bottom-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M67.874,84.885

          c0,1.173-0.959,2.132-2.132,2.132H8.737c-1.173,0-2.132-0.959-2.132-2.132V44.389c0-1.173,0.959-2.132,2.132-2.132h57.005 c1.173,0,2.132,0.959,2.132,2.132V84.885z”/>

          <path class=”box-top-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M72.354,41.018

          c0,0.655-0.536,1.191-1.191,1.191H3.315c-0.655,0-1.191-0.536-1.191-1.191v-9.795c0-0.655,0.536-1.191,1.191-1.191h67.849 c0.655,0,1.191,0.536,1.191,1.191V41.018z”/>

          <path class=”bow-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M36.491,87.017c0,0,0-56.14,0-56.976c0-9.195,1.934-26.713-11.045-27.872c-9.035-0.807-14.344,9.487-11.634,17.091 c3.113,8.734,14.479,10.773,22.678,10.773″/>

          <path class=”bow-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M37.988,87.017c0,0,0-56.14,0-56.976c0-9.195-1.934-26.713,11.045-27.872c9.035-0.807,14.344,9.487,11.634,17.091

          c-3.113,8.734-14.479,10.773-22.678,10.773″/>

        </svg>

        <!–End Second Gift Icon–>

        <img class=”lemon-gift-2″ src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/lemon.svg” alt=”Lemon Icon” />

        <span class=”text gift-text”>This is a Gift</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Third Gift Icon–>

        <svg class=”box-icon box-icon-3″ version=”1.1″ width=”74px” height=”89px” viewBox=”0 0 74.479 89.141″>

          <path class=”box-bottom-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M67.874,84.885

          c0,1.173-0.959,2.132-2.132,2.132H8.737c-1.173,0-2.132-0.959-2.132-2.132V44.389c0-1.173,0.959-2.132,2.132-2.132h57.005 c1.173,0,2.132,0.959,2.132,2.132V84.885z”/>

          <path class=”box-top-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M72.354,41.018

          c0,0.655-0.536,1.191-1.191,1.191H3.315c-0.655,0-1.191-0.536-1.191-1.191v-9.795c0-0.655,0.536-1.191,1.191-1.191h67.849 c0.655,0,1.191,0.536,1.191,1.191V41.018z”/>

          <path class=”bow-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M36.491,87.017c0,0,0-56.14,0-56.976c0-9.195,1.934-26.713-11.045-27.872c-9.035-0.807-14.344,9.487-11.634,17.091   c3.113,8.734,14.479,10.773,22.678,10.773″/>

          <path class=”bow-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M37.988,87.017c0,0,0-56.14,0-56.976c0-9.195-1.934-26.713,11.045-27.872c9.035-0.807,14.344,9.487,11.634,17.091

          c-3.113,8.734-14.479,10.773-22.678,10.773″/>

        </svg>

        <!–End Third Gift Icon–>

        <img class=”lime-2″ src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/lime.svg” alt=”Lime Icon” />

        <span class=”text gift-text”>This is a Gift</span>

      </a>

    </div>

  </div>

  <div class=”demo demo-4″>

    <div class=”contain-all”>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin First Favorite Icon–>

        <svg class=”heart-icon heart-icon-1″ version=”1.1″ width=”91px” height=”85px” viewBox=”0 0 90.65 85.04″>

          <path class=”heart-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”5″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041

          C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522″/>

          <circle class=”loader-1 loader-1-l” fill=”#ec6d46″ stroke=”none” stroke-miterlimit=”10″ cx=”25.173″ cy=”39.773″ r=”5.014″/>

          <circle class=”loader-1 loader-1-r” fill=”#ec6d46″ stroke=”none” stroke-miterlimit=”10″ cx=”65.477″ cy=”39.773″ r=”5.014″/>

          <circle class=”loader-1 loader-1-m” fill=”#ec6d46″ stroke=”none” stroke-miterlimit=”10″ cx=”45.325″ cy=”39.773″ r=”5.014″/>

        </svg>

        <!–End First Favorite Icon–> 

        <span class=”text favorite-text”>Add to Favorites</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Second Favorite Icon–>

        <svg class=”heart-icon heart-icon-2″ version=”1.1″ width=”91px” height=”85px” viewBox=”0 0 90.65 85.04″>

          <path class=”heart-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”5″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041

          C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522″/>

        </svg>        

        <!–End Second Favorite Icon–>    

        <span class=”text favorite-text”>Add to Favorites</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Third Favorite Icon–>

        <svg class=”heart-icon heart-icon-3″ version=”1.1″ width=”91px” height=”85px” viewBox=”0 0 90.65 85.04″>

          <path class=”heart-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”5″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041

          C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522″/>

        </svg>

        <!–End Third Favorite Icon–> 

        <span class=”text favorite-text”>Add to Favorites</span>

      </a>

    </div>

  </div>

  <div class=”demo demo-5″>

    <div class=”contain-all”>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin First Truck Icon–>

        <svg class=”truck-icon” version=”1.1″ width=”133px” height=”111px” viewBox=”0 0 96.71 73.53″>

          <path class=”truck-back-1″ fill=”#e3da74″ stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M56.439,43.455c0,1.488-1.206,2.695-2.695,2.695H5.541c-1.488,0-2.695-1.206-2.695-2.695V5.432c0-1.488,1.206-2.695,2.695-2.695  h48.203c1.488,0,2.695,1.206,2.695,2.695V43.455z”/>

          <line class=”truck-base-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”93.414″ y1=”51.539″ x2=”3.296″ y2=”51.539″/>

          <path class=”truck-cab-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.379,51.539V10.386c0-1.297,1.061-2.357,2.357-2.357H80.8c1.297,0,2.827,0.951,3.4,2.114l6.824,13.833  c0.574,1.163,1.043,3.175,1.043,4.472v23.091″/>

          <circle class=”tire-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”18.239″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.425,65.193l7.628-7.304 M14.587,57.728l7.304,7.628″/>

          <circle class=”tire-1″ class=”tire” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”77.247″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M73.433,65.193l7.628-7.304 M73.595,57.728l7.304,7.628″/>

          <path class=”window-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M84.283,25.192c0,1.488-0.757,2.695-2.245,2.695H69.612c-1.488,0-2.695-1.206-2.695-2.695v-8.383c0-1.488,1.206-2.695,2.695-2.695 h8.383c1.488,0,2.395,0.748,3.144,2.695L84.283,25.192z”/>

        </svg>

        <!–End First Truck Icon–>

        <img class=”inside-truck” src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/insidetruck.svg” alt=”Orange Inside Truck” />

        <span class=”text truck-text”>Ground Shipping</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Second Truck Icon–>

        <svg class=”truck-icon” version=”1.1″ width=”133px” height=”111px” viewBox=”0 0 96.71 73.53″>

          <path class=”truck-back-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M56.439,43.455c0,1.488-1.206,2.695-2.695,2.695H5.541c-1.488,0-2.695-1.206-2.695-2.695V5.432c0-1.488,1.206-2.695,2.695-2.695 h48.203c1.488,0,2.695,1.206,2.695,2.695V43.455z”/>

          <line class=”truck-base-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”93.414″ y1=”51.539″ x2=”3.296″ y2=”51.539″/>

          <path class=”truck-cab-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.379,51.539V10.386c0-1.297,1.061-2.357,2.357-2.357H80.8c1.297,0,2.827,0.951,3.4,2.114l6.824,13.833     c0.574,1.163,1.043,3.175,1.043,4.472v23.091″/>

          <circle class=”tire-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”18.239″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.425,65.193l7.628-7.304 M14.587,57.728l7.304,7.628″/>

          <circle class=”tire-2″ class=”tire” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”77.247″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M73.433,65.193l7.628-7.304 M73.595,57.728l7.304,7.628″/>

          <path class=”window-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M84.283,25.192c0,1.488-0.757,2.695-2.245,2.695H69.612c-1.488,0-2.695-1.206-2.695-2.695v-8.383c0-1.488,1.206-2.695,2.695-2.695      h8.383c1.488,0,2.395,0.748,3.144,2.695L84.283,25.192z”/>

        </svg>

        <!–End Second Truck Icon–>

        <img class=”truck-grapes” src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/grapes.svg” alt=”Grapes Icon” />

        <span class=”text truck-text”>Ground Shipping</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Third Truck Icon–>

        <svg class=”truck-icon” version=”1.1″ width=”133px” height=”111px” viewBox=”0 0 96.71 73.53″>

          <path class=”truck-back-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M56.439,43.455c0,1.488-1.206,2.695-2.695,2.695H5.541c-1.488,0-2.695-1.206-2.695-2.695V5.432c0-1.488,1.206-2.695,2.695-2.695   h48.203c1.488,0,2.695,1.206,2.695,2.695V43.455z”/>

          <line class=”truck-base-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”93.414″ y1=”51.539″ x2=”3.296″ y2=”51.539″/>

          <path class=”truck-cab-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.379,51.539V10.386c0-1.297,1.061-2.357,2.357-2.357H80.8c1.297,0,2.827,0.951,3.4,2.114l6.824,13.833     c0.574,1.163,1.043,3.175,1.043,4.472v23.091″/>

          <circle class=”tire-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”18.239″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.425,65.193l7.628-7.304 M14.587,57.728l7.304,7.628″/>

          <circle class=”tire-3″ class=”tire” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”77.247″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M73.433,65.193l7.628-7.304 M73.595,57.728l7.304,7.628″/>

          <path class=”window-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M84.283,25.192c0,1.488-0.757,2.695-2.245,2.695H69.612c-1.488,0-2.695-1.206-2.695-2.695v-8.383c0-1.488,1.206-2.695,2.695-2.695       h8.383c1.488,0,2.395,0.748,3.144,2.695L84.283,25.192z”/>

        </svg>

        <!–End Third Truck Icon–>

        <img class=”dashes” src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/dashes.svg” alt=”Motion Lines” />

        <img class=”watermelon-truck” src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/watermelon.svg” alt”Watermelon Icon” />

        <span class=”text truck-text”>Ground Shipping</span>

      </a>

    </div>

  </div>

  <footer>

    <div class=”contain-footer-info”>

     <span class=”made-with”>Made with</span>

     <svg class=”by-heart” version=”1.1″ width=”50px” height=”34px” viewBox=”0 0 90.65 85.04″>

        <path class=”by-heart-path” fill=”none” stroke=”#ea6b46″ stroke-width=”5″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

        M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041

        C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522″/>

      </svg>

      <span class=”by”>by<a href=”http://jonibologna.com/” class=”byline”>Joni Trythall</a></span>

    </div>

  </footer>

کد CSS

/* Basic Styling */

header {

  background: #e3da74;

  width: 100%;

  height: 300px;

}

.shop-sign {

  position: absolute;

  left: 50%;

  margin-left: -190px;

  margin-top: 50px;

  width: 380px;

}

.demo {

  position: relative;

  font-family: ‘Nunito’, sans-serif;

  color: white;

  width: 100%;

  height: 650px;

}

.contain-all {

  margin: auto;

  width: 150px;

}

a {

  position: relative;

  display: block;

  margin: auto;

  padding-top: 50px;

  text-decoration: none;

  color: white;

  width: 150px;

  height: 150px;

}

a:visited {

  text-decoration: none;

  color: inherit;

}

a:active {

  text-decoration: none;

  color: inherit;

}

.icon-hook {

  position: relative;

}

.icon-hook:after {

  content: “”;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.icon-hook > svg {

  pointer-events: none;

}

.contain-card {

  padding-top: 75px;

  height: 350px;

}

.demo-1 {

  background: #e3da74;

}

.demo-2 {

  background: #b2c460;

}

.demo-3 {

  background: #f69159;

}

.demo-4 {

  background: #fcab54;

}

.demo-5 {

  background: #e3da74;

}

svg {

  position: absolute;

  z-index: 5;

}

.text {

  position: absolute;

  font-size: 20px;

  font-weight: bold;

}

.save-text {

  top: 140px;

}

.gift-text {

  top: 150px;

  left: 2px;

}

.favorite-text {

  top: 160px;

  left: -15px;

  width: 180px;

}

.truck-text {

  top: 170px;

  left: -20px;

  width: 180px;

}

footer {

  position: relative;

  background: #e3da74;

  height: 250px;

  font-family: ‘Nunito’, sans-serif;

  color: white;

  font-size: 18px;

}

.by-heart {

  position: absolute;

  top: -2px;

}

.by {

  margin-left: 55px;

}

.byline {

  position: absolute;

  top: 35px;

  left: 120px;

  padding: 0;

  margin: 0;

  height: 20px;

}

.byline:hover {

  color: #fcab54;

}

.contain-footer-info {

  position: absolute;

  top: 100px;

  left: 50%;

  margin-left: -200px;

  text-align: center;

  width: 400px;

  height: 50px;

}

/* Cart Demo 1 */

.check-1 {

  opacity: 0;

  -webkit-transform-origin: center;

}

.apple-1 {

  position: absolute;

  opacity: 0;

  top: 30px;

  left: 42px;

  width: 45px;

  -webkit-transform: rotate(-40deg);

}

.active .apple-1 {

  -webkit-animation: add-apple-1 2s forwards;

}

.active .cart-plus-1 {

  -webkit-animation: added 1s forwards;

}

.active .check-1 {

  -webkit-animation: checked 1s forwards;

}

@-webkit-keyframes add-apple-1 {

  50% {

    opacity: 1;

  }

  to {

    -webkit-transform: translateY(57px);

    opacity: 1;

  }

}

@-webkit-keyframes added {

  1% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

@-webkit-keyframes checked {

  50% {

    opacity: 1;

    -webkit-transform: scale(1.5);

  }

  100% {

    opacity: 1;

  }

}

/* Cart Demo 2 */

.cart-2 {

  padding-top: 50px;

}

.lime-1 {

  position: absolute;

  top: 96px;

  left: 37px;

  -webkit-transform: rotate(-20deg);

  opacity: 0;

  width: 55px;

}

.center-line {

  stroke-dasharray: 50; 

}

.check-2 {

  opacity: 0;

}

.active .center-line {

  -webkit-animation: draw-cart 3s forwards;

}

.active .lime-1 {

  -webkit-animation: lime-appear 1s 1s forwards;

}

.active .cart-plus-2 {

  stroke: #7aa23f;

}

@-webkit-keyframes lime-appear {

  50% {

    opacity: 1;

    -webkit-transform: scale(.5);

  }

  100% {

    opacity: 1;

  }

}

@-webkit-keyframes draw-cart {

  0% {

    stroke-dashoffset: 0;

  }

  25% {

    stroke-dashoffset: 50;

  }

  50% {

    stroke-dashoffset: 50;

  }

  75% {

    stroke-dashoffset: 50;

  }

  100% {

    stroke-dashoffset: 0;

  }

}

/* Cart Demo 3 */

.one {

  position: absolute;

  top: 65px;

  left: 47px;

  color: #ef9234;

  font-size: 55px;

  opacity: 0;

  -webkit-transform: scale(.1) rotate(260deg);

}

.center-line-3 {

  stroke-dasharray: 50;

}

.active .center-line-3 {

  -webkit-animation: remove-middle 1s forwards;

}

.active .one {

  -webkit-animation: count 1500ms 500ms forwards;

}

.active .cart-plus-3 {

  stroke: #7aa23f;

}

@-webkit-keyframes count {

  50% {

    opacity: 1;

    -webkit-transform: translateY(-45px);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateY(15px);

  }

}

@-webkit-keyframes remove-middle {

  to {

    stroke-dashoffset: 50;

  }

}

/* Save Demo 1 */

.star-icon {

  left: 25px;

  width: 80px;

}

.star-dashes-1 {

  opacity: 0;

}

.star-check-1 {

  opacity: 1;

  stroke-dasharray: 22;

  stroke-dashoffset: 22;

}

.active .star-dashes-1 {

  -webkit-animation: flash-1 1s forwards;

}

.active .star-check-1 {

  -webkit-animation: star-checked-1 1s forwards;

}

@-webkit-keyframes flash-1 {

  50% {

    opacity: 1;

  }

}

@-webkit-keyframes star-checked-1 {

  50% {

    stroke-dashoffset: 0;

  }

  75% {

    stroke-dashoffset: 0;

    -webkit-transform-origin: center;

    -webkit-transform: rotate(360deg) scale(1.5);

  }

  100% {

    stroke-dashoffset: 0;

  }

}

/* Save Demo 2 */

.star-dashes-2 {

  opacity: 0;

  -webkit-transform-origin: center;

  -webkit-transform: scale(.5);

}

.active .star-dashes-2 {

  -webkit-animation: dashes-2 2s forwards;

}

.active .main-star-2 {

  fill: yellow;

  -webkit-transform: rotate(360deg);

}

@-webkit-keyframes dashes-2 {

  50% {

    opacity: 1;

    stroke: #f9f706;

    -webkit-transform: rotate(360deg);

  }

}

/* Save Demo 3 */

.main-star-4 {

  z-index: 10;

  stroke-dasharray: 310;

  stroke-dashoffset: 310;

}

.active .main-star-4 {

  -webkit-animation: draw-star-3 2s forwards;

  fill: #f9f706;

}

@-webkit-keyframes draw-star-3 {

  50% {

    stroke-dashoffset: 0;

  }

}

/* Gift Demo 1 */

.box-icon {

  left: 30px;

}

.bow-1 {

  stroke-dasharray: 140;

  stroke-dashoffset: -140;

}

.bow-1-right {

  stroke-dashoffset: 140;

}

.active .bow-1 {

  -webkit-animation: draw-bow-1 1s forwards;

}

.active .bow-1-right {

  -webkit-animation: draw-bow-1 1s 1s forwards;

}

@-webkit-keyframes draw-bow-1 {

  1% {

    opacity: 1;

  }

  100% {

    stroke-dashoffset: 0;

  }

}

/* Gift Demo 2 */

.bow-2 {

  opacity: 0;

  stroke-dasharray: 140;

  stroke-dashoffset: 140;

}

.lemon-gift-2 {

  position: absolute;

  top: 97px;

  left: 42px;

  -webkit-tranform-origin: center;

  -webkit-transform: scale(.5) rotate(-180deg);

  opacity: 0;

  width: 50px;

}

.active .box-top-2 {

  -webkit-animation: open-2 2s forwards;

}

.active .lemon-gift-2 {

  -webkit-animation: lemon-appear-2 1s 500ms forwards;

}

.active .bow-2 {

  -webkit-animation: draw-bow-2 1s 2s forwards;

}

@-webkit-keyframes draw-bow-2 {

  1% {

    opacity: 1;

  }

  100% {

    opacity: 1;

    stroke-dashoffset: 0;

  }

}

@-webkit-keyframes open-2 {

  50% {

    -webkit-transform: translateY(-25px);

  }

}

@-webkit-keyframes lemon-appear-2 {

  to {

    opacity: 1;

    -webkit-transform: rotate(-20deg) scale(1);

  }

}

/* Gift Demo 3 */

.bow-3 {

  opacity: 0;

  stroke-dasharray: 140;

  stroke-dashoffset: -140;

}

.lime-2 {

  position: absolute;

  top: 98px;

  left: 43px;

  -webkit-transform: rotate(-20deg);

  opacity: 0;

  width: 48px;

}

.active .box-icon-3 {

  -webkit-animation: expand-gift 1s 1s forwards;

}

.active .lime-2 {

  -webkit-animation: show-lime 1s forwards, expand-gift 1s 1s forwards;

}

.active .bow-3 {

  -webkit-animation: draw-bow-3 1s 1s forwards;

}

@-webkit-keyframes show-lime {

  to {

    opacity: 1;

  }

}

@-webkit-keyframes draw-bow-3 {

  1% {

    opacity: 1;

  }

  100% {

    opacity: 1;

    stroke-dashoffset: 0;

  }

}

@-webkit-keyframes expand-gift {

  50% {

    -webkit-transform: scale(1.2);

  }

}

/* Favorites Demo 1 */

.heart-icon {

  top: 75px;

  left: 22px;

}

.loader-1 {

  opacity: 0;

  -webkit-transform: scale(.3);

}

.active .heart-1 {

  -webkit-transform-origin: center;

  -webkit-animation: grow-heart 500ms 2s forwards;

  stroke: #ec6d46;

}

.active .loader-1-l {

  -webkit-animation: load-1 500ms 500ms forwards;

}

.active .loader-1-m {

  -webkit-animation: load-1 500ms 1s forwards;

}

.active .loader-1-r {

  -webkit-animation: load-1 500ms 1500ms forwards;

}

@-webkit-keyframes load-1 {

  50% {

    opacity: 1;

    -webkit-transform-origin: center;

    -webkit-transform: scale(2);

  }

}

@-webkit-keyframes grow-heart {

  50% {

    -webkit-transform: scale(.3);

  }

}

/* Favorites Demo 2 */

.heart-2 {

  -webkit-transform-origin: bottom;

  transition: stroke 1s 1s ease;

}

.active .heart-2 {

  -webkit-animation: heart-beat 1s forwards;

  stroke: #ec6d46;

}

@-webkit-keyframes heart-beat {

  25% {

    -webkit-transform: scale(.3);

  }

  50% {

    -webkit-transform: scale(1);

  }

  75% {

    -webkit-transform: scale(.3);

  }

  100% {

    -webkit-transform: scale(1);

  }

}

/* Favorites Demo 3 */

.heart-3 {

  -webkit-transform-origin: center;

  stroke-dasharray: 135;

}

.active .heart-3 {

  -webkit-animation: draw-heart-3 2s forwards;

  stroke: #ec6d46;

}

@-webkit-keyframes draw-heart-3 {

  0% {

    stroke-dashoffset: -135;

    -webkit-transform: scale(.2) rotate(-280deg);

  }

  30% {

    stroke-dashoffset: 135;

    -webkit-transform: scale(.4) rotate(280deg);

  }

  60% {

    stroke-dashoffset: -135;

     -webkit-transform: scale(.6);

  }

  100% {

    stroke-dashoffset: 0;

    stroke: #ec6d46;

  }

}

/* Truck Icon Demo 1 */

.truck-icon {

  top: 60px;

}

.inside-truck {

  position: absolute;

  top: 67px;

  left: 2px;

  width: 77px;

}

.active .truck-back-1 {

  -webkit-transform-origin: center;

  -webkit-animation: truck-flip 2s forwards, add-orange 1s 1s forwards;

}

.active .inside-truck {

  -webkit-transform-origin: center;

  -webkit-animation: truck-flip 2s forwards;

}

.active .tire-plus-1 {

  -webkit-animation: turn-plus 1s 500ms forwards;

  stroke: #7aa23f;

}

@-webkit-keyframes turn-plus {

  50% {

    -webkit-transform-origin: center;

    -webkit-transform: scale(1.5);

  }

  100% {

    -webkit-transform-origin: center;

    -webkit-transform: rotate(45deg);

  }

}

@-webkit-keyframes truck-flip {

  50% {

    -webkit-transform: scale(.7);

  }

  100% {

    -webkit-transform: scale(1) rotateY(180deg);

  }

}

@-webkit-keyframes add-orange {

  to {

    fill: none;

    stroke: none;

  }

}

/* Truck Icon Demo 2 */

.truck-grapes {

  position: absolute;

  top: 67px;

  left: 20px;

  -webkit-transform-origin: center;

  -webkit-transform: scale(.2);

  opacity: 0;

  width: 40px;

}

.active .truck-grapes {

  -webkit-animation: add-truck-grapes 2s forwards;

}

.active .tire-plus-2 {

  -webkit-transform-origin: center;

  -webkit-animation: drive-plus 1s forwards, enlarge-plus-2 1s 1s forwards;

  stroke: #7aa23f;

}

.active .tire-2 {

  -webkit-transform-origin: center;

  -webkit-animation: enlarge-plus-2 1s 1s forwards;

  stroke: #7aa23f;

}

@-webkit-keyframes drive-plus {

  1% {

    -webkit-transform: rotate(-20000deg);

  }

}

@-webkit-keyframes enlarge-plus-2 {

  50% {

    -webkit-transform: rotate(45deg) scale(1.5);

  }

  100% {

    -webkit-transform: rotate(45deg);

  }

}

@-webkit-keyframes add-truck-grapes {

  1% {

    opacity: 1;

  }

  75% {

    opacity: 1;

    -webkit-transform: scale(1.2) rotate(260deg);

  }

  100% {

    opacity: 1;

    -webkit-transform: scale(1) rotate(300deg);

  }

}

/* Truck Icon Demo 3 */

.dashes {

  position: absolute;

  top: 100px;

  left: -50px;

  opacity: 0;

  width: 40px;

}

.watermelon-truck {

  position: absolute;

  top: 60px;

  left: 6px;

  z-index: 5;

  -webkit-transform: rotateX(90deg);

  width: 70px;

}

.active .watermelon-truck {

  -webkit-animation: add-melon 1s forwards;

}

.active .dashes {

  -webkit-animation: fast 1s 500ms forwards;

}

.active .tire-plus-3 {

  -webkit-transform-origin: center;

  -webkit-animation: drive-3 1500ms 500ms forwards;

  stroke: #7aa23f;

}

@-webkit-keyframes drive-3 {

  100% {

    -webkit-transform: rotate(45deg);

  }

}

@-webkit-keyframes fast {

  to {

    opacity: 1;

  }

}

@-webkit-keyframes add-melon {

  to {

    -webkit-transform: rotateX(360deg);

  }

}

/* Footer Heart */

.by-heart-path {

  stroke-dasharray: 7;

  -webkit-animation: move-heart 1s infinite;

}

@-webkit-keyframes move-heart {

  50% {

    stroke-dashoffset: 40;

  }

}

/* Media query for layout */

@media (min-width: 800px) {

  .demo {

    height: 250px;

  }

  .contain-all {

    margin: auto;

    width: 765px;

  }

  a {

    display: inline-block;

    margin-right: 150px;

  }

  footer .byline {

    display: block;

    margin-right: 0;

  }

  .contain-icon:last-of-type {

    margin-right: 0;

  }

}

کد JS

// Chrome only for now

// Get a list of all svg elements

icons = document.querySelectorAll(‘.icon-hook’);

// Cycle through list

for (var i = 0; i < icons.length; i++) {

  icons[i].addEventListener(‘click’, function(event) {

    event.preventDefault();

    var icon = this;

    var currentClass = icon.getAttribute(‘class’); // The starting class

    console.log(icon);

    if (currentClass.indexOf(‘active’) > -1) {

      // Remove .active

      icon.setAttribute(‘class’, currentClass.replace(‘ active’, ”));

    } else {

      // Add .active

      icon.setAttribute(‘class’, currentClass + ‘ active’);

    }

  }, false);

}

Submit button .2 ( دکمه ارسال )

برای ارسال بر روی submit کلیک کنید و دکمه متحرکی که فرآیند بارگذاری را نشان می دهد می آید سپس با یک تیک پیغام شما ارسال می شود!

برای دیدن این انیمیشن اینجا را کلیک کنید.

کد HTML

<div class=”center-component”>

  <button class=”colins-submit”>

    <svg width=”196″ height=”70″

         viewPort=”0 0 196 70″ version=”1.1″

         xmlns=”http://www.w3.org/2000/svg”>

      

      <rect class=”btn-shape btn-bg”

            x=”3″ y=”3″

            width=”190″ height=”64″

            rx=”32″ ry=”32″

            fill=”#ffffff”

            fill-opacity=”1″

            stroke=”#ccc” stroke-width=”4″

            />

      <rect class=”btn-shape btn-color”

            x=”3″ y=”3″

            width=”190″ height=”64″

            rx=”32″ ry=”32″

            fill=”#ffffff”

            fill-opacity=”0″

            stroke=”rgb(30,205,151)” stroke-width=”4″

            />

      <text class=”checkNode” x=”96″ y=”40″

            font-family=”Montserrat”

            font-size=”22″

            fill-opacity=”1″

            text-anchor=”middle”

            fill=”rgb(255,255,255)” >

       

      </text>

      <text class=”textNode” x=”96″ y=”40″

            transform=”scale(1)”

            font-family=”Montserrat”

            font-size=”16″

            fill-opacity=”1″

            text-anchor=”middle”

            fill=”rgb(30,205,151)” >

        Submit

      </text>

    </svg>

  </button>

  <p>My <a href=”http://www.greensock.com/gsap-js/” target=”_blank”>Greensock</a> controlled version of <a href=”https://dribbble.com/shots/1426764-Submit-Button” target=”_blank”>Colin Garven’s Submit button</a>. No CSS Keyframes, all one JS timeline + SVG.</p>

</div>

کد CSS

body {

  text-align: center;

}

.center-component {

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}

button.colins-submit {

  background: transparent;

  border: none;

}

button.colins-submit.is-active {

  cursor: default;

}

button.colins-submit:focus {

  outline: none;

}

button.colins-submit::-moz-focus-inner {

  border: 0;

}

button.colins-submit svg text {

  font-family: ‘Montserrat’, sans-serif;

}

button.colins-submit svg text.textNode {

  fill: #1ecd97;

}

button.colins-submit svg text.checkNode {

  fill-opacity: 0;

}

button.colins-submit svg rect.btn-shape.btn-bg {

  stroke: #c8c8c8;

  fill: white;

}

button.colins-submit svg rect.btn-shape.btn-color {

  stroke: #1ecd97;

  fill: white;

  stroke-dasharray: 453;

  stroke-dashoffset: 0;

}

p {

  font-family: Montserrat, sans-serif;

  color: #575757;

  font-size: 1rem;

  max-width: 330px;

}

p a {

  color: #1ecd97;

}

p a:hover, p a:active {

  color: #07e5a0;

}

p a:visited {

  color: #36b68e;

}

کد JS

$(function(){

  

  //Create variables we will be referencing in our tweens.

  var white = ‘rgb(255,255,255)’;

  var seafoam = ‘rgb(30,205,151)’; 

  $buttonShapes = $(‘rect.btn-shape’);

  $buttonColorShape = $(‘rect.btn-shape.btn-color’);

  $buttonText = $(‘text.textNode’);

  $buttonCheck = $(‘text.checkNode’);

  

  //These are the button attributes which we will be tweening

  //This will be used with GSAP and the function below to tween

  var buttonProps = {

    buttonWidth : $buttonShapes.attr(‘width’),

    buttonX : $buttonShapes.attr(‘x’),

    buttonY : $buttonShapes.attr(‘y’),

    textScale : 1,

    textX : $buttonText.attr(‘x’),

    textY : $buttonText.attr(‘y’)

  };

  

  //This is the update handler that lets us tween attributes

  function onUpdateHandler(){

    $buttonShapes.attr(‘width’, buttonProps.buttonWidth);

    $buttonShapes.attr(‘x’, buttonProps.buttonX);

    $buttonShapes.attr(‘y’, buttonProps.buttonY);

    $buttonText.attr(‘transform’, “scale(” + buttonProps.textScale + “)”);

    $buttonText.attr(‘x’, buttonProps.textX);

    $buttonText.attr(‘y’, buttonProps.textY);

  }

  

  //Finally, create the timelines

  var hover_tl = new TimelineMax({

    tweens:[

      TweenMax.to( $buttonText, .15, { fill:white } ),

      TweenMax.to( $buttonShapes, .25, { fill: seafoam })

    ]

  });

  hover_tl.stop();

  

  var tl = new TimelineMax({onComplete:bind_mouseenter});

  //This is the initial transition, from [submit] to the circle

  tl.append( new TimelineMax({

    align:”start”,

    tweens:[

      TweenMax.to( $buttonText, .15, { fillOpacity:0 } ),

      TweenMax.to( buttonProps, .25, { buttonX: (190-64)/2, buttonWidth:64, onUpdate:onUpdateHandler } ),

      TweenMax.to( $buttonShapes, .25, { fill: white })

    ],

    onComplete:function(){

      $buttonColorShape.css({

        ‘strokeDasharray’:202,

        ‘strokeDashoffset’:202

      });

    }

  }) );

  

  //The loading dasharray offset animation…

  tl.append(TweenMax.to($buttonColorShape, 1.2, {

    strokeDashoffset:0,

    ease:Quad.easeIn,

    onComplete:function(){

      //Reset these values to their defaults.

      $buttonColorShape.css({

        ‘strokeDasharray’:453,

        ‘strokeDashoffset’:0

      });

    }

  }));

  //The Finish – transition to check

  tl.append(new TimelineMax({

    align:”start”,

    tweens:[

      TweenMax.to($buttonShapes, .3, {fill:seafoam}),

      TweenMax.to( $buttonCheck, .15, { fillOpacity:1 } ),

      TweenMax.to( buttonProps, .25, { buttonX: 3, buttonWidth:190, onUpdate:onUpdateHandler } )

    ]

  }));

  

  //The Reset – back to the beginning

  //For demo only – probably you would want to remove this.

  tl.append(TweenMax.to($buttonCheck, .1, {delay:1,fillOpacity:0}));

  tl.append(new TimelineMax({

    align:”start”,

    tweens:[

      TweenMax.to($buttonShapes, .3, {fill:white}),

      TweenMax.to($buttonText, .3, {fill:seafoam, fillOpacity:1})

    ],

    onComplete:function() {

      $(‘.colins-submit’).removeClass(‘is-active’);

    }

  }));

  tl.stop();

  

  //– On Click, we launch into the cool transition

  $(‘.colins-submit’).on(‘click’, function(e) {

    //– Add this class to indicate state

    $(e.currentTarget).addClass(‘is-active’);

    tl.restart();

    $(‘.colins-submit’).off(‘mouseenter’);

    $(‘.colins-submit’).off(‘mouseleave’);

  });

  

  bind_mouseenter();

  

  function bind_mouseenter() {

    $(‘.colins-submit’).on(‘mouseenter’, function(e) {

      hover_tl.restart();

      $(‘.colins-submit’).off(‘mouseenter’);

      bind_mouseleave();

    });

  }

  function bind_mouseleave() { 

    $(‘.colins-submit’).on(‘mouseleave’, function(e) {

      hover_tl.reverse();

      $(‘.colins-submit’).off(‘mouseleave’);

      bind_mouseenter();      

    });

  }

  

});

Flipside button .3 ( دکمه حذف کردن )

یک انیمیشن جالب برای حذف کردن چیزی که بسیار حرفه ای طراحی شده است و در هنگامی که شما بر روی آن کلیک می کنید یک تلنگر به شما میزند که مطمئن شود شما می خواهید فایل مورد نظر را حذف کنید.

برای دیدن این انیمیشن اینجا را کلیک کنید.

کد HTML

<div class=”btn”>

  <div class=”btn-back”>

    <p>Are you sure you want to do that?</p>

    <button class=”yes”>Yes</button>

    <button class=”no”>No</button>

  </div>

  <div class=”btn-front”>Delete</div>

</div>

<p class=”description”>Try clicking different sides of the button – <a href=”http://lab.hakim.se/” target=“_blank”>lab.hakim.se</a></p>

کد CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);

html, body {

  width: 100%;

  height: 100%;

  margin: 0;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}

body {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  font-family: Roboto, “Helvetica Neue”, sans-serif;

  font-size: 18px;

  -webkit-perspective: 1000px;

          perspective: 1000px;

  background-color: #f5f5f5;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

      -ms-flex-direction: column;

          flex-direction: column;

  -webkit-box-pack: center;

  -webkit-justify-content: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-align: center;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;

}

.description {

  margin-top: 50px;

  text-align: center;

  color: #999;

  -webkit-transition: opacity 0.3s ease;

  transition: opacity 0.3s ease;

}

.description a {

  color: #4A9DF6;

  text-decoration: none;

}

.btn.is-open ~ .description {

  opacity: 0;

}

.btn {

  display: block;

  position: relative;

  width: 200px;

  height: 80px;

  -webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;

  -webkit-transform-origin: 50% 50%;

          transform-origin: 50% 50%;

  text-align: center;

}

.btn-front {

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  line-height: 80px;

  background-color: #F44336;

  color: #fff;

  cursor: pointer;

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;

  -webkit-tap-highlight-color: transparent;

  -webkit-transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);

  transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);

}

.btn-front:hover {

  background-color: #f77066;

}

.btn.is-open .btn-front {

  pointer-events: none;

  line-height: 160px;

}

.btn-back {

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: #eee;

  color: #222;

  -webkit-transform: translateZ(-2px) rotateX(180deg);

          transform: translateZ(-2px) rotateX(180deg);

  overflow: hidden;

  -webkit-transition: box-shadow 0.8s ease;

  transition: box-shadow 0.8s ease;

}

.btn-back p {

  margin-top: 27px;

  margin-bottom: 25px;

}

.btn-back button {

  padding: 12px 20px;

  width: 30%;

  margin: 0 5px;

  background-color: transparent;

  border: 0;

  border-radius: 2px;

  font-size: 1em;

  cursor: pointer;

  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;

  -webkit-transition: background 0.15s ease;

  transition: background 0.15s ease;

}

.btn-back button:focus {

  outline: 0;

}

.btn-back button.yes {

  background-color: #2196F3;

  color: #fff;

}

.btn-back button.yes:hover {

  background-color: #51adf6;

}

.btn-back button.no {

  color: #2196F3;

}

.btn-back button.no:hover {

  background-color: #ddd;

}

.btn.is-open .btn-back {

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);

}

.btn[data-direction=”left”] .btn-back,

.btn[data-direction=”right”] .btn-back {

  -webkit-transform: translateZ(-2px) rotateY(180deg);

          transform: translateZ(-2px) rotateY(180deg);

}

.btn.is-open {

  width: 400px;

  height: 160px;

}

.btn[data-direction=”top”].is-open {

  -webkit-transform: rotateX(180deg);

          transform: rotateX(180deg);

}

.btn[data-direction=”right”].is-open {

  -webkit-transform: rotateY(180deg);

          transform: rotateY(180deg);

}

.btn[data-direction=”bottom”].is-open {

  -webkit-transform: rotateX(-180deg);

          transform: rotateX(-180deg);

}

.btn[data-direction=”left”].is-open {

  -webkit-transform: rotateY(-180deg);

          transform: rotateY(-180deg);

}

کد JS

var btn = document.querySelector( ‘.btn’ );

var btnFront = btn.querySelector( ‘.btn-front’ ),

    btnYes = btn.querySelector( ‘.btn-back .yes’ ),

    btnNo = btn.querySelector( ‘.btn-back .no’ );

btnFront.addEventListener( ‘click’, function( event ) {

  var mx = event.clientX – btn.offsetLeft,

      my = event.clientY – btn.offsetTop;

  var w = btn.offsetWidth,

      h = btn.offsetHeight;

  var directions = [

    { id: ‘top’, x: w/2, y: 0 },

    { id: ‘right’, x: w, y: h/2 },

    { id: ‘bottom’, x: w/2, y: h },

    { id: ‘left’, x: 0, y: h/2 }

  ];

  

  directions.sort( function( a, b ) {

    return distance( mx, my, a.x, a.y ) – distance( mx, my, b.x, b.y );

  } );

  

  btn.setAttribute( ‘data-direction’, directions.shift().id );

  btn.classList.add( ‘is-open’ );

} );

btnYes.addEventListener( ‘click’, function( event ) {

  btn.classList.remove( ‘is-open’ );

} );

btnNo.addEventListener( ‘click’, function( event ) {

  btn.classList.remove( ‘is-open’ );

} );

function distance( x1, y1, x2, y2 ) {

  var dx = x1-x2;

  var dy = y1-y2;

  return Math.sqrt( dx*dx + dy*dy );

}

با تشکر از همراهی شما

_________________________________________________

تاریخ ارسال
21 تیر 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه

اشتباهات رایج در طراحی وب

ما در این مقاله قصد داریم تا اشتباهات رایج در طراحی وب را به شما بگوییم تا با جلوگیری از انجام و یا تکرار آنها بتوانید سایت خودتان را بهینه تر و کاربر پسند تر کنید . در مقاله قبلی شما را با برخی از اشتباهات رایج در طراحی وب آشنا کردیم .

اشتباهات ظاهری سایت :

  • عدم رعایت صحت نمایش سایت در رزولوشن های مختلف

دستگاه هایی که کاربران استفاده می نمایند با یکدیگر متفاوت است، بنابراین رزولوشن هر کدام نیز با هم تفاوت دارد. طراحان سایت می بایست از رزولوشن استاندارد سایت یعنی 768 * 1024 استفاده نمایند. در این صورت می توانند اطمینان حاصل نمایند که سایت در تمام رزولوشن ها و حتی در گوشی های هوشمند نیز به درستی نمایش داده خواهد شد.

  • عدم در نظر گرفتن نمایش صحیح سایت در گوشی های هوشمند

امروزه اغلب کاربران از گوشی های هوشمند خود به جهت جستجو در اینترنت استفاده می نمایند. چنانچه طراحان و مدیران سایت علاقه ای به درست نمایش دادن سایت خود در این دستگاه ها نشان ندهند، در مدت زمان بسیار کمی بازدیدکنندگان خود را از دست خواهند داد.

  • طراحی سایت از روی سایت های دیگر

زمانی که فردی طراحی وب سایت خود را از روی یک سایت دیگر انجام می دهد و عینا آن سایت را برای خود به همراه مطالب مورد نظر پیاده سازی می نماید، در ذهن بازدید کننده، این سایت از جذابیت خاصی برخوردار نخواهد بود و بدون آنکه کمترین زمانی صرف نماید، آنرا ترک خواهد نمود. بنابراین توصیه می شود چنانچه شکل ظاهری سایت خود را همانند نمونه ای دیگر طراحی می کنید با تغییرات اندک اما اساسی این طرز فکر را در ذهن بیننده از بین ببرید و طرحی نو و منحصر به فرد خلق نمایید.

  • استفاده از فلش و جاوا

این درست است که سایت های فلش از جذابیت خاصی در بین نمونه های دیگر سایت برخوردارند، اما همین جذابیت باعث فیلتر کردن بازدیدکنندگان می شود. دلیل این امر را میتوان اینگونه گفت که اجرای این نوع سایت ها نیاز به مرورگر های حرفه ای دارد و عملا نمیتوان تضمین نمود که تمام بازدید کنندگان از این مرورگر ها استفاده می نمایند.

  • استفاده از غلط های املایی

یکی از مواردی که می تواند در بیننده تاثیر منفی بسزایی داشته باشد، غلط های املایی موجود در محتویات سایت می باشد. طراحان باید حتی الامکان از این مورد اجتناب نمایند.

  • استفاده از رنگ های آزار دهنده

استفاده از رنگ هایی که برای بیننده ایجاد ناراحتی مینماید، مانند رنگ های تند و فسفری که چشم را اذیت می نمایند، یکی از دافعه های مهم در طراحی صفحات وب سایت به شمار میرود. همچنین طراحان می بایست از رنگ هایی که به نوعی در کنار یکدیگر از هارمونی زیبایی برخوردار نیستند اجتناب نمایند.

اشتباهات SEO :

  •  عدم بروزرسانی سایت

تمامی موتورهای جستجو تمایل دارند سایت هایی را مشاهده نمایند که مطالب موجود در آن بصورت دائمی توسط صاحب آن بروز رسانی شود. بنابراین با عدم رسیدگی به موقع و منظم به سایت خود بتدریج مرگ آنرا رقم خواهید زد.

  • افراط در بهینه سازی سایت

توجه به المان های بهینه سازی یک سایت یکی از اساسی ترین مراحل طراحی و ایجاد سایت می باشد، اما افراط در این معقوله نیز یکی از اشتباهات بزرگ محسوب میشود. برای مثال اگر کلمات کلیدی را به تکرار در یک صفحه نشانه گذاری نمایید، موتور جستجو آنرا تقلب و در نتیجه رنکینگ مورد پسند را به سایت اختصاص نخواهد داد.

یکی از مراحل طراحی یک سایت خوب، بررسی استاندارد W3C می باشد. چنانچه طراحان از این مورد غافل شوند، موتورهای جستجو به خوبی سایت را بررسی نکرده و رنکینگ آنرا بالا نخواهند برد.

  • عدم بهینه سازی و اپتیمایز CSS ها

زمانی که در یک سایت از CSS های تکراری و Optimize نشده استفاده می شود، سرعت بارگذاری آنها در سایت به مراتب بیشتر از زمانی است که این عمل را بر روی آنها انجام داده ایم. بنابراین می توان این مورد را به عنوان یکی از اشتباهات رایج در طراحی نامید.

امیدوارم تونسته باشیم با بیان کردن اشتباهات رایج در طراحی وب شما رو با اونها آشنا کنیم . اگر تمایل دارید در مورد این مطالب بیشتر بدانید آموزش سئو و بهینه سازی سایت قطعا مورد نیاز شما خواهد بود .

تاریخ ارسال
4 تیر 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه

اشتباهات رایج در طراحی وب

ما در این مقاله قصد داریم تا اشتباهات رایج در طراحی وب را به شما بگوییم تا با جلوگیری از انجام و یا تکرار آنها بتوانید سایت خودتان را بهینه تر و کاربر پسند تر کنید .

اشتباهات ساختاری :

  • بی هدفی در وب سایت 

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

  • عدم نظم در موضوعات سایت و تعیین آنها بر اساس اولویت درست 

زمانی که قصد راه اندازی وب سایت خود را دارید، به این نکته توجه نمایید که دسته بندی و اولویت بندی موضوعات از نظر کاربر حائز اهمیت است. زمانی که بازدید کننده سایت شما را مشاهده می کند، چنانچه موضوعات به صورت پراکنده در وب سایت قرار بگیرد، وی دچار سردرگمی شده و تمایل به ترک هر چه زود تر وب سایت شما دارد.

  • سرعت کند در بارگذاری صفحات 

زمانی که از تصاویر و صوت های با حجم بالا در سایت خود استفاده می نمایید، به همان اندازه سرعت لود شدن وب سایت شما پایین خواهد آمد و این مورد از حوصله کاربر خارج خواهد بود. در نتیجه به زودی و پیش از بارگذاری کامل سایت، وی آن را ترک خواهد کرد و به دنبال مطلب مورد نیاز خود در وب سایت های دیگر می گردد.

  • عدم تعیین عنوان درست برای لینک های صفحات 

یکی از موارد مهم در طراحی صفحات وب و به خصوص در طراحی صفحه اصلی سایت ، به کار گیری لینک های مفید در آن می باشد. چنانچه این المان ها از عناوین درست برخوردار نباشند، کاربر را دچار از هم گسیختگی می نمایند و وی نمی تواند در ذهن خود به راحتی مسیر های طی شده در سایت شما را به خاطر بسپارد.

  • عدم نمایش صحیح لینک ها در صفحات 

کاربران تمایل دارند به راحتی لینک های صفحات را پیدا و از آنها استفاده نمایند. برای این منظور می توان رنگ نوشته لینک ها را از متون متمایز نمود و یا آنها را در دکمه هایی خاص قرار داد. هم چنین در صورتی که این المان ها در صفحه بسیار کوچک باشند و یا در کنار بقیه المان ها نتوان آنها را تشخیص داد، پس از مدتی کاربر احساس خستگی می کند و دیگر تمایلی به ادامه کار در سایت نخواهد داشت. این مورد یکی از مهمترین اشتباهات در طراحی سایت می باشد که بعضا در برخی سایت ها مشاهده می شود.

  • عدم رعایت همیشگی برخی اصول اولیه در سایت 

طراحان حرفه ای همیشه از قالب ها و اصول خاصی در طراحی وبسایت خود استفاده می کنند که این اصول در ذهن هر کاربر و بیننده ای حک شده است. از این اصول میتوان به در نظر گرفتن صفحه تماس با ما، درباره ما و یا قرار دادن هدر یا لوگوی سایت در مکان مناسب آن اشاره نمود.

  • عدم استفاده از متون بجای تصاویر غیرضروری 

برخی از طراحان گمان می کنند که استفاده از تصاویر جذاب بجای برخی عبارات در سایت به جذب بازدید کننده کمک خواهد نمود. نمی توان به قطع گفت که این طرز فکر اشتباه است اما در مواقعی که در این عبارات از کلمات کلیدی سایت استفاده می شود، این روش بسیار مضر می باشد و یکی از اشتباهات بزرگ در طراحی وب محسوب می شود.

  • استفاده از پیش زمینه موسیقی بر روی سایت 

یکی از اشتباهات رایج در طراحی وبسایت، استفاده از موسیقی در آن می باشد. این مورد علاوه بر این که کاربر را از مشاهده سایت منصرف می کند، زمان بارگذاری سایت را نیز افزایش خواهد داد.

  • باز شدن پنجره های اتوماتیک (POP UP) 

باز شدن پنجره های اتوماتیکی که در هنگام کلیک کاربر برروی دکمه های سایت مورد استفاده قرار میگرد، اشتباه بزرگیست که در بعضی از سایت ها رخ می دهد و منجر به از دست دادن بازدید کنندگان آن می شود. زیرا به بیننده این احساس دست خواهد داد که هدف وی برای مدیر سایت ارزشی نداشته و وی تنها مانند ماشینی است که بر روی سایت کلیک می کند تا درآمدی اندک از عملیات وی برای مدیر سایت محاسبه گردد.

  • استفاده بجا از عنصر صفحه بندی در سایت ها 

زمانی که مطالب بخشی از سایت بسیار زیاد و اسکرول عمودی طولانی برای رسیدن به آخرین المان این بخش وجود دارد، می توان از صفحه بندی این مطالب استفاده نمود. در غیر این صورت این مورد دافعه ای برای بازدید کنندگان سایت خواهد بود.

  • استفاده از فرم های طولانی 

تقریبا 80 % کاربران سایت ها میخواهند خیلی سریع به مقصود خود دست یابند. در این حالت چنانچه شما از فرم های طولانی جهت پرنمودن آن توسط بازدید کنندگان، استفاده نمایید، ممکن است حوصله شان سر برود و از پر کردن فرم اجتناب نمایند.

 در مقاله های بعدی شما را با سایر اشتباهات رایج در برنامه نویسی تحت وب آشنا خواهیم کرد .
تاریخ ارسال
26 خرداد 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه

اعتبار سنجی صفحه وب

یک اعتبار سنج، برنامه نرم افزاری برای چک کردن صفحات وب سایت شما مطابق با استانداردهای جهانی وب می باشد. هنگامی که از یک اعتبار سنج استفاده می کنید، اسناد HTML و XHTML و همینطور CSS رو چک کرده و لیستی از ارور ها و مشکلات موجود رو مطابق استاندارهای انتخابی خودتون پیدا کرده و اونا رو برمیگردونه. شما باید این عادت رو به خودتون بدین که قبل از انتشار صفحات وبتون از میزان اعتبار اون مطمئن باشین. برای اینکه میزان اعتبار صفحات وب بدست بیارین میتونین وارد اعتبار سنج سایت W3C بشین و با وارد کردن آدرس سایتتون از اعتبار اون آگاه بشین. بیشتر توسعه دهندگان توصیه به اعتبار سنجی صفحه وب میکنن چرا که این کار موجب میشود دسترسی سایتتو رو از طریق مرورگرهای مختلف، بیشتر کنین.

اعتبار سنجی فایل های HTML:

اگر بخواین فایل های HTML خودتون رو اعتبار سنجی کنید به لینک سایت W3C مخصوص کد های HTML میباشد مراجعه کرده و آدرس سایت خودتون رو در آدرس باری که وظیفه چک کردن داره وارد کنید و از میزان مشکلات صفحه وب سایتتون با خبر بشین.

اعتبار سنجی فایل های CSS:

در این قسمت عملکرد نرم افزار سایت مشابه می باشد و تفاوت اون در وارد کردن آدرس برای اعتبار سنجی می باشد. در این قسمت باید آدرس فایل CSS سایت یا همون stylesheet رو وارد میکنین و در صورت وجود عیب، اون رو به شما گزارش میده. گاهی اوقات شما از W3C  برخی ارور هارو مشاهده میکنید. علت این ارورها پشتیبانی نکردن سایت از برخی مقادیر می باشد. این ویژگی ها در CSS3 نامعتبرند ولی در CSS4 ارائه شده اند. ارور هایی که امکان داره بهش بر بخورین اینها هستن:

  • pointer-events:  مورد استفاده در حذف اشاره گر دست در عناصر غیر فعال
  • user-select: مورد استفاده در حذف انتخاب متن در عناصر کلیک شدنی.
  • pseudo-class: اغلب در نشون دادن ورودی ها معتبر استفاده می شود.
  • webkit-keyframes-@: برای کار کردن در انیمیشن های در webkit مرورگرها استفاده میشود. (برای نسخه ها قدیمی Chrome, safari و Opera)

اعتبار سنجی فایل های XML و XHTML:

XHTML یک سند تایید شده مطابق DTD یا (Document Type Definition) می باشد. برای اعتبار سنجی این دو فایل (xml و xhtml) آدرس اینترنتی هرکدوم رو جداگونه در همون سایت W3C وارد کنید.

با تشکر از همراهی شما.

تاریخ ارسال
18 خرداد 1395
ارسال شده توسط
فرزانه نقش بندی
میزان بازدید
0 نفر بازدیدکننده
ادامه مطلب
0 دیدگاه
صفحات
صفحه 1 از 2
1 2