3D CARTOON TEXT WITH CSS TEXT-SHADOW

Playing around with CSS text-shadow and the Google Font “Luckiest Guy”.

See the Pen 3D Cartoon Text w/CSS text-shadow by Fielding Johnston (@fielding) on CodePen.light

Author

  • Fielding Johnston

Made with

  • HTML / CSS

SCSS 3D TEXT MIXIN

This is a simple SCSS mixin that creates 3D blocky looking text with text-shadows.

See the Pen SCSS 3D text mixin by Liam Egan (@shubniggurath) on CodePen.light

Author

  • Liam Egan

Made with

  • HTML / CSS (SCSS)

ANIMATED TEXT-SHADOW

A fun, CSS animation that creates a bounce while mimicking an RGB separation during the process.

See the Pen Animated Text-Shadow by Erin E. Sullivan (@erinesullivan) on CodePen.light

Author

  • Erin E. Sullivan

Made with

  • HTML / CSS

DIRECTION-AWARE TEXT-SHADOW

Direction-aware text-shadow, use of CSS variables to create perspective and 3D light effect on text.

See the Pen Direction-aware text-shadow by Martin Picod (@mpicod) on CodePen.light

Author

  • Martin Picod

Made with

  • HTML / CSS (SCSS) / JavaScript

GROOVY CSS EFFECT

1960’s font effect using CSS text-shadow property along with SASS function and mixins to keep code DRY.

See the Pen Groovy CSS Effect by Daniel Gonzalez (@dan10gc) on CodePen.light

Author

  • Daniel Gonzalez

Made with

  • HTML (Pug) / CSS (SCSS)

See the Pen Netflix style text animation with CSS by Nooray Yemon (@yemon) on CodePen.light

Author

  • Nooray Yemon

Made with

  • HTML (Slim) / CSS (SCSS)

FANCY TEXT SHADOW

See the Pen Fancy text shadow by agathaco (@agathaco) on CodePen.light

Author

  • agathaco

Made with

  • HTML (Pug) / CSS (SCSS)

CSS TEXT-SHADOW

Modern shadow effect for text with CSS text-shadow.

See the Pen text-shadow by IMarty (@IMarty) on CodePen.light

Author

  • IMarty

Made with

  • HTML / CSS (SCSS)

PRETTY SHADOW

Pretty text shadow.

See the Pen Pretty shadow by Alex Moore (@MoorLex) on CodePen.light

Author

  • Alex Moore

Made with

  • HTML / CSS (SCSS)

VARIABLE LONGSHADOW WITH GRADIENTS MIXIN

This doesn’t need to exist. But now you can define long shadows with different colors and spreads with one Sass mixin.

See the Pen Variable Longshadow with Gradients Mixin by Dario Corsi (@dariocorsi) on CodePen.light

Author

  • Dario Corsi

Made with

  • HTML / CSS (SCSS)

NEON EFFECTS

Neon text-shadow effects.

See the Pen Neon text-shadow effect by Erik Jung (@erikjung) on CodePen.light

Author

  • Erik Jung

Made with

  • HTML / CSS / JavaScript

AWESOME TEXT-SHADOW

Flat and simple text shadow effect.

See the Pen Awesome Text-Shadow by Nguyen Hoang Nam (@namho) on CodePen.light

Author

  • Nguyen Hoang Nam

Made with

  • HTML / CSS

TEXT-SHADOW

See the Pen Text-Shadow by Mayur Elbhar (@mayurelbhar) on CodePen.light

Author

  • Mayur Elbhar

Made with

  • HTML / CSS

LONG SHADOW GRADIENT MIXIN

A Sass (SCSS) mixin to quickly generate long shadow gradients. Suitable for both text-shadow and box-shadow.

See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.light

Author

  • roikles

Made with

  • HTML / CSS (SCSS)

CSS3 TEXT-SHADOW EFFECTS

See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.light

Author

  • Jorge Epuñan

Made with

  • HTML (Haml) / CSS (Less)

 

 

Categorized in: