Skip to content

Instantly share code, notes, and snippets.

@gcyrillus

gcyrillus/dabblet.css

Created June 13, 2012 00:41
Show Gist options
  • Save gcyrillus/2921057 to your computer and use it in GitHub Desktop.
Save gcyrillus/2921057 to your computer and use it in GitHub Desktop.
Download ZIP
GCyrillus Power html book CSS 3- copy but do not sale nor forget my name - it will turn obsolete once , you know.
Raw
dabblet.css
/* GCyrillus Power html book CSS 3- copy but do not sale nor forget my name - it will turn obsolete once , you know.
works fine only with ff13 at the moment */
html,body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
display:-moz-box;
box-orient:vertical;
box-pack:center;
box-align:center;
}
h1,h2,h3,h4,h5,h6 {text-align:center;font-variant:small-caps;position:relative;z-index:1;}
p {text-indent:1em;padding:0.5em 1em;position:relative;z-index:1;}
p:first-letter {text-shadow:0 0 1px white, 0 0 3px black;font-size:2em;vertical-align:-0.05em;;
}
#book {
display:block;
position:relative;
height:614px;
width:874px;
outline:0;
}
#book > section, #book > section > article {
height:100%;width:100%;
position:absolute;
top:0;right:0;
perspective:2800px;
transform-style: preserve-3d;
backface-visibility:hidden;
}
#book > section > article:nth-child(even) {
box-shadow:inset0 0 0 1px #999;
}
#book > section >article{
width:427px;outline:0;
}
#book header {
margin-left:50%;
width:50%;
height:100%;
display:-moz-box;
box-orient:vertical;
box-pack:center;
box-align:center;
position:relative;
z-index:2;
background:#eee;
box-shadow:inset 0 0 0 15px #eee,inset 0 0 0 18px #123;
}
article:before , #book header:before {
content:'';
border:none;
background-image:-moz-linear-gradient(0,#fff 0%, #ccc 49.5%,black 50%, #ccc 50.5% , #fff 100%);
border-radius:1em;
width:10px;
position:absolute;
top:0;
bottom:0;
right:429px;
margin-left:-5px;
}
article > div {
width: 427px;
float:right;
margin:0 5px;
background:#eee;
min-height:100%;
z-index:1;
}
article > div:before , #book header:after {
content:'';
position:absolute;
top:1em;left:1em;bottom:1em;right:1em;
background:#eee;
z-index:0;
}
#book:focus header {
left:-999px;/* bug chrome */
transform-origin:left;
transform:rotateY(-180deg) ;
transition: transform 0.25s;
}
article > div:first-child {
margin-right:0;
float:left;
margin-left:-437px;
transform-origin:right;
transform:rotateY(180deg) ;
transition: transform 5s;
z-index:1;
}
article:last-of-type > div:first-child {
transition: 0.25s;
}
#book > section > article:focus + article > div:first-child,
#book:focus section article:first-of-type div:first-child {
transform:rotateY(0deg);
transition: transform 1s;
transform-origin:right;-moz-perspective: 40px;
transform-style: preserve-3d;
z-index:30;
}
#book > section > article:focus + article,
#book:focus section article:first-of-type {
z-index:35;
}
article:focus {overflow:hidden;padding-left:437px;}
article:last-of-type {overflow:visible;padding:0;}
img {box-shadow:0 0 2px black, 0 0 4px white;border-radius:3px;}
/* chrome funny behavior fixing */
#book > section > article:focus + article ~article, #book > section> article {z-index:0!important;left:-9999px;}
#book > section > article:focus + article , #book:focus > section > article:first-of-type {left:437px;z-index:100!important;transform:rotate(0deg);;}
Raw
dabblet.html
<div id="book" tabindex=0">
<section>
<header>
<h1>HTML BOOK</h1>
<h2>CSS POWER</h2>
</header>
<article id="p1-2" tabindex="0">
<div id="p1"><h2>titre page 1</h2>
<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis
illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato
Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
<p><img src="http://lorempixum.com/380/60/sports" alt=""/></p>
<p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae
ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente
aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam
parietes arcanorum soli conscii timebantur.</p>
</div>
<div id="p2">
<h3>titre page 2</h3><p>Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta
qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen
alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut
longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>
<p>Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione
magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura.
Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant
ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. </p>
<p><img src="http://lorempixum.com/380/60/food" alt=""/></p>
</div>
</article>
<article id="p3-4" tabindex="0">
<div id="p3">
<p><img src="http://lorempixum.com/380/60/nature" alt=""/></p>
<h2>titre page 3</h2>
<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis
illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato
Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
<p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae
ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente
aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam
parietes arcanorum soli conscii timebantur.</p>
<p><img src="http://lorempixum.com/380/60/abstract" alt=""/></p>
</div>
<div id="p4">
<h3>titre page 4</h3><p>Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta
qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen
alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut
longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>
<p><img src="http://lorempixum.com/380/60/animals" alt=""/></p>
<p>Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione
magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura.
Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant
ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. </p>
</div>
</article>
<article id="p5-6" tabindex="0">
<div id="p5"><h2>titre page 5</h2>
<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis
illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato
Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
<p><img src="http://lorempixum.com/380/60/nightlife" alt="" /></p>
<p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae
ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente
aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam
parietes arcanorum soli conscii timebantur.</p>
<p><img src="http://lorempixum.com/380/60/city" alt="" /></p>
</div>
<div id="p6">
<h3>titre page 6</h3><p>Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta
qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen
alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut
longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>
<p>Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione
magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura.
Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant
ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. </p>
<p><img src="http://lorempixum.com/380/60/fashion" alt=""/></p>
</div>
</article>
<article id="p7-8" tabindex="0">
<div id="p7">
<p><img src="http://lorempixum.com/380/60/transport" alt=""/></p>
<h2>titre page 7</h2>
<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis
illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato
Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
<p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae
ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente
aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam
parietes arcanorum soli conscii timebantur.</p>
<p><img src="http://lorempixum.com/380/60/people" alt=""/></p>
</div>
<div id="p8">
<h3>titre page 8</h3><p>Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta
qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen
alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut
longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>
<p><img src="http://lorempixum.com/380/60/technics" alt=""/></p>
<p>Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione
magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura.
Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant
ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. </p>
</div>
</article>
</section>
</div>
<p>HTML/CSS provided by GCyrillus, image for test purposes only from http://lorempixum.com - it stands <a title="dabblet.com" href="http://dabblet.com/gist/2920736">here</a> </p>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment