Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created January 25, 2014 21:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/8623787 to your computer and use it in GitHub Desktop.
Save anonymous/8623787 to your computer and use it in GitHub Desktop.
Download ZIP
=== FLIP EFFECT ===
Raw
dabblet.css
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
width: 80%;
max-width: 960px;
margin: 30px auto;
font: 16px Arial, sans-serif;
}
#flyer {
width: 775px;
}
#flyer a.umdrehen {
text-decoration: none;
margin-top: 3px;
color: #492A15;
font-weight: bold;
position: absolute;
bottom: 5px;
right: 5px;
}
#flyer_mediation {
position: relative;
width: 40%;
height: 355px;
float: left;
background: #5a5a5a;
color: white;
text-align: right;
padding: 5px;
}
#flyer_mediation hgroup {
margin-top: 50px;
}
#flyer_mediation h1 {
text-transform: uppercase;
font-size: 260%;
line-height: 0.8;
}
#flyer_mediation h1.lighter {
color: #A1A1A1;
font-size: 200%;
}
#flyer_mediation h3 {
font: italic 130% 'Times New Roman', serif;
}
#flyer_mediation h2 {
position: absolute;
bottom: 5px;
right: 5px;
}
#flyer_uebersetzung {
position: relative;
width: 60%;
height: 355px;
float: left;
background: #DB7632;
padding: 5px;
}
#flyer_uebersetzung h1 {
margin-top: 50px;
color: white;
font-size: 300%;
}
#flyer_uebersetzung em {
color: white;
}
#flyer_uebersetzung strong {
color: #D20C0C;
font-weight: bold;
}
#flyer_uebersetzung h3 {
font: italic 130% 'Times New Roman', serif;
}
#flyer_uebersetzung h2 {
position: absolute;
bottom: 5px;
left: 5px;
color: #D20C0C;
}
.back {
box-shadow: 0 15px 15px -8px #444;
color: black;
background: #DB7632;
font: 300 95% 'Open Sans', sans-serif;
/* Flyer_back_header anfang */
/* Flyer_back_header ende */
/* Flyer_back_footer anfang */
/* Flyer_back_footer ende */
}
.back #flyer_back_header {
padding: 15px;
}
.back #flyer_back_header p {
font-weight: bold;
margin-top: 20px;
font-family: Arial, sans-serif;
}
.back #flyer_back_header p:first-child {
margin-top: 0;
}
.back #flyer_back_header ol {
color: white;
list-style-position: outside;
list-style-type: disc;
font-size: 90%;
}
.back #flyer_back_header ol li {
margin-left: 40px;
}
.back #flyer_back_header #flyer_back_eins {
float: left;
width: 50%;
padding: 5px;
}
.back #flyer_back_header #flyer_back_zwei {
float: left;
width: 50%;
padding: 5px;
}
.back #flyer_back_footer {
background: white;
width: 100%;
height: 100px;
padding: 5px;
clear: both;
font-weight: 400;
font-size: 85%;
position: absolute;
bottom: 0;
left: 0;
}
.back #flyer_back_footer .relative {
position: relative;
}
.back #flyer_back_footer address {
font-style: normal;
}
.back #flyer_back_footer div[class*=col] {
float: left;
padding: 5px 10px;
}
.back #flyer_back_footer .col-1-4 {
width: 25%;
}
.back #flyer_back_footer .col-1-3 {
width: 33%;
}
.back #flyer_back_footer .col-1-25 {
width: 40%;
}
.back #flyer_back_footer a {
text-decoration: none;
color: black;
border-bottom: 1px dotted #555;
}
.back #flyer_back_footer a:hover {
border-bottom: 1px solid #555;
}
.back #flyer_back_footer span.sign {
font: 200%/90px Niconne, cursive;
}
/* === FLIP EFFECT === */
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
}
.flip-container:hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
position: relative;
}
.back {
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 1;
}
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
width: 775px;
height: 355px;
}
/* === CLEARFIX */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Raw
dabblet.html
<body>
<div id="flyer" class="clearfix flip-container">
<div class="flipper">
<div class="front">
<div id="flyer_mediation">
<h3>Mediazione</h3>
<h3>Mediación</h3>
<h3>Mediation</h3>
<h3>Медиация</h3>
<hgroup>
<h1>Mediation</h1>
<h1 class="lighter">Vermittlung</h1>
</hgroup>
<h2>Bürger</h2>
</div>
<div id="flyer_uebersetzung">
<h3><em>=</em> suppertonella gestione positiva di <strong>conflitti</strong></h3>
<h3><em>=</em> ayuda en <strong>conflictos</strong></h3>
<h3><em>=</em> kavgada ve <strong>anlaşmasızlıklarda çözüm yolları</strong></h3>
<h3><em>=</em> поддержка npu <strong>paзpeшeнии конфликтов</strong></h3>
<h1>= Hilfe bei <strong>STREIT</strong>
<h2>helfen Bürgern</h2>
<a href="#0" class="umdrehen">
<img src="http://s1.directupload.net/images/140123/7ovczudh.png">
Umdrehen
</a>
</div>
</div> <!-- front -->
<div class="back">
<div id="flyer_back_header">
<div id="flyer_back_eins">
<p>Wir helfen Ihnen:</p>
<ol>
<li>bei Streit mit Nachbarn</li>
<li>bei Streit am Arbeitsplatz</li>
<li>bei Streit zu Hause</li>
</ol>
<p>Wie helfen wir?</p>
<ol>
<li>Wir vermitteln durch ein klar strukturiertes, freiwilliges Verfahren.</li>
<li>Alle Beteiligten sollten im besten Fall mit einer gemeinsam erarbeiteten Vereinbarung zufrieden aus dem Streit hervorgehen.</li>
</ol>
</div>
<div id="flyer_back_zwei">
<p>Wer hilft?</p>
<ol>
<li>Wir arbeiten ehrenamtlich als Mediatoren.</li>
<li>Wir sind Frauen und Männer unterschiedlicher Alters- und Berufsgruppen und Herkunft.</li>
</ol>
<p>Bitte beachten Sie:</p>
<ol>
<li>Das Angebot ist kostenlos.</li>
<li>Die Teilnahme ist freiwillig.</li>
<li>Ihre Anliegen werden vertraulich behandelt.</li>
<li>Rechtsberatung ist nicht möglich.</li>
</ol>
</div>
</div> <!-- Ende Flyer_back_header -->
<footer id="flyer_back_footer" class="clearfix">
<div class="relative">
<div class="col-1-4">
<address>
Stadtteilbüro BauHof<br>
Teplitzstraße 17<br>
(Eingang Andreasstraße)<br>
65203 Wiesbaden-Biebrich
</address>
</div>
<div class="col-1-25">
<strong>Ansprechpartner:</strong><br>
<table>
<tr>
<td>Walter Barth</td>
<td>Tel.: (0611) 4 11 ** **</td>
</tr>
<tr>
<td>Monika Wagner</td>
<td>Tel.: (0611) 6 09 ** **</td>
</tr>
<tr><td><a href="http://www.caritas-wirt.de">www.caritas-wirt.de</a></td></tr>
</table>
</div>
<div class="col-1-3">
<span class="sign">BauHof</span>
<img src="http://upload.wikimedia.org/wikipedia/de/e/e5/Caritas_logo.svg" width="35">
<img src="http://upload.wikimedia.org/wikipedia/de/3/32/Wiesbaden_logo.svg" width="60">
</div>
</div> <!-- Ende .relative -->
</footer>
</div>
</div> <!-- flipper -->
</div>
</body>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment