Connect with us

Technology

404: Not discovered





I’m not too certain how I stumbled into this one. However one thing led me to this tweet:

And, to me, that’s a problem.

The button design is neat. However I didn’t wish to do a direct copy. As a substitute, we determined to make a “Twitter” button. The concept is that we create an nearly clear button with a social icon on it. After which that social icon casts a shadow beneath. Transferring our mouse throughout the button shines a lightweight over it. Urgent the button pushes it onto the floor. Right here’s the remaining end result:

On this article, we’re going to have a look at how one can make it too. The cool factor is, you may swap the icon out to no matter you need.

The Markup

My first-take method for creating one thing like that is to scaffold the markup. Upon first inspection, we’ll must duplicate the social icon used. And a neat method to do that is to make use of Pug and leverage mixins:

mixin icon()
  svg.button__icon(function="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')

Right here, we’ve created a mixin for rendering an SVG of the Twitter icon. This is able to render the Twitter icon if we invoke it like so:

+icon()

Doing that may give us a giant Twitter icon.

See the Pen
1. Render An Icon
by SitePoint (@SitePoint)
on CodePen.

As a result of social icon units have a tendency to make use of the identical “0 0 24 24” viewBox, we might make the title and path arguments:

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

Then our Twitter icon turns into

+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')

However, we might cross it a key — after which have the paths saved in an object if we now have many icons we needed to make use of or repeat:

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(function="img" xmlns="http://www.w3.org/2000/svg" viewbox='0 0 24 24')
    title= `${key} Icon`
    path(d=PATH_MAP[key])

+icon('Twitter')

This generally is a neat solution to create an icon mixin to reuse. It’s somewhat overkill for our instance, however price noting.

Now, we’d like some markup for our button.

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

It’s all the time good to be conscious of accessibility. We are able to verify what our button offers off by checking the Accessibility panel in your browser’s developer instruments.

The accessibility panel in Chrome

It could be a good suggestion to place a span in for our button textual content and conceal the icons with aria-hidden. We are able to conceal the span textual content too while making it accessible to display readers:

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

We’ve obtained totally different choices for making use of these aria-hidden attributes. The one we’ll use is altering the mixin code to use aria-hidden:

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

One other neat method with Pug is to cross via all attributes to a mixin. That is helpful in eventualities the place we solely wish to cross some attributes via:

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

If we verify the Accessibility panel once more, our button solely reads “Twitter”. And that’s what we wish!

The Types

Right here’s the half you got here for — how we type the factor. To start out, we’ve dropped this in:

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

That permits us to create the 3D transforms we’d like for our button. Strive switching that off within the remaining demo and also you’ll see that all the things breaks.

Let’s conceal the span textual content from our eyes. We are able to do that in some ways. One advisable solution to conceal a component from our eyes, however not these of the screenreader, is to make use of these kinds:

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

Earlier than we begin engaged on our button, we’re going to tilt the scene. We are able to do that utilizing a remodel. Right here we chain the remodel to get it into the place we wish. I spent a little bit of time tinkering with values right here on reside stream to get it near the unique:

.scene {
  peak: var(--size);
  place: relative;
  width: var(--size);
  remodel: rotateX(-40deg) rotateY(18deg) rotateX(90deg);
}

You’ll discover a dimension variable there too. We’re going to drive sure issues for our button with CSS variables. It will make it useful for tinkering with values and the impact. Often, we’d put these below the scope they’re required in. However, for demos like this, placing them below the :root on the prime of our file makes it simpler for us to play with.

: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;
}

These are the variables we’re working with, they usually’ll make sense as we construct up our button.

Proceed studying
Creating Directionally Lit 3D Buttons with CSS
on SitePoint.



Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *