PortiBlog

Make design magic with borders and shadows

10 december 2018

Style-facts part5

Soon or late everybody would like to have some spaceships on their webpage. Just A little magic to accentuate their artistical and technical capable side. Borders and shadows can provide some of this styling magic and that is why we will explore the world of borders and shadows by making UFO's. Let's make alien space ships!

In this Blog you will learn how to use borders and how make blocks into circles or ellipses. Besides this, we will have a look at box-shadows and the way to make it a little magic.

Borders

To decorate the edge of your block in ancient times, the digital community came up with borders. Nowadays we can do a lot with borders. We can have dashed, dotted and even images decorating the border of your block. In this part of the StyleFacts we will cover the basics of borders. Not the images part.
A border consist of three parts: width, type and color. The width is defined in pixels. This is the easy part. The type of the border is a name and the most commonly used types are: solid, dashed, and dotted. For a complete overview of border-styles please visit w3schools. The color can be set by any form of color definition: rgb, rgba, hex or name. This looks like this:

border: 8px dotted yellow;

box dotted border Box dotted

Border-radius

Every one knows that UFO's are round, so we will be needing some styles to make an ellipse. We can do this by defining the border-radius of the block. This can be set in any unit you like. So if we make the border-radius of our disc 50% it will become an actual ellipse. And provide our UFO with magical lights on the edge we change our border style to dotted and increase the with to make the dots bigger.

What's a UFO without a glass dome on top of it!? Let's make one! We can't just put an ellipse on top of it. That would look kind of weird. We need a trick to make border on the bottom more flat. We can do this by defining the border this way:

border-radius: 50%/25%;
border-top-left-radius: 60%;
border-top-right-radius: 60%;

Ellipse with dome on it Ellipse with dome on it

Shadows

Now we have our awesome spaceship, we need to come of the background. Because spaceships hover! We need some shadow under this magical thing. Shadows take at least 5 parameters. The first for the x positioning of the shadow, the second for y, the third for the size of the blurred part of the shadow and fourth for the solid part of the shadow. The fifth is the color your shadow needs to be. It can be red, we could pretend our UFO had lights at the bottom, but most of the time in real life shadows are not red…

red shadow lights red shadow lights

It's time to beam up stuff! UFO's abduct people and cows. So let's make a beam! We need a green triangle shape, to make a light beam. Unfortunately triangles are not really basic shapes in CSS. So we need some CSS-wizardry to make triangles. Imagine a block without width or height. Now imagine it has a big fat border of 20px.
This would make a block 40px x 40px. You imagined that correctly. Now imagine you make all borders transparent but the bottom one. What does that leave us? Yes, a triangle. Let's fix our UFO up with a triangle beam!

triangle beam! triangle beam!

We have created magic!
Here's the codepen.
You are now able to make some pretty spacy stuff on your own site or app. Some shade and some funky rounded borders. The possibilities are endless! You are now an open-sorcerer with borders and shades. Want to share more tips and tricks you found exploring borders? Please leave a comment! Questions? Please send me a message.

 

Here are the other parts of these blog series:

Part 4:  https://www.mavention.nl/techblog/how-to-make-a-responsive-grid/
Part 3: https://www.mavention.nl/blogs-cat/3-levels-of-css-selectors-to-select-all-elements/
Part2: https://www.mavention.nl/blogs-cat/shaping-elements-and-its-surrounding/
Part1: https://www.mavention.nl/blogs-cat/2-basics-you-need-to-know-to-position-elements/

Submit a comment