This is a simple SCSS mixin that creates 3D blocky looking text with text-shadows.
@include text3d($primary, $depth: 5, $shadowsteps: 5, $shadowincrementer: 5px, $shadowopacity: .2, $primaryshadowcolour: #000, $lighting: $LIGHTING_CEIL)
- A number representing the depth of the effect. Controls how "tall" the text looks.
- default: 5
- the number of shadow steps. The first three shadows are predefined and provide a bit of a shadow nimbus.
- default : 5
- The distance between shadows
- default: 5px
- The opacity of all of the shadows
- default : .2
- A colour value representing the primary shadow colour
- default: #000
- A lighting type to use, this changes the appearance of the gradient slightly. This can be one of:
This creates a gradient from the "floor" up. This sort of gives the appearance of bounced lighting.
This is the default and feels the most natural in the majority of circumstances
This removes any gradients and makes the "sides" of the text a uniform colour