Calc()

Historically, CSS has not been considered a programming language because it was not able to perform calculations or run formulas. With the introduction of the calc function, developers are now able to add, subtract, multiply, divide, etc. for sizing and positioning elements. As an alternative to the standard unit of an element, developers can mix and match units to create interesting hacks. One popular hack among developers relates to typography. The example below provided by csstricks.com, makes a websites typography consistent on all screen sizes.

See the Pen
Untitled by CSS-Tricks (@css-tricks)
on CodePen.

Custom Variables

For many years CSS variables were considered risky and even shunned because they were not supported by all browsers. With Internet Explorer being put to bed and big browsers receiving much needed updates, developers can now breathe a sigh of relief knowing that CSS variables are safe. Developers do not need to worry about fallbacks anymore.

Creators can now set a reusable call within a stylesheet to keep things consistent throughout the site. Changes such as font style or colors can now be modified with a single line of code.

// Example of CSS Variable
:root {
–brandRed: #dc3232;
}
button {
background-color: var(–brandRed); //background is red
}

Rotate Y

Incorporating a rotating CSS element is always fun. Users become more engaged when an element has an animated effect. An example would be having a two-dimensional image on its Y axis. This would create an illusion that the image is three dimensional. This example is demonstrated on Aable Pest Control’s website aablepc.com. Viewers are able to hover over the different pests, creating an engaging and fun experience that the user will remember. The effect is done via the transform styling rule on hover.

.bugBox:hover > img {
transform: translateX(-100%) rotateY(-180deg);
}

Unset Rules

CSS can get messy on larger sites because developers must override rules set in place. When this occurs, developers will need to use an unset. An unset can be applied to individual rules such as colors and fonts. Many times, a clean slate is needed. In this instance, developers will need to “unset:all” to void previous rules and start fresh. Applying this to every element with an asterisk and !important tag will leave the website with no styling.

.page-contact h1 {
all: unset;
}

* {
all: unset !important;
}

Letter Spacing

Users and clients will often fixate on fonts. Playing with font-family, size, color and weights are tricks that can spice up a site’s typography. An often-overlooked tool is letter spacing. Letter spacing is the space between letters. Spacing can be used to fill a page when there is limited content or make headings stand out more. It is important to know when to draw the line. A couple of pixels between every character may be a bit much. Instead, creators can use a fraction of a pixel or another unit as they allow decimals.

h1 {
letter-spacing: .5px;
}