Web design nuggets


This is a collection of small snippets from all over the internet (mainly from stackoverflow) that I found handy.

Variables in css

This is useful for storing color values in a variable and using it in rest of the code. Helps you quickly change colors for various elements in one place.

/* Instantiation */

:root {
    --bg-color: #FFFFFF;

/* referring */
background-color: var(--bg-color);

Centering text in a div vertically

For single line:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

For multiple lines:

position: relative;
top: 50%;
transform: translateY(-50%);


Using Font Awesome icons in css

font-weight: 900 is needed for this to work. The content \f00d is the unicode value of the icon you want to use.

font-family: Font Awesome 5 Free;
font-weight: 900;
content: '\f00d';

Simple list animations

A simple css based animation for lists: source

Minimal CSS Navbar

A really simple sliding navbar. source

Overlay a div on top of another

position: relative
z-index: 3;

Fixing On hover bug on Safari

On hover actions convert to a long press on Safari and cause an ugly selection around the element. On some pages depending on layout the on hover doesn’t translate well to on-click events either rendering elements unresponsive. This is specific to Safari browser alone. Adding this line to your head fixes this. This bug was really painful to fix and took me hours to fix. Courtesy stack overflow.

document.addEventListener("touchstart", function() {},false);

Side by side alignment of divs/text

Add display: inline-block to the the div.

Centering image:

First answer in stack overflow