cosmetic CSS properties
September 8, 2024 - Reading time: 4 minutes

The less the better BUT just in case, these CSS properties could be handy for some cosmetic touches (examples available on an ugly CodePen):

Shadowing

Use box-shadow and / or text-shadow property. Values: offsetX offsetY (blurRadius) (spreadRadius) color.

For instance

<p class="shadow">Lorem ipsum</p>

.shadow {
  box-shadow: 2px 5px 2px 5px rgba(100, 100, 100, .25);
  text-shadow: 2px 5px 2px green;
}

Aligning

last line of text

Use text-align-last property (right or center)

an element vertically

Use vertical-align property (text-top / super ; text-bottom / sub)

Fun with fonts

Decorate

text-decoration shorthand property for: text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness

For instance :

text-decoration: underline overline dotted red 5px;

Vary

font-variant property to display text in a small-caps font for instance

Default size

Good to now: 1em corresponds to the current font size (browser default is 16px.

The solution that works in all browsers:

body { font-size: 100%; } 
h1 { font-size: 2.5em; } 
h2 { font-size: 1.875em; } 
p { font-size: 0.875em; }

a: pseudo classes

/* unvisited link */ 
a:link { color: red; } 

/* visited link */ 
a:visited { color: green; } 

/* mouse over link */ 
a:hover { color: hotpink; } 

/* selected link */ 
a:active { color: blue; }

!important:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Tables

Also use :hover pseuo-class with a background-color property on <tr>!

Zebra-strip table with tr:nth-child(even) { background-color: #f2f2f2; }

That's all... for now.

Prevent textarea resizing

overflow: hidden;
resize: none;

Search

Categories