DEV Community

Cover image for Amazon Alexa Echo Dot in CSS, HTML and JS
CodeSwaps
CodeSwaps

Posted on

Amazon Alexa Echo Dot in CSS, HTML and JS

In this article our goal is to create an Amazon Alexa Echo Dot in CSS, HTML and JS.

You can see the full code on Codepen and feel free to experiment with it.

CSS

The main things to highlight are the use of filter: drop-shadow, radial-gradient, and conic-gradient.. those were very useful for achieving the end result.

Here is the CSS I used to create the light.

.light-ring {
  width: 694px;
  height: 694px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #fff, #4C90FD, #A7C6FE, #508DFE, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 30px rgba(255, 255, 255, 0.5));
  box-shadow: 0 3px 1px 0px rgba(255,255,255,0.45) inset;
}
Enter fullscreen mode Exit fullscreen mode

For the buttons I used a combination of gradients:-

.btn {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1f1f1f;
  position: absolute;
  box-shadow: 0 2px 1px 0px rgba(255,255,255,0.2) inset;
  filter: drop-shadow(0 2px 1px rgba(255, 255, 255, 0.2));

  &-volume-up {
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    background:
      radial-gradient(ellipse at center, rgba(40,58,71,0.5) 0%,
      rgba(0,0,0,0) 100%), linear-gradient(to bottom,
      rgba(67,85,103,0.1) 0%,rgba(76,95,111,0) 100%);
  }
}
Enter fullscreen mode Exit fullscreen mode

JS

I wanted to ensure I kept the code DRY so rather than creating 80 vent divs and all the accompanying CSS which would lead to a lot of code bloat I decided to use some JS instead here.

This was to duplicate the vents:-

let vent = document.querySelector('.vent');

[...Array(79)].forEach(_ => vent.parentNode.insertBefore(vent.cloneNode(true), vent));
Enter fullscreen mode Exit fullscreen mode

I also used JS to rotate and position each vent incrementally, although similar could be achieved with a css mixin.

Final Result

If you found this post useful please share it 🤝

About the Author

Simon is a freelance web designer.

Discussion (11)

Collapse
trueneu profile image
Pavel Gurkov

At first I thought, 'whoa! Such a lively image generated with a handful of CSS and JS? Nice!'

Then I looked at the CSS and saw embedded image BLOBs.

Collapse
codeswaps profile image
CodeSwaps Author

Yes, for the noise grain effect. I may look at that again, but base64 images seemed like the best way for that effect. Do you have a better suggestion for that?

Collapse
trueneu profile image
Pavel Gurkov

Ah, no, no. Basically I was just wondering how much of it is generated and how much comes from the BLOB. I'm a total idiot regarding frontend, so I don't have much to propose unfortunately. If that's only for the grain effect, that's still impressive!

Now I wonder if you could emulate a realistic grain effect. I bet you could, but I have no idea how complex would it be...

Thread Thread
codeswaps profile image
CodeSwaps Author • Edited on

Yeah it does seem a bit of a get-out on my part to use a bg image at all even if just for that effect, it does spoil the otherwise quite small css. I pondered using some divs with random pixels in. I did a bit of research about noise grain effects and there seems to be no effective way to create a noise effect cleanly in css even in 2021.

Thanks for the feedback!

Thread Thread
trueneu profile image
Pavel Gurkov

Oh I see. That’s a pity.

Nevertheless, looks really cool :)

Collapse
ironcladdev profile image
IroncladDev

I'm not really skilled in SVG, but I think I've seen people use SVG masking to make a noisy effect.

Thread Thread
codeswaps profile image
CodeSwaps Author

Thank you, I will look into that.

Collapse
ratuloss profile image
Ratul

Cool!

Collapse
cklek profile image
Conrad Klek • Edited on

Super cool! Does [...array(79)] create an array of length 79? Also, I’ve been using createElement and appendChild - how does that differ from clone node?

Collapse
codeswaps profile image
CodeSwaps Author • Edited on

Thanks Conrad. Yep it does. To be honest there's lots of different approaches to achieve the result I was after. I am sure yours is also valid.

Here is more info developer.mozilla.org/en-US/docs/W...

Collapse
atulcodex profile image
Atul Prajapati

Hey, bro thanks for sharing but you can make it responsive too ;)