Skip to content

Instantly share code, notes, and snippets.

@pampels
Created March 28, 2015 15:00
Show Gist options
  • Save pampels/f182d7a06d28c1ce2c60 to your computer and use it in GitHub Desktop.
Save pampels/f182d7a06d28c1ce2c60 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="scores-container">
<div class="score-container">
<div class="score">
<span>0</span>
</div>
<div class="spring-divider">
</div>
</div>
</div>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$score-gradient-main: #008a00;
$score-gradient-darker-1: darken($score-gradient-main, 1%);
$score-gradient-darker-2: darken($score-gradient-main, 10%);
$score-gradient-darker-3: darken($score-gradient-main, 22%);
$spring-gradient-main: #e1e1e1;
$spring-gradient-darker-1: darken($spring-gradient-main, 5%);
$spring-gradient-darker-2: darken($spring-gradient-main, 50%);
$spring-gradient-darker-3: darken($spring-gradient-main, 65%);
$score-container-height: 60px;
*{
box-sizing: border-box;
}
html, body{
height: 100%;
background-color: #e1e1e1;
}
.scores-container{
position: relative;
padding: 4px;
background-color: darken($score-gradient-main, 23%);
}
.score-container{
position: relative;
padding: 1px;
width: 80px;
height: $score-container-height;
border-radius: 6px;
box-shadow:inset 1px 1px 20px 1px rgba(0,0,0,.5);
border: 1px solid darken($score-gradient-main, 0%);
background: linear-gradient(to bottom, $score-gradient-darker-3 0%, $score-gradient-darker-2 20%, $score-gradient-darker-1 44%, $score-gradient-main 50%, $score-gradient-darker-1 56%, $score-gradient-darker-2 80%,$score-gradient-darker-3 100%);
&:before,
&:after{
content: '';
display: block;
position: absolute;
height: 10px;
background: orange;
width: 2px;
top: 50%;
margin-top: -5px;
left: 4px;
background: linear-gradient(to bottom, $spring-gradient-darker-3 0%, $spring-gradient-darker-2 20%, $spring-gradient-darker-1 44%, $spring-gradient-main 50%, $spring-gradient-darker-1 56%, $spring-gradient-darker-2 80%,$spring-gradient-darker-3 100%);
z-index: 2;
}
&:after{
right: 4px;
left: auto;
}
.spring-divider{
position: relative;
height: 2px;
width: 100%;
background-color: rgba(0,0,0,.7);
top: 50%;
margin-top: -1px;
z-index: 1;
border-bottom: 1px solid lighten($score-gradient-main, 4%);
border-top: 2px solid darken($score-gradient-main, 18%);
}
.score{
position: absolute;
line-height: $score-container-height;
text-align: center;
width: 100%;
font-size: 40px;
color: #fff;
text-shadow: 2px 2px 2px rgba(0,0,0,.7);
}
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
background-color: #e1e1e1;
}
.scores-container {
position: relative;
padding: 4px;
background-color: #001500;
}
.score-container {
position: relative;
padding: 1px;
width: 80px;
height: 60px;
border-radius: 6px;
box-shadow: inset 1px 1px 20px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #008a00;
background: linear-gradient(to bottom, #001a00 0%, #005700 20%, #008500 44%, #008a00 50%, #008500 56%, #005700 80%, #001a00 100%);
}
.score-container:before, .score-container:after {
content: '';
display: block;
position: absolute;
height: 10px;
background: orange;
width: 2px;
top: 50%;
margin-top: -5px;
left: 4px;
background: linear-gradient(to bottom, #3b3b3b 0%, #626262 20%, #d4d4d4 44%, #e1e1e1 50%, #d4d4d4 56%, #626262 80%, #3b3b3b 100%);
z-index: 2;
}
.score-container:after {
right: 4px;
left: auto;
}
.score-container .spring-divider {
position: relative;
height: 2px;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
top: 50%;
margin-top: -1px;
z-index: 1;
border-bottom: 1px solid #009e00;
border-top: 2px solid #002e00;
}
.score-container .score {
position: absolute;
line-height: 60px;
text-align: center;
width: 100%;
font-size: 40px;
color: #fff;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}
<div class="scores-container">
<div class="score-container">
<div class="score">
<span>0</span>
</div>
<div class="spring-divider">
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment