3-D Text with Glow

Public

Name

3-D Text with Glow

About

CSS to give a 3-D effect to text/headers (all CSS is included, because we hand-wrote it in Codepen. Omit font styling as appropriate. ..

Language

CSS

Rating

Voted: 0 by 0 user(s)

How to Setup Snippet

give your Header the class: 3dText

Codevault

NPD

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: Not Specified

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

History

Last modified:

30/09/2022

Important Note

This snippet has the following status:

Public

This snippet has passed basic review, use with caution and at your own risk. See details provided by author in sidebar and click below to find out more.

Learn More

 
                     1.3dText {
 2    position: absolute;
 3    top: 25%;
 4    right: 50%;
 5    transform: translate(50%,-50%);
 6    text-transform: uppercase;
 7    font-family: Coustard;
 8    letter-spacing: 0.05em;
 9    font-size: 8em;
10    font-weight: 600;
11    color: #c90000;
12    text-shadow:
13        0px 1px 1px #8c0101,  /*  x-offset, y-offset, blur, color  */
14        0px 2px 1px #8c0101,
15        0px 3px 1px #8c0101,
16        0px 4px 1px #8c0101,
17        0px 5px 1px #8c0101,
18        0px 6px 1px #8c0101,
19        0px 7px 1px #8c0101,
20        0px 8px 1px #8c0101,
21        0px 9px 1px #8c0101,
22        0px 6px 0.15em #c90000ac;  /* glow */
23}

Comments

Jack

1 year ago

Hmm didn't work for me. Do I add my text after the snippet? I did one space after then wrote my text. - Attempted w/Gutenberg Block Editor - paragraph - wordpress

Related Snippets

Please see some snippets below related to this snippet..

Styling

Unverified

default css

Added: 8 months ago

Last Updated: 8 months ago

View

Styling

Unverified

.gen_intros01

Added: 6 months ago

Last Updated: 6 months ago

First, under Advanced, add a CSS class name. Give your Elementor element (or section, column or container) the class name ‘gen_intros01’, ‘gen_intros02', or ‘gen_intros03’, depending on which snippet...

View

Styling

Unverified

ROTHKO PAINTING - STYLES.CSS

Added: 5 months ago

Last Updated: 5 months ago

ROTHKO PAINTING STYLES.CSS CODE.

View

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

JavaScript

Public

Popup Keyboard Control

Added: 2 years ago

Last Updated: 2 years ago

Designed to allow visitor to navigate between popups (originally triggered by a button in a Unlimited Elements timeline widget).

View

Styling

Public

3-D Text with Glow

Added: 2 years ago

Last Updated: 1 year ago

CSS to give a 3-D effect to text/headers (all CSS is included, because we hand-wrote it in Codepen. Omit font styling as appropriate. ..

View