Skip to content

Instantly share code, notes, and snippets.

@carolineartz

carolineartz/A-nifty-collection-of-CSS-text-effects---Outlined-text-shadows.markdown

Created April 3, 2015 19:27
Show Gist options
  • Save carolineartz/90d14c256a512ac7b445 to your computer and use it in GitHub Desktop.
Save carolineartz/90d14c256a512ac7b445 to your computer and use it in GitHub Desktop.
Download ZIP
A nifty collection of CSS text effects - Outlined text shadows
Raw
A-nifty-collection-of-CSS-text-effects---Outlined-text-shadows.markdown
Raw
index.html
<body>
<section id="effect3">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>3.And some outlines</h1>
<h2>I like colour</h2>
</div>
</div>
</div>
</section>
Raw
style.scss
@import "bourbon";
body {
background:#333;
color:transparent;
}
h1 {
margin:50px 0;
font-family: 'Montserrat Alternates', sans-serif;
color:#FFF;
}
header h1 {
font-size:50px;
}
.titlebg {
background:#444;
width:100%
}
/* Text Effect Styles */
#effect3 {
background:#333
}
#effect3 h1 {
color:#f1f1f1
}
#effect3 h2 {
font-size:130px;
font-weight:bold;
font-family: 'Playfair Display', serif;
letter-spacing: 20px;
padding:40px 0 80px;
color:#333;
text-shadow: 0.45rem -0.45rem rgba(178, 217, 35, 0.75), -0.45rem -0.45rem rgba(39, 172, 227, 0.75), 0 0.5rem rgba(255, 213, 25, 0.75);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment