Skip to content

Instantly share code, notes, and snippets.

@skopp

skopp/dabblet.css

Created August 29, 2012 23:55
Show Gist options
  • Save skopp/3520627 to your computer and use it in GitHub Desktop.
Save skopp/3520627 to your computer and use it in GitHub Desktop.
Download ZIP
skuda flexperiment / using flex jquery, fittext and random others.
Raw
dabblet.css
/**
* skuda flexperiment / using flex jquery, fittext and random others.
*/
body {
background: #0caaff;
color: #f4f1de;
font-size: 100%;
font-family: "proxima-nova-1","proxima-nova-2", 'Arial', sans-serif;
}
.flex {position:relative;width:850px;min-height:300px;margin:0 auto;border:0px solid red;margin-top:10px;}
.flex a {background-color:white;display:block;width:100px;height:100px;border-radius:8px;position:absolute;background-repeat:no-repeat;background-position:center;border:3px solid white;cursor:pointer;text-align:left;text-shadow:1px 1px 20px #000;color:white;font-size:18px;font-weight:bold;text-indent:10px;line-height:30px;}
[bg=a] {background-image:url(http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg);}
[bg=b] {background-image:url(http://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;}
[bg=c] {background-image:url(http://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);}
[bg=d] {background-image:url(http://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);}
[bg=e] {background-image:url(http://farm8.staticflickr.com/7003/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
[bg=f] {background-image:url(http://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
[bg=g] {background-image:url(http://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;}
[bg=h] {background-image:url(http://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);}
[bg=i] {background-image:url(http://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
[bg=j] {background-image:url(http://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
[bg=k] {background-image:url(http://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;}
</style>
p{
font-size: 1em;
margin: 0 0 1.5em 0;}
.container {
width: 80%;
max-width: 1440px;
margin: 0 auto;
background-colord: #da4838;}
img{
width: 96%;
max-width: 96%;
margin-bottom: 5%;
margin-top: 1%;
}
header {
margin: 3.5% 0 4%;
}
footer{
border-top: .12em solid #f4f1de;
background-image: url('http://dl.dropbox.com/u/485562/skmedia/imgs/random.jpg')
padding-top: 2%;
margin-top: 3%;
display: block;
font-size: .8em;}
h1 {
text-align: center;
text-indent: -.12em;
color: #f4f1de;
font: 220px "anchor-web-1","anchor-web-2", 'Impact', sans-serif;
font-weight: 900;
display: inline-block;
margin: 0 auto;
line-height: 1;
width: 100%;
text-shadow: #863027 .01em .01em 0,
#863027 .02em .02em 0,
#863027 .03em .03em 0,
#863027 .04em .04em 0,
#863027 .05em .05em 0,
#863027 .06em .06em 0,
#863027 .07em .07em 0,
#863027 .08em .08em 0,
#863027 .09em .09em 0,
#863027 .1em .1em 0;
}
h1 span.char4 {
letter-spacing: .05em;
margin-right: -.107em;
}
.char2 {
margin-right: .01em;
}
.char3 {
margin-right: -.01em;
}
.char6 {
margin-right: .035em;
}
::-moz-selection{ background: rgba(255,255,255, .3); color:#fff; }
::selection { background: rgba(255,255,255, .3); color: #fefcf2; }
@media screen and (min-width: 650px) and (max-width:1099px) {
p{
font-size: 1.5em;
}
}
@media screen and (min-width: 1100px) {
p{
font-size: 2em;
}
}
@media screen and (min-width: 1280px) {
p{
font-size: 2.3em;
}
}
@media screen and (min-width: 1400px) {
p{
font-size: 2.75em;
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://raw.github.com/jasonenglish/jquery-flex/master/jquery.flex.js"></script>
<script src="jquery.fittext.js"></script>
<header>
<script>
$("#responsive_headline").fitText();
</script>
<h1>FLEXPERIMENT</h1>
</header>
<div class="flex">
<a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="325" height="175">A</a>
<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
<a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="305" height="150">G</a>
<a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
<a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="200" height="140">I</a>
<a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
<a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a>
</div>
<footer>
<a href="http://skuda.net" bg="chick">
</a>
</footer>
Raw
settings.json
{"view":"split-vertical","fontsize":"120","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment