Skip to content

Instantly share code, notes, and snippets.

@seekr

seekr/dabblet.css

Created September 2, 2014 00:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save seekr/61c1cab1b7559361295b to your computer and use it in GitHub Desktop.
Save seekr/61c1cab1b7559361295b to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@-webkit-keyframes colorSwapper {
0% {
background-color: #955fad;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #955fad), color-stop(100%, #da5b45));
background-image: -webkit-linear-gradient(#955fad, #da5b45);
background-image: linear-gradient(#955fad, #da5b45);
}
50% {
background-color: #da5b45;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #da5b45), color-stop(100%, #955fad));
background-image: -webkit-linear-gradient(#da5b45, #955fad);
background-image: linear-gradient(#da5b45, #955fad);
}
100% {
background-color: #955fad;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #955fad), color-stop(100%, #da5b45));
background-image: -webkit-linear-gradient(#955fad, #da5b45);
background-image: linear-gradient(#955fad, #da5b45);
}
}
@-moz-keyframes colorSwapper {
0% {
background-color: #955fad;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #955fad), color-stop(100%, #da5b45));
background-image: -webkit-linear-gradient(#955fad, #da5b45);
background-image: linear-gradient(#955fad, #da5b45);
}
50% {
background-color: #da5b45;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #da5b45), color-stop(100%, #955fad));
background-image: -webkit-linear-gradient(#da5b45, #955fad);
background-image: linear-gradient(#da5b45, #955fad);
}
100% {
background-color: #955fad;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #955fad), color-stop(100%, #da5b45));
background-image: -webkit-linear-gradient(#955fad, #da5b45);
background-image: linear-gradient(#955fad, #da5b45);
}
}
@-o-keyframes colorSwapper {
0% {
background-color: #955fad;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #955fad), color-stop(100%, #da5b45));
background-image: -webkit-linear-gradient(#955fad, #da5b45);
background-image: linear-gradient(#955fad, #da5b45);
}
50% {
background-color: #da5b45;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #da5b45), color-stop(100%, #955fad));
background-image: -webkit-linear-gradient(#da5b45, #955fad);
background-image: linear-gradient(#da5b45, #955fad);
}
100% {
background-color: #955fad;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #955fad), color-stop(100%, #da5b45));
background-image: -webkit-linear-gradient(#955fad, #da5b45);
background-image: linear-gradient(#955fad, #da5b45);
}
}
@keyframes colorSwapper {
0% {
background-color: #955fad;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #955fad), color-stop(100%, #da5b45));
background-image: -webkit-linear-gradient(#955fad, #da5b45);
background-image: linear-gradient(#955fad, #da5b45);
}
50% {
background-color: #da5b45;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #da5b45), color-stop(100%, #955fad));
background-image: -webkit-linear-gradient(#da5b45, #955fad);
background-image: linear-gradient(#da5b45, #955fad);
}
100% {
background-color: #955fad;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #955fad), color-stop(100%, #da5b45));
background-image: -webkit-linear-gradient(#955fad, #da5b45);
background-image: linear-gradient(#955fad, #da5b45);
}
}
@-webkit-keyframes solidColor {
0% {
background-color: #955fad;
}
50% {
background-color: #da5b45;
}
100% {
background-color: #955fad;
}
}
@-moz-keyframes solidColor {
0% {
background-color: #955fad;
}
50% {
background-color: #da5b45;
}
100% {
background-color: #955fad;
}
}
@-o-keyframes solidColor {
0% {
background-color: #955fad;
}
50% {
background-color: #da5b45;
}
100% {
background-color: #955fad;
}
}
@keyframes solidColor {
0% {
background-color: #955fad;
}
50% {
background-color: #da5b45;
}
100% {
background-color: #955fad;
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
padding: 50px;
color: #f6efe9;
font-family: 'Montserrat', sans-serif;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: solidColor;
-moz-animation-name: solidColor;
animation-name: solidColor;
background-color: rgba(255, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 0, 0, 0)), color-stop(100%, rgba(255, 0, 0, 0.5)));
background-image: -webkit-linear-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
background-image: linear-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
background-blend-mode: multiply;
}
ul {
list-style-type: none;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
position: relative;
padding-left: 0;
font-size: 32px;
line-height: 1.1em;
font-weight: bold;
}
ul li {
position: relative;
z-index: 2;
}
ul a {
display: block;
}
a {
color: #f6efe9;
text-decoration: none;
padding-left: 0;
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
transition: all 0.15s ease;
position: relative;
}
a:before {
content: "";
vertical-align: middle;
display: inline-block;
height: 1px;
width: 1px;
position: relative;
border: solid 8px transparent;
border-left-width: 0;
border-right-width: 0;
margin-right: 0;
border-left-color: #f6efe9;
top: 0;
left: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:hover:before {
margin-right: 10px;
border-left-width: 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
hr { border: 0px solid white; border-bottom: 2px solid white; }
form {
padding-right: 80px;
border-bottom: solid 2px #f6efe9;
position: relative;
padding-bottom: 10px;
}
form:before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 10px;
width: 2px;
background: #f6efe9;
}
form:after {
clear: both;
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
height: 10px;
width: 2px;
background: #f6efe9;
}
form input {
background: transparent;
border: none;
outline: none;
color: #f6efe9;
}
form input:-webkit-input-placeholder {
color: #f6efe9;
}
form input:-moz-placeholder {
color: #f6efe9;
}
form input:-ms-input-placeholder {
color: #f6efe9;
}
form input:input-placeholder {
color: #f6efe9;
}
form input[type="search"] {
width: 100%;
font-weight: 400;
font-size: 16px;
padding-left: 15px;
text-transform: uppercase;
}
form input[type="submit"] {
overflow: visible;
width: 32px;
height: 32px;
position: absolute;
right: 10px;
bottom: 15px;
font-size: 32px;
line-height: 1em;
}
form {
display: none;
}
header { text-align: right; margin-bottom: 50px;}
li { margin-bottom: 20px; }
li small { font-weight: 100; text-transform: none; font-size: .5em; opacity:.7; line-height: 10px; }
footer { opacity: .7; }
footer .logo { display: block; float:left; width: 5%; opacity: 1; }
Raw
dabblet.html
<header>
<p class="client"></p>
<p class="project"></p>
<p class="project-number"></p>
<p class="date">22 / 08 / 2014</p>
<hr />
</header>
<form action="">
<input class="" type="search" placeholder="Search" />
<input type="submit" value="⌕"/>
</form>
<ul>
<li><a href="https://www.pillpack.com/">PillPack</a>
<small>Whether you’re living with chronic pain, recovering from an acute illness, or aging gracefully—obtaining and managing medication is often a bigger pain than the diagnosis itself.<br /><strong>PillPack</strong> eases that pain by replacing the traditional pharmacy with a fast, simple home-delivery service.</small></li>
<li><a href="http://estimote.com">Estimote</a></li>
<li><a href="http://estimote.com">Qualcomm Tech</a></li>
<li>Ant+, BLE, NFC, ZigBee, ...</li>
</ul>
<footer>
<hr />
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="29.816px" height="29.817px" viewBox="0 0 29.816 29.817" style="enable-background:new 0 0 29.816 29.817;"
xml:space="preserve" class="logo">
<path style="fill:#FFFFFF;" d="M0,0v29.817h29.816V0H0z M8.713,22.626c-1.267,0-2.292-1.026-2.292-2.296
c0-1.266,1.025-2.294,2.291-2.294c1.269,0,2.298,1.028,2.298,2.294C11.01,21.599,9.98,22.626,8.713,22.626z M14.902,11.927
c-1.266,0-2.295-1.027-2.295-2.295c0-1.267,1.029-2.294,2.295-2.294c1.267,0,2.294,1.028,2.294,2.294
C17.196,10.9,16.169,11.927,14.902,11.927z M21.069,22.626c-1.268,0-2.295-1.027-2.295-2.296c0-1.266,1.027-2.294,2.295-2.294
c1.269,0,2.296,1.028,2.296,2.294C23.365,21.599,22.338,22.626,21.069,22.626z"/>
</svg>
<p class="client"></p>
<p class="project"></p>
<p class="project-number"></p>
<p class="date">22 / 08 / 2014</p>
</footer>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment