Skip to content

Instantly share code, notes, and snippets.

@maxpelic

maxpelic/dabblet.css

Created September 2, 2013 19:42
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 maxpelic/6416608 to your computer and use it in GitHub Desktop.
Save maxpelic/6416608 to your computer and use it in GitHub Desktop.
Download ZIP
3Dpage
Raw
dabblet.css
/**
* 3Dpage
*/
@import url(http://fonts.googleapis.com/css?family=New+Rocker);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
body{
background-color:#ddd;
}
#back{
border-radius:10px;
box-shadow:0px 5px 30px #aaa;
background-color:white;
margin-left:20%;
margin-right:20%;
padding:10px;
padding-top:1px;
}
*{
text-shadow:10px 0px 0px rgba(25, 255, 255, .5), 0px 0px 0px rgba(255, 225, 0, .5);
color:rgba(0,0,0,0);
text-align:center;
font-family:Open Sans, Arial, sans;
}
p{
font-size:2em;
font-family:Open Sans, Arial, sans;
}
strong{
text-shadow: 20px 0px 0px rgba(25, 255, 255, .5), 0px 0px 0px rgba(255, 225, 0, .5);
} strong:after{
content:' ';
}
h1{
font-family:New Rocker, Arial, sans;
font-size:5em;
}
#small{
font-size:1.5em;
text-shadow: -10px 0px 0px rgba(25, 255, 255, .5), 0px 0px 0px rgba(255, 225, 0, .5);
}
#left{
text-align:left;
padding-left:100px;
}
.ez{
text-shadow: -1px 0px 0px rgba(25, 255, 255, .5), 1px 0px 0px rgba(255, 225, 0, .5);
font-size:20px;
}
h2{
text-shadow: -2px 0px 0px rgba(25, 255, 255, .5), 0px 0px 0px rgba(255, 225, 0, .5);
font-size:40px;
}
#foot, #foot a{
padding-top:10px;
color:black;
text-shadow:none;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<br/>
<div id="back">
<h1>Rock on with 3D.</h1>
<p> make stuff <strong>3D </strong> &nbsp;on a computer screen:
<p id="small">(*you need red and blue 3d glasses*)
<p>sooo... how do you do it?</p>
<h2>1. add.</h2>
<p class="ez">
Add text you want to your web page.
<br/>
*Tip: add an "id" to that element so you don't turn the whole page 3d*
</p>
<br/>
</div>
<div id="foot">
Can't read this? Try switching to the <a href="#plain">plain verson</a>.
<br/>
<a herf="javascript:change()">Click here</a> to view the 3D verson.
</div>
Raw
dabblet.js
function change()
{
alert('change');
}
Raw
settings.json
{"view":"separate","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