ورود

View Full Version : طراحی دکمه سبد خرید شبیه دیجی کالا


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



<!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>

(http://codepen.io/anon/pen/YpNqeg)
ali1395
دوشنبه 01 آذر 1395, 18:27 عصر
آقا خیلی محبت کردید.
حالا در مورد دایرهه
شما top دادی از بالای صفحه. چطوری top رو تعریف کنم از بالای دکمه که span داخلشه؟
تشکر
akarempor
دوشنبه 01 آذر 1395, 23:01 عصر
آقا خیلی محبت کردید.
حالا در مورد دایرهه
شما top دادی از بالای صفحه. چطوری top رو تعریف کنم از بالای دکمه که span داخلشه؟
تشکر
دوست عزیز اینها جزو موارد پایه HTML و CSS هست
بهتره ابتدا یکم مطالعه و تمرین کنید و البته یکم تلاش!
ali1395
سه شنبه 02 آذر 1395, 09:46 صبح
ممنون ولی کاش بهم می گفتید چون خیلی اطلاعاتی ندارم و تا الان هرچی سرچ کردم چیزی دستگیرم نشد.