I used to make custom underlines for websites via illustrator. Specifically when I didn’t want a full width solution. The following is an example of how to make it happen using only html/css.

To produce the follow type effect:

Add HTML element:

CSS needed:

The course can be found at : https://www.udemy.com/advanced-css-and-sass

To center an absolute item in the middle of its  parent ( parent position must be set to relative ) with out using flex-box,the following can be done:

 

 

The following CSS3 property can be used to make an element not visible until its animation starts by having it’s 0% keyframe set  an opacity to 0. For example:

How CSS is processed and how styles that will be used will be determined:

!importance -> Specificity – > order that CSS is loaded ( cascade )

How relative values ( %, em, rem, vh , vw ) are converted to absolute values (px)

Relative values such as em and rem. em for fonts uses the parent element as it’s reference, em for lengths ( like padding etc ) uses the current element the  while rem uses the root element (html element) for both font and length type values.

Viewport-based : vh ( View Height) and vw (View Width) will use the devices View height/width to determine the site. So 90vh would be a height of 90% of the viewports height.

Misc Notes on Inheritance:

initial keyword resets a property to its initial value ( reset ).

Properties related to text ( font-family, size, color ) are inherited. Things like margin/padding are not by default. Can force inheritance of a property by using the inherit keyword on that property.

How and why to use rem instead of px

Set html element (root) font-size property to 10px  . This way when using rem in other element properties it is easier to figure out since it is a multiple/divisible by 10. This creates a good method in case the view point resizes. However, this is bad in the event that the user sets a different font size in their browser. Because of this, it is better to set the html element ( root ) to font-size of 62.5% . It is 62.5% because the default font-size in a browser is 16px. Since we want 10px, we use 10/16 = .625 or 62.5% for the font-size.

Box Types ( inline, block, inline-block )

All determined by the display: property.

 Block

Displayed as blocks. 100% of parent’s width. Vertically, one after another. Creates line breaks before and after it.

Inline

Inline box only occupies just the size it needs. Does not create line breaks. Height and width property do no apply. Can only apply left and right padding and margins.

Inline-block

Mostly inline that it only occupies content spaces that is using, does not create line breaks. Block on inside so all margin padding ( top and bottom) can be set.

Positioning Schemes

position: relative 

Elements laid out in natural order that is written in code. Not floats or absolutely positioned.

float: left  , float: right

Element is removed from the normal flow; Text and inline element will wrap around floated element. Container of a floated item will not adjust it’s height to the element but can use clear:both fixes

position: absolute; , position:fixed;

Element is removed from normal flow. No impact on surrounding contents/elements. Can use top,bottom, left and right to offset the element from its relatively positioned contained.

Stacking contexts

z-index

higher z-index appears on top, the lower the z-index the lower on the stack.

SASS

Variables

Can be used to store any type of values, must start with $ – for example:

$text-color:#f2f2f2;

$button-width:150px;

Nesting

Can nest elements/classes to reduce the need to rewrite certain code. For example:

& is used to join the pseudo element or state to the element before it. With out  it, it would of produced .nav :hover {} instead which is not what was intended.

darken and lighten

Color methods in SASS to darken/lighten a color. First param is the color. Second param is the % you want to adjust it by. i.e.

darken(#f2f2f2,15%); or lighten(#f2f2f2,10%);

Mixin

A type function or block of code you can define to use in different areas of your css.

To define a mixin:

Can also use parameters i.e.

Misc Notes

In order to use scss variables in the calc() function it must be enclosed within #{ }

To make text or a font type icon have a gradient  background you can do the following CSS:

To use a linear-gradient, you must apply it to the background-image property.

box-decoration-break or -webkit-box-decoration-break

If a single line of text i.e. <p> line of text that exceeds more than 1 line</p> exceeds a single line.. any padding added to the element would normally not apply to both lines if the element is broken in to two lines. Can use box-decoration-break:clone; to make it so any padding added to the element will be applied to both ( or more ) lines for that element.

Notes if rotating an object

perspective & -moz-perspective:   

Add a decent amount of pixels to smooth the rotation to look more natural. Must be added to the parent element.

backface-visibility:hidden;

Will make the backside of an element not visible . i.e. if it is transform: rotateY(180deg);