Text decoration and transformation effects

Text Decoration and Transformation Effects

CSS provides rich text decoration and transformation capabilities, allowing developers to finely control the visual presentation of text. From simple underlines to complex 3D transformations, these features add more possibilities to web typography.

Basic Text Decoration

The text-decoration property is the most basic way to decorate text, supporting various combinations:

.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

.line-through {
  text-decoration: line-through;
}

.combined {
  text-decoration: underline overline wavy red;
}

Modern CSS also allows individual control over various aspects of decoration lines:

.custom-decoration {
  text-decoration-line: underline;
  text-decoration-color: #ff5722;
  text-decoration-style: dotted;
  text-decoration-thickness: 3px;
}

Text Shadow Effects

The text-shadow property can create various shadow effects, from simple drop shadows to neon effects:

.simple-shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.neon-effect {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
}

.multiple-shadows {
  text-shadow: 
    1px 1px 1px #919191,
    1px 2px 1px #919191,
    1px 3px 1px #919191;
}

Text Transformation and Deformation

The text-transform property can change the case of text:

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

More complex deformations can be achieved using the transform property:

.rotate-text {
  display: inline-block;
  transform: rotate(15deg);
}

.skew-text {
  transform: skewX(20deg);
}

.scale-text {
  transform: scale(1.5);
}

Advanced Text Effects

CSS also supports advanced text effects, such as gradient text:

.gradient-text {
  background: linear-gradient(to right, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

3D text effects can be achieved using multiple layers of shadows:

.three-d-text {
  color: #f8f8f8;
  text-shadow: 
    0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25);
}

Text Stroke Effects

-webkit-text-stroke can add outlines to text:

.stroked-text {
  -webkit-text-stroke: 2px #333;
  color: white;
}

.stroked-gradient {
  -webkit-text-stroke: 2px transparent;
  background: linear-gradient(45deg, #ff0, #f0f);
  -webkit-background-clip: text;
  background-clip: text;
}

Text Background Effects

Text can be combined with background images to create unique effects:

.image-text {
  background: url('texture.jpg') center/cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.animated-bg-text {
  background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 3s linear infinite;
}

@keyframes shine {
  to { background-position: 200% center; }
}

Text Blend Modes

mix-blend-mode can achieve blending effects between text and background:

.blend-text {
  background: url('background.jpg');
  color: white;
  mix-blend-mode: difference;
}

.container {
  background: linear-gradient(45deg, #ff0, #f0f);
  padding: 2rem;
}

.blend-inside {
  color: black;
  mix-blend-mode: screen;
}

Text Clipping and Masking

CSS masks can create complex text display effects:

.masked-text {
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.clip-text {
  background: url('pattern.png');
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 50px 50px;
}

Responsive Text Effects

Using CSS variables and viewport units can create responsive text effects:

.responsive-text {
  --min-size: 16px;
  --max-size: 24px;
  font-size: clamp(var(--min-size), 4vw, var(--max-size));
  
  --min-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  --max-shadow: 3px 3px 6px rgba(0,0,0,0.5);
  text-shadow: var(--min-shadow);
}

@media (min-width: 768px) {
  .responsive-text {
    text-shadow: var(--max-shadow);
  }
}

Text Animation Effects

CSS animations can add lively effects to text:

.bouncing-text {
  display: inline-block;
  animation: bounce 0.8s infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

.typing-effect {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
}

@keyframes typing {
  from { width: 0 }
}

@keyframes blink {
  50% { border-color: transparent }
}

Variable Font Features

Variable fonts provide more precise text control:

.variable-font {
  font-family: 'Inter var', sans-serif;
  font-variation-settings: 'wght' 700, 'slnt' -10;
  transition: font-variation-settings 0.3s ease;
}

.variable-font:hover {
  font-variation-settings: 'wght' 900, 'slnt' 0;
}