Garrett's CS2350 Web Design Portfolio

Using CSS

Image of the CSS box model

This is the CSS box model. It serves as a visual demonstration of how things are organized/aligned when setting style on a page with a css style sheet. The border is like the container your text or whatever else you are using will be inside of. The margin is the space between the edge of the page and the box and the padding is the space between the text and the edge of the box.

padding

Padding is the space between the border and the text. This box has the same padding of 50px on each side. lorem ipsum lorem lorem ipsum ipsum lorem ipsum lorem ipsum wingardium leviosa lumos flippendo portego avara

Here is when the padding on top and bottom are the same and the padding on left and right are the same. The top/bottom are 50px and the left/right are 75px ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum lorem ipsum lorem ipsum lorem.

Here is how it looks to have the padding different on every side. In here the padding is (starting with the top and going clock-wise) 25px 50px 75px 100px lorem ipsum lorem ipsum wik also wik also also wik lorem ipsum wingardium leviosa lumos flippendo portego avara

Margins

This is an example of the default margin. The margin is the space between the border and the edge of the page lorem ipsum ipsum lorem lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

This is the margin set to 50px lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

This is the margin set to 150px lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Style Changes on Hover

You can also have things change or do something when the cursor hovers over it and on top of that you can set how long it takes for that change to finish taking place. this box is just the control though and will not do anything.

When you hover the cursor over this box the background color will change to green over the course of 4 seconds.

When you hover over this box the box's dimensions will change over the course of 2 seconds.

Color Contrast

Color combination Background Text Contrast ratio WCAG Rating
lorem ipsum lorem lorem ipsum lorem ipsum lorem #F8F800 #93006E 7.46:1 AAA
lorem ipsum lorem lorem ipsum lorem ipsum lorem #F04E46 #B3EFFF 5.51:1 AA
lorem ipsum lorem lorem ipsum lorem ipsum lorem #00CFFF #990000 4.82:1 AA
lorem ipsum lorem lorem ipsum lorem ipsum lorem #F93684 #A2FB36 2.78:1 none
lorem ipsum lorem lorem ipsum lorem ipsum lorem #046B99 #21F400 3.92:1 none

Positioning

Relative position

The relative position property places something relative to where it would normally appeared. in this case it shifted a little to the left. This was shifted 40 px to the right and 20px down

Absolute position

The absolute position property places something on a specific spot on bassed off of the center of the page and then moved by x and y amounts. it is not affected by where in the html file the object is written, it will appear in the same place. this was shifted down by 1300px and right by 10px

Fixed position

The fixed position property positins something in a fixed place on the screen, so you will always see it in the exact same spot regardless of where you scroll. The position for this was right 50px bottom 200px

Shadow

The h-offset casts a shadow either to the left or the right of the box by X number of pixels. Use a positive value to go right and a negative to go left. on here the box-shadows' horizontal properties are set to 150px (going right) and -10px (going left)

The v-offset works much like the horizontal property except vertically. positive vales cast the box-shadow downwards and negative values cast it upwards. On this box we are using the vertical values of 10px (going down) and -120px (going up)

The blur property smooths out the shadow so it fades into the background. The value set for the blur determins how gradually it fades. The two previous examples had no blur applied, this is what it looks like with a blur of 20px applied to the right box shadow and 100px applied to the left box shadow.