ساخت دکمه منوی چسبان و لزج (gooey menu button) با css خام و svg

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

اول html و css

یه قالب استاندارد ساده html رو داریم. (هر بخشی رو مشکل داشتین کامنت کنین، توضیح میدم)

<!DOCTYPE html>
<html dir="rtl" lang="fa-IR" prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="robots" content="index, follow" />

<!-- کدهای سی اس اس رو توی فایل style.css می نویسیم. -->
<link rel="stylesheet" href="style.css" />
</head>


<body>

<!-- کدهای html, svg رو اینجا می نویسیم. -->


</body>



</html>

خب بیایین یه رنگ بدیم به بدنه قالب. مثلا رنگ خوشکل سایتمون :))

body{
background-color:#efa007;
margin:0
}

مارجین ۰ هم به جلوگیری از فاصله استانداری هست که body بصورت پیشفرض داره.

 

قدم بعدیمون نوار و دکمه منو هستش. کد html هدر و دکمه رو شروع کنیم به نوشتن.

<header>
  <div class="menu-button">
    <span></span>
  </div>
</header>

ما یه نوار رنگی (سفید رو انتخاب کردیم) لازم داریم. به header یه رنگ پیش زمینه و ارتفاع میدیم.

header{
background-color:white;
height:5rem
}

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

دکمه رو استایل میدیم.

.menu {
        position: absolute;
  top: 2.5rem;
        left: 50%;
transform: translate(-50%, 0);
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  background-color: white;
transition:0.3s all ease-in-out
}

یه دایره سفید با عرض و طول ۵rem درست کردیم که دقیقا وسط صفحه بصورت افقی قرار گرفته و از بالای صفحه ۲٫۵rem فاصله گرفته تا وسط دایره بر روی انتهای نوار header قرار بگیره.

اما حالا نوبت اون سه خط دکمه منو هستش.

.menu span,
.menu span::before,
.menu span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  width: 1rem;
  background-color: #555
}

.menu span::before {
  content: '';
  top: -4px
}

.menu span::after {
  content: '';
  top: 6px
}

اومدیم span و سلکتورهاشو که به عنوان دو خط بالا و پایین بصورت کاملا وسط چین (عمودی و افقی) با پیش زمینه #۵۵۵ استایل دادیم. عرض ۱rem و ارتفاع ۲px.

سلکتور before رو -۴px بالا بردیم و سلکتور after رو ۶px. (چون ارتفاع خطوط ۲ پیکسله استفاده از -۶px برای before فاصله زیادی میده و زشت میشه).

به این شکل.

یه هاور هم بدیم که ۲rem بیاد پایین.

.menu:hover{
  transform: translate(-50%, 2rem);
}

خب فقط یه خط دیگه مونده که به style.css اضافه کنیم و اونم بعد از svg.

این داستان فیلتر svg

اول کد svg رو بنویسم بعد یه توضیح بدم و سورس.

<svg>
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
      <feColorMatrix in="blur" result="goo2" type="matrix" values="1 0 0 0 0
                ۰ ۱ ۰ ۰ ۰
                ۰ ۰ ۱ ۰ ۰
                ۰ ۰ ۰ ۱۸ -۸" />
      <feBlend in="SourceGraphic" in2="goo2" />
    </filter>
  </defs>
</svg>

اول تگ svg واسه وکتور رو می نویسیم بعدش از defs استفاده میکنیم. defs واسه ذخیره سازی فیلترها و… استفاده میشه که مستقیما رندر نمیشه. منبع

حالا یه فیلتر با آی دی دلخواه goo ایجاد می کنیم تا بتونیم توی css ازش استفاده کنیم. خب ما ۳ فیلتر feGaussianBlur و feColorMatrix و feBlend رو لازم داریم.

feGaussianBlur برای ایجاد فیلتر محو کردن ازش استفاده میشه. منبع

feColorMatrix هم برای ایجاد فیلتر رنگ بندی بصورت ماتریکسی (یه خورده سخته) و شدت آن استفاده می کنیم. منبع

feBlend برای ایجاد فیلتر ترکیب رنگ دو عنصر استفاده میشه. منبع

values="1 0 0 0 0
        ۰ ۱ ۰ ۰ ۰
        ۰ ۰ ۱ ۰ ۰
        ۰ ۰ ۰ ۱۸ -۸"

این ترکیب رنگ سفید. اما خط آخر. دو مقدار ۱۸ و -۸

۱۸ شدت و -۸ میزان محو شدگی رو مشخص میکنن. (یکم دستکاری کنین میاد دستتون).

** به resultها و inها دقت کنین. **

اینم از svg. اما حالا می خواییم این فیلترها رو اعمال کنیم. کافیه به عنصر والد دکمه (header,body,html) یکی به دلخواه (header پیشنهاد میشه تا کل طرح تحت تاثیر قرار نگیره)، استایل filter بدیم.

header {
  height: 5rem;
  background-color: white;
  filter: url('#goo');
}

و تمام.

نتیجه به صورت زیر در میاد.

 

منتظر نظراتتون هستم. راستی میتونین سورس رو دانلود کنین و یا دمو رو ببینین.

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on email
avatar

نوشته های مرتبط

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

ارتباط سریع با ما