← BACK

HEARTLINE SONGSMITH

EFFECTS & DECORATIONS

Shadows, borders, and halftone backgrounds

Borders

Heavy 5px black borders are the signature of Anvil

5px Border

Standard border for all components

border-5 border-comic-black

4px Border

Used for nested elements

border-4 border-comic-black

3px Border

Used for badges and small elements

border-3 border-comic-black

Bottom Border Only

Used for card headers

border-b-5 border-comic-black

Shadows

Hard shadows create depth and comic book aesthetic

Hard Shadow

8px offset, no blur

shadow-comic-hard

8px 8px 0 rgba(0,0,0,1)

Standard Shadow

4px offset, no blur

shadow-comic

4px 4px 0 rgba(0,0,0,1)

/* Tailwind config */
shadow-comic-hard: '8px 8px 0 rgba(0, 0, 0, 1)'
shadow-comic: '4px 4px 0 rgba(0, 0, 0, 1)'

Halftone Background

Classic comic book printing effect

Halftone Pattern

This subtle dot pattern mimics vintage comic book printing and adds texture without overwhelming content. 

<div class="halftone-bg">
  <!-- Content -->
</div>

/* CSS */
.halftone-bg {
  background-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px
  );
  background-size: 4px 4px;
}

Rounded Corners

Used sparingly for images and nested elements

rounded-lg

8px radius

rounded

4px radius

no rounding

0px radius

/* Use rounded corners for: */
- Images (rounded-lg)
- Price displays (rounded-lg)
- Nested cards (rounded)

/* Don't use rounded corners for: */
- Main component borders (keep sharp)
- Buttons (keep sharp)
- Primary cards (keep sharp)

Transforms & Hover Effects

Subtle animations enhance interactivity 

<button class="transform transition-transform 
  hover:scale-105 active:scale-95">
  Hover Me
</button>

Text Stroke

Creates the iconic comic book title effect

POW!

BAM!

WHAM! 

<h1 class="text-6xl font-bold italic tracking-wider 
  text-comic-yellow" 
  style="-webkit-text-stroke: 3px black;">
  POW!
</h1>

All Effects Combined

ANVIL

All the effects working together

Nested Element