طراحی دکمه سبد خرید شبیه دیجی کالا

**ali1395** · پنج شنبه 17 تیر 1395, 23:36 عصر

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

**ali1395** · شنبه 26 تیر 1395, 17:53 عصر

کسی نیست راهنمایی کنه؟؟؟؟

**amir6268** · یک شنبه 27 تیر 1395, 22:45 عصر

به این یه نگاه بندازه :

http://codepen.io/anon/pen/AXVjZg

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

اینکه بخوای هر دکمه ای رو با css بنویسی وقت گیره و زیاد اصولی نیست.

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

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

موفق باشی.

**ali1395** · جمعه 28 آبان 1395, 00:01 صبح

چطوری میشه دایره ای هم درونش ایجاد کرد که عدده داخل دایره قرار بگیره؟

**akarempor** · جمعه 28 آبان 1395, 19:12 عصر

یه تگ span میسازی
یه کلاس بهش میدی
عرض و طولش رو مشخص میکنی با بکگراند و رنگ نوشته
display:block میکنی
border-radius هم برابر عرض و طول
عرض و طول یه اندازه باشن

**akarempor** · جمعه 28 آبان 1395, 22:26 عصر

http://codepen.io/anon/pen/YpNqeg

کد HTML:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style>
    body{direction: rtl;font-family:tahoma;font-size:18px}
    .sabad{
      width: 200px;
      height: 45px;
      background: linear-gradient(to right, #7bbd42, #7bbd42 70%, #6ba53a 0%, #6ba53a 100%, #7bbd42 100%);
      color: #fff;
      border-radius: 4px;
    }
    .name {
        text-decoration: none;
        color: #fff;
        right: 80px;
        top: 15px;
        position: absolute;
    }
    .count {
        color: #fff;
        top: 20px;
        position: absolute;
        right: 170px;
        background: #fd6400;
        width: 24px;
        height: 24px;
        text-align: center;
        border-radius: 24px;
    }


  </style>
</head>

<body>
    <div class="sabad">
      <a href="#" class="name"> سبد خرید </a> <span class="count">0</span>
    </div>
</body>

</html>

**ali1395** · دوشنبه 01 آذر 1395, 18:27 عصر

آقا خیلی محبت کردید.
حالا در مورد دایرهه
شما top دادی از بالای صفحه. چطوری top رو تعریف کنم از بالای دکمه که span داخلشه؟
تشکر

**akarempor** · دوشنبه 01 آذر 1395, 23:01 عصر

نوشته شده توسط ali1395

آقا خیلی محبت کردید.
حالا در مورد دایرهه
شما top دادی از بالای صفحه. چطوری top رو تعریف کنم از بالای دکمه که span داخلشه؟
تشکر

دوست عزیز اینها جزو موارد پایه HTML و CSS هست
بهتره ابتدا یکم مطالعه و تمرین کنید و البته یکم تلاش!

**ali1395** · سه شنبه 02 آذر 1395, 09:46 صبح

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

نام تاپیک: طراحی دکمه سبد خرید شبیه دیجی کالا

ابزار های تاپیک

نمایش

طراحی دکمه سبد خرید شبیه دیجی کالا

نقل قول: طراحی دکمه سبد خرید شبیه دیجی کالا

نقل قول: طراحی دکمه سبد خرید شبیه دیجی کالا

نقل قول: طراحی دکمه سبد خرید شبیه دیجی کالا

نقل قول: طراحی دکمه سبد خرید شبیه دیجی کالا

نقل قول: طراحی دکمه سبد خرید شبیه دیجی کالا

نقل قول: طراحی دکمه سبد خرید شبیه دیجی کالا

نقل قول: طراحی دکمه سبد خرید شبیه دیجی کالا

نقل قول: طراحی دکمه سبد خرید شبیه دیجی کالا

تاپیک های مشابه

سوال: فراخوانی منو تو در تو شبیه دیجی کالا

سوال: یه دکمه سبد خرید دارم تو منو، که تو رویداد کلیکش collapse انجام میشه و یه باکسی باز میشه...

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

سوال: قیمت طراحی یک سایت مشابه سایت دیجی کالا

مبتدی: ساخت سبد خرید شبیه این

قوانین ایجاد تاپیک در تالار