Programming #5: Applied Visual Design

Today we’ll be going through the Applied Visual Design module in FreeCodeCamp.

At this point, we are assuming all of these elements are wrapped within a style block unless specified otherwise.

For a simple start, let’s look at visual balance.

This is when we want the text to be uniformly aligned, whether it’s left (default), right, or centered.

This would go within the element’s class selector. We’ll say <p> for this example:

p {text-align: center;}

We can also use one called justify which will give the text equal spacing. If your text looks jumbled, add ‘justify’ to your text-align element, and it’ll clean it up for you.

We can bold our text using a strong tag <strong>, just put it at both ends of the text you want bolded. Remember to close it, </strong>

We can also underline with a <u> tag. Same process applies as with the bold.

Italicize with <em>

Add strikethrough text (like this) with <s>

We can add a horizontal line (used for sectioning) with <hr>. This tag closes itself, you only have to use the one.

To build on from rgb background colors, we can also use rgba. The ‘a’ stands for alpha, which is the unit for opacity. Alpha ranges from 0 (transparent/clear) to 1 (opaque/solid). There is no special code for it, just add “a” and an extra number to a typical rgb element.

Here’s something we can use to make our graphics look more intricate. We can use box shadows to give our text cards a more accented look. It basically gives that little black gradient on the sides of the cards.

The box-shadow property takes (numerous) values for:

• offset-x (how far to push the shadow horizontally from the element),
• offset-y (how far to push the shadow vertically from the element),
• blur-radius,
• spread-radius and
• color

in that order. Blur-radius and spread-radius are optional. So the typical box shadow property looks like:

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

Even after playing with them in the interpreter, I still don’t see how the numbers correlate to each of those values. I’ll have to come back to this

We can also capitalize text without having to adjust the text itself.

In the text-transform property, you can either put: ‘lowercase‘, ‘UPPERCASE‘, or ‘Capitalize‘. Either value is still inputted in lowercase, but the page text will transform into it’s respective capitalization.

There’s also a font weight value that adjusts the thickness of the font. It ranges from 200-1000, no ‘px’ necessary.

Add a line height value to adjust the spacing between lines. Use with ‘px’.

Next we got the hover selector. This accounts for what a clickable text does when you hover over it. The first task has you add a rule for color so the text will highlight that color when you hover over it.

Remember our buttons are made from anchor elements, so in the code this would look like:

a {
    color: #000;
  }
  a:hover {color: blue;}

The ‘:hover’ property is what makes the text turn blue when the cursor is over it. Otherwise it defaults to black when it is not hovered over.

So remember that all HTML elements are presented as blocks. Even as I type this on WordPress, each paragraph (and code) is in its own box that keeps the visual layout well-spaced and uniform.

So whenever we want to move those boxes, we can add a position property and set its value to relative. We then add any direction (top, bottom, left, right) with its own value of px’s. The relative setting ensures that whatever direction we tell it to go, it will go relative to where the box originally was (usually the top-left corner is default for text on a blank word doc).

position: relative;
top: 15px;

When moving these boxes, it’s important to remember your chosen direction(s) are offsets, meaning the box will go in the opposite of the chosen direction. Imagine that whatever direction you input, say ‘bottom’, the computer is being told that the box has lost space at the bottom, which will make it go up.

In a nutshell, if you want to move the box up, you would space it from inputting ‘bottom’. If you want to move the box right, you’d space it from inputting ‘left’.

Next we got absolute positions. It’s the same process as we did with relative, except with absolute, this will force an element to be locked into its parent element. So if I wanted to move my paragraph <p> box with an absolute position, that means that whatever direction I tell it to go, it will be within range of its parent element, in this case that would be the heading <h1>.

There’s also another type of absolute position called fixed. It’s exactly what it sounds like, this fixes the box into one position so it will not move when the user scrolls the page.

So this next tasks shows float as a similar positioning property. First, mind that this does not require a position property, float is its own thing. Float can only go left or right relative to its parent element. I didn’t bold ‘relative’ because the task doesn’t define it as a relative property, even though it serves the same function as far as I see.

This looks kinda janky for a basic webpage, but if for some reason you ever want to stack boxes on top of each other (I’d hope you be doing this for graphics and not text), you can use the z-index property which adjusts the stacking order of your boxes. These have to be whole numbers (usually lower like 2 or 3 unless you page is ridiculously layered). In general, starting from a basic page, adding a z-index of 2 to a box will overlap it over another box.

This task was a little random, but you can center a box by inputting the margin property and setting it to ‘auto’, since center is the default position for a margin.

Moving onto colors. There are 3 grades of colors: hue (spectrum of color, red-to-blue), saturation (amount of gray in a color,the lower the sat, the more gray), and lightness (amount of white).

This property is styled as hsl() with the 3 grades’ numbers listed in that order, latter 2 are percentages. So a color with 300 hue, 100% saturation and 50% lightness would look like:

hsl(300, 100%, 50%)

This is the hue command for the color green.

Next we can add gradient colors to a background. After adding ‘linear-gradient’ to the background property it is followed with the degree (direction the colors fade) and the colors you want to be gradient.

background: linear-gradient(58deg, #000E40 #23AAAA)

I can tell this gets messy when doing a flashy page, especially if it requires a lot of pastel colors.

You can also turn the gradient into stripes by using the ‘repeated-linear-gradient’ property. You’ll have to play with the colors to get your desired result, but it’s pretty much the same process.

We can use the scale value with the transform property that allows us to resize a graphic. Any number (including) decimals will suffice.

Back to the hover selector, we can also set its value to enlarge a box when hovered over, whether text or image.

Task has you apply it to a div graphic, so I’ll just paste it:

  div:hover {transform: scale(1.1)};

We can skew elements (still boxes) along the x or y-axis with:

transform: skewX(25deg);

For a graphic square, this would turn it into a parallelogram. And of course you can replace X with Y, make sure it’s capital though.

Next we’re moving on to animation.

Within an id element (the task has me using #rect), we first input the animation name and duration.

#rect {
animation-name: wassaname;
animation-duration: 4s;
  }

The seconds are specified by ‘s’ as you see.

Then when it comes to editing the animation, we use a keyframe property along with the name we choose.

@keyframes wassaname

Now in this element, we can adjust the properties within the duration of the animation, first we’ll do colors.

The point of the animation these adjustments are made are specified by percentages.

So since we made our animation 4 seconds, if I set this element at 50%, this adjustment will occur at the 2-second mark.

@keyframes wassaname {50% {background-color: red;}

Another hover option, we can make a button change color when hovered over.

This may seem similar to the hover element we did earlier in this post. This method makes your colors more fluid (fade in/out) instead of a hard change.

We first specify a button hover element with the animation properties nested inside of it.

button:hover {
    animation-name: background-color;
    animation-duration: 500ms;

I copied and pasted this straight from the task. Notice it has the name ‘background-color’ so we know what the hover is changing. Notice the duration is in milliseconds (ms), to which 500 is half of a whole second.

We then do our keyframe element just how we did before.

@keyframes background-color {100% {background-color: #4791d0;}}

The 100% here ensures the button will fully highlight when hovered over. Lower percentages are more like a blink.

This feels anal, but adding the hover element this way only temporarily highlights the button. If you want the button to stay highlighted, we do an ‘animation-fill-mode’ element.

animation-fill-mode: forwards;

Specifically the ‘forwards’ is what keeps the button highlighted.

Making the animation move in different directions isn’t anything more than what you would think it is. We just add multiple directions within the percentages.

We can also make the animation fade with opacity, just input it as a regular property. Remember opacity ranges from 0-1, so your numbers will have to be a decimal.

Unless you want it to never stop moving, we can choose how many times the animation will loop. This is called the animation-iteration-count. This can be any whole number you choose, or you can even set it to ‘infinite’ by simply inputting that word.

For a variety of smoother motions (say animating a ball to slow down as it reaches its peak in the air), we can use ‘animation-timing-function‘. As of now, the only keywords introduced are ‘linear’ and ‘ease-out’.

One special property of the ‘animation-timing-function’ is the cubic-bezier. This is based on a 4-point coordinate system (x1, y1, x2, y2) that gives us manual control over the movement of the animation. The points are between 0-1, so again, your numbers would be decimals.

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

What I Learned Today

1. Adjust the visual alignment of a text (left/right/center & equal spacing)
2. General text modifiers (bold, underline, italicize, strikethrough, capitalization, font weight, line height)
3. Add a sectional horizontal line
4. Adjust the alpha (opacity) of a color
5. Add and adjust box shadows (horizontally, vertically, blur-radius, spread-radius, color)
6. Change the color of a clickable text/button when hovered over
7. Relative and absolute positions
   • Along with ‘floats’
8. Stack boxes on top of one another (z-index)
9. 3 grades of colors (hue, saturation, lightness)
10. Add modified patterns to colors (gradient & stripes)
11. Resize a CSS box (scale & skew)
    • Along with resizing when hovered over
12. Specify an animation (name & duration)
13. Adjusting an animation with keyframes
14. Adjusting motion color to a button that is hovered over
    • And how to keep it highlighted when hovered over
15. Make the animation move directionally
16. Make the animation fade while in motion
17. Adjust how many times an animation loops (finitely or infinitely)
18. Adjust the animation’s movement throughout its duration
19. Basic cubic-bezier curve

Concerns

I surprisingly grasped most of the content in this module, I just need more practice with cubic-bezier curves.