Learning to Code: Day 11 — Applied Visual Design Part 1

Hey what’s up everybody, I hope Monday wasn’t so slow for you as it was for me.. Back from the gym and ready to go! Let’s take our first look at Applied Visual Design, lessons supplied by FreeCodeCamp. By the way if you haven’t joined them I would absolutely recommend! So let’s begin:

*cue tense Hollywood music*

Hey, what’s wrong with you? You’re looking kinda mean to me

Get it? The mean average of a group of numbers?

*record scratch*

—

Creating Visual Balance using the Text-Align Property

Alright, let’s get stuck into something completely new within CSS. When we view anything on the internet, it is mostly text, which is shaped inside a card layout. We’ll look here at the text-align property that helps us with the layout of the text in a card layout. There are several options to use it. Let’s dive into a few declarations:

text-align: justify; This causes all text to meet the left and right edges of the line box.

text-align: center; center the text.

text-align: right; right-aligns the text to the right against the line of the box.

text-align: left; (the default) left-aligns the text in the box.

weight: bold; makes the font bold. Alternatively, use the wrapping tags <b> or <strong> around text for the same result.

text-decoration: underline; you guessed it, applies an underline but is alot simpler to use as a wrapping <u> tag around text.

text-decoration: strikethrough; strikes a line through text, or you can use the alternative <s> wrapping tags.

font-style: italic; italicises the text but once again you can also use the wrapping tags <em> or simply <i> around text.

width:value; or height:value; Widens/Heightens the text or when used on the card widens/heightens the shape of the card layout. These measurement values can be given in relative lengths (e.g. em or rem), or absolute lengths (e.g. mm or in) or as a percentage of the parent element.

opacity:value; in a class declaration sets the opacity of that element (for example the text that’s written within an anchor <a> tag. The value ranges from 0–1 and can be used with a decimal place for example 0.4564 (very specific opacity!).

Note: These declaration options can be used inside any CSS selector for any element that is constructed inside the card layout and will minipulate the text as needed.

The <hr> tag can be used to create a horizontal line within the card layout also. Nifty little tip to separate chunks of text.

Adjust the Background-Colour Property of Text

Alright, now we’ve got a couple new definitions down, let’s look at how to adjust the background colour of a text block to emphasise it. We covered what rgb() was, and here were going to add the alpha/level of opacity (a) at the end, making it rgba(). As you can remember, the values of the RGB range from 0–255 but the alpha (a) ranges from 0.0–1.0 creating a level of opacity from very light to solid colour. Let’s set a colour in a p element selector with a light opacity of grey:

p {

text-align: center;

background-colour: rgba(45, 45, 45, 0.1);

padding: 10px;

}

Now the paragraph selector will affect the paragraph in the text which is centered in the card layout (text-align: center;) with a block around it of light grey (the rgba() line). Additionally, we tidied up the block with padding around it of 10px, as seen above.

Change the Font Size in a Header vs. The Paragraph Tag

So we know that headers range from largest (h1) to smallest (h6) but we can be more specific than that by setting a font-size:value; declaration in the CSS selector for the header we want to affect. For example we could change a font size value of a header to 30px to increase visibility for the user.

Adding a Box Shadow to a Card-like Element

We’ve all seen them folks, they’re right there on your phone! Little shadows that surround a shape to make it appear more three-dimentional and “pop” out. The box-shadow property takes several values for:

• offset-x : how far the shadow is pushed horizontally rom the element
• offset-y : how fat to push the shadow vertically from the element
• blur-radius : how sharp the shadow is (optional)
• spread-radius : how far the shadow spreads from the element (optional)
• and color.

Note: These values are taken in the order as addressed here. Remember that order!

Let’s have a look at the values written in code, appearing in sequence as digits and pixel values (provided by FreeCodeCamp):

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

So, if I’m reading this correctly, this CSS class declaration “box-shadow” deals with the x-axis first then the y-axis.

The first set of numbers are the x-axis: the offset-x is 0, the blur-radius is 10px, the spread-radius is 20px and the rgba() colour is black with an opacity of 0.19

Then we have the y-axis: the offset-y is 0, the blur-radius is set to 6px, the spread-radius is also 6px and the rgba() colour is black with an opacity of 0.23.

—

Aaaaand let’s call it a day there. That was fun! Pretty straight-forward and since repeating these tasks and writing and editing, the terms such as declarations, selectors and values come a bit easier to me. Check this diagram which was mentioned in CSS Part 1, it’s super clear and easy to remember:

Image from Hacker Noon

See you next time!