ایجاد دکمه های سه بعدی روشن جهت دار با CSS

خیلی مطمئن نیستم که چطور در این یکی تصادف کردم. اما چیزی مرا به سمت هدایت کرد این توییت:

آیا کسی این تعامل مکان نما را با CSS انجام داده است؟ pic.twitter.com/zLL7Sk6kW5

– پل های جد (JedBridges) 1 جولای 2020

و ، برای من ، این یک چالش است.

طراحی دکمه شسته و رفته است. اما من نمی خواستم کپی مستقیم انجام دهم. در عوض ، ما تصمیم گرفتیم یک دکمه “Twitter” ایجاد کنیم. ایده این است که ما یک دکمه تقریباً شفاف با یک نماد اجتماعی روی آن ایجاد می کنیم. و سپس آن نماد اجتماعی سایه زیر را ایجاد می کند. با حرکت ماوس روی دکمه ، نوری روی آن تابیده می شود. فشار دادن دکمه آن را به سطح فشار می دهد. در اینجا نتیجه نهایی:

دکمه توییتر روشنایی جهت دار 3D CSS

👉 https://t.co/qpfzEwUMey از طریق CodePen pic.twitter.com/zWfwtPaixo

– جی 🐻🛠 (@ jh3yy) 30 ژانویه 2021

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

علامت گذاری

روش اول من برای ایجاد چیزی شبیه به این ، داربست زدن نشانه گذاری است. در اولین بازرسی ، باید نماد اجتماعی مورد استفاده را کپی کنیم. و یک روش شسته و رفته برای این کار استفاده از ترکیبات Pug و اهرمی است:

mixin icon()
  svg.button__icon(role="img" xmlns="http://www.w3.org/2000/svg" viewbox='0 0 24 24')
    title Twitter icon
    path(d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')

در اینجا ، ما یک ترکیب برای ارائه SVG از نماد Twitter ایجاد کرده ایم. اگر مانند آن را فراخوانی کنیم این نماد Twitter را ارائه می دهد:

+icon()

با انجام این کار یک نماد بزرگ توییتر به ما تعلق می گیرد.

قلم را ببینید

1. نماد را رندر کنید توسط SitePoint (SitePoint)
بر CodePen.

زیرا مجموعه نمادهای اجتماعی معمولاً از همان “0 0 24 24” استفاده می کنند viewBox، ما می توانیم عنوان و مسیر استدلال کنیم:

mixin icon(title, path)
  svg.button__icon(role="img" xmlns="http://www.w3.org/2000/svg" viewbox='0 0 24 24')
    title= title
    path(d=path)

سپس نماد توییتر ما می شود

+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')

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

mixin icon(key)
  -
    const PATH_MAP = {
      Twitter: "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
    }
  svg.button__icon(role="img" xmlns="http://www.w3.org/2000/svg" viewbox='0 0 24 24')
    title= `${key} Icon`
    path(d=PATH_MAP[key])

+icon('Twitter')

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

اکنون ، برای علامت گذاری برای دکمه خود نیاز داریم.

.scene
  button.button
    span.button__shadow
      +icon('Twitter')
    span.button__content
      +icon('Twitter')
      span.button__shine

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

ممکن است ایده خوبی باشد که یک a span برای متن دکمه ما و مخفی کردن نمادها با آن aria-hidden. ما می توانیم span متن در حالی که آن را در دسترس خوانندگان صفحه قرار می دهد:

.scene
  button.button
    span.button__shadow
      +icon('Twitter')
    span.button__content
      span.button__text Twitter
      +icon('Twitter')
      span.button__shine

ما گزینه های مختلفی برای استفاده از آنها داریم aria-hidden ویژگی های. موردی که ما استفاده خواهیم کرد تغییر کد mixin برای اعمال است aria-hidden:

mixin icon(key)
  -
    const PATH_MAP = {
      Twitter: "...path code"
    }
  svg.button__icon(role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewbox='0 0 24 24')
    title= `${key} Icon`
    path(d=PATH_MAP[key])

یکی دیگر از روش های شسته و رفته با Pug انتقال همه ویژگی ها به یک مخلوط است. این در سناریوهایی مفید است که ما فقط می خواهیم برخی از ویژگی ها را از آنها عبور دهیم:

mixin icon(key)
  -
    const PATH_MAP = {
      Twitter: "...path code"
    }
  svg.button__icon(role="img" xmlns="http://www.w3.org/2000/svg" viewbox='0 0 24 24')&attributes(attributes)
    title= `${key} Icon`
    path(d=PATH_MAP[key])

اگر بررسی کنیم دسترسی دوباره پنل ، دکمه ما فقط “توییتر” را می خواند. و این همان چیزی است که ما می خواهیم!

سبک ها

این بخشی است که شما برای آن آمده اید – نحوه سبک دادن به چیزها. برای شروع ، این مورد را رها کردیم:

* {
  transform-style: preserve-3d;
}

این به ما امکان می دهد تبدیل های سه بعدی مورد نیاز دکمه خود را ایجاد کنیم. سعی کنید آن را در نسخه ی نمایشی آخر خاموش کنید و خواهید دید که همه چیز خراب است.

بیایید متن span را از چشم خود پنهان کنیم. ما می توانیم این کار را از بسیاری جهات انجام دهیم. یکی از روش های توصیه شده برای پنهان کردن عنصری از چشم ما ، اما مواردی که صفحه خوان نیست ، استفاده از این سبک ها است:

.button__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

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

.scene {
  height: var(--size);
  position: relative;
  width: var(--size);
  transform: rotateX(-40deg) rotateY(18deg) rotateX(90deg);
}

متوجه خواهید شد size در آنجا نیز متغیر است. ما قصد داریم موارد خاص را برای دکمه خود با متغیرهای CSS درایور کنیم. این کار را برای کوچک کردن مقادیر و اثر مفید خواهد کرد. معمولاً ما این موارد را در محدوده موردنیاز آنها قرار می دهیم. اما برای نمایش های نمایشی مانند این ، قرار دادن آنها در زیر :root در بالای پرونده ما بازی با ما را آسان تر می کند.

:root {
  --blur: 8px;
  --shine-blur: calc(var(--blur) * 4);
  --size: 25vmin;
  --transition: 0.1s;
  --depth: 3vmin;
  --icon-size: 75%;
  --radius: 24%;
  --shine: rgba(255,255,255,0.85);
  --button-bg: rgba(0,0,0,0.025);
  --shadow-bg: rgba(0,0,0,0.115);
  --shadow-icon: rgba(0,0,0,0.35);
  --bg: #e8f4fd;
}

اینها متغیرهایی هستند که ما با آنها کار می کنیم و با ایجاد دکمه ، معنا پیدا می کنند.

ادامه مطالعه ایجاد دکمه های سه بعدی با جهت مستقیم با CSS در SitePoint.