My site’s moved CMS and servers. If you spot a problem, let me know.

Stuff & Nonsense product and website design

Scooter
Looter

text-shadow:
4px 4px 0 #060000, -2px -2px 0 #fdfcfa;
  • Text shadow
Scooter Looter

Pup
Plays
Pop

text-shadow: 5px 5px 2px #846D77;
text-stroke-color:#dcbbb5;
text-stroke-width: 3px;
  • Text shadow
  • Text stroke
Pup Plays Pop

Whatever
goes
Pup

color: #eff0cd;
letter-spacing: -.05em;
-webkit-text-stroke-color: #7890b5;
text-stroke-color:#7890b5;
-webkit-text-stroke-width: 4px;
text-stroke-width: 4px;
  • Text stroke
Whatever goes Pup

Talk it up Pup

letter-spacing: -.05em;
text-stroke-color:#7890b5;
text-stroke-width: 3px;
  • Text stroke
Talk it up Pup

Growing,
growing,
gone

color: #fbb999;
text-shadow: 3px 5px 1px #5160b1;
-webkit-text-stroke-color: #984336;
text-stroke-color:#984336;
-webkit-text-stroke-width: 3px;
text-stroke-width: 3px;
text-transform: uppercase;
  • Text shadow
  • Text stroke
Growing, growing, gone

Baba
Bait

background-clip: text;
background: linear-gradient(0deg, #667b6a, #1d271a);
filter: drop-shadow(3px 5px 1px #161e14);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #667b6a;
-webkit-text-stroke-color: #e7f1e0;
text-stroke-color:#e7f1e0;
-webkit-text-stroke-width: 2px;
text-stroke-width: 2px;
  • Background-clip
  • Filter
  • Text fill
  • Text shadow
  • Text stroke
Baba Bait

Snagglepuss

color: #aa4312;
text-shadow: 1px 8px 0 #0c0f08;
-webkit-text-stroke-color: #f9e2a4;
text-stroke-color:#f9e2a4;
-webkit-text-stroke-width: 2px;
text-stroke-width: 2px;
  • Text shadow
  • Text stroke
Snagglepuss
Snagglepuss

With SVG text path

<textPath href="#[MY PATH]"
font-family="bear-days"
font-size="110"
fill="#aa4312"
stroke="#f9e2a4"
stroke-width="4"
paint-order="fill stroke"
filter="url(#[MY SHADOW])"
text-anchor="start"
startOffset="0"></textPath>
  • SVG
  • Text path

Let’s
Duck
Out

color: #6F4D80;
text-shadow:
-5px 5px 0 #260E1E,
0 0 15px #DBC7A1,
0 0 30px #DBC7A1,
0 0 30px #DBC7A1;
  • Text shadow
Let’s Duck Out

Pint
Giant

color: #c2a872;
text-shadow:
-7px 5px 0 #0b100e,
0 -5px 10px #546c6f;
  • Text shadow
Pint Giant

Hum
Sweet
Hum

Split text & translate

color: #feebcb;
-webkit-text-stroke-color: #938d87;
text-stroke-color:##938d87;
-webkit-text-stroke-width: 3px;
text-stroke-width: 3px;
text-shadow: 5px 5px 2px #396277;
  • Split text
  • Text shadow
  • Text stroke
  • Translate
Hum Sweet Hum

Ro-Butler

Split text & rotate

color: #ffe9ca;
paint-order: fill stroke;
-webkit-text-stroke-color: #797FA2;
text-stroke-color:##797FA2;
-webkit-text-stroke-width: 4px;
text-stroke-width: 4px;
text-shadow: 0 0 30px #23738e;
  • Rotate
  • Split text
  • Text shadow
  • Text stroke
Ro-Butler

Yuk-Yuk
Duck

Split text & animation

color: #f7f76d;
text-shadow: 5px 5px 0 #1e1904;
  • Animation
  • Split text
  • Text shadow
Yuk-Yuk Duck

Like this project? Tip me a fiver.