index.markdown

#3D Text in Sass

Inspired by @mdo

rendered.html

<p>#3D Text in Sass</p>
<p>Inspired by <a href="http://markdotto.com/playground/3d-text/">@mdo</a></p>

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.10",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}

style.scss

// @import "compass";

@mixin threeDtext($color, $depth, $harshess: 1%) {
  $all: ();

  @for $i from 0 through $depth {
    $all: append($all, append(0 ($i * 1px) 0, darken($color, $i * $harshess)), comma);
  }

  text-shadow: $all;
}

h1 {
  @include threeDtext(#CC9F9D, 8, 3);

  font-size: 72px;
}

h1, p, a {
  color: #FFF5F5;
  font-family: Futura, sans-serif;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
}

html {
  height: 100%;

  @include background(linear-gradient(top, #C9231A, #940A03));
}