benschwarz

<h1>An auto playing image gallery with controls</h1>

<div class="fading-gallery fading-gallery-size-3">
  <div id="image-1" class="control-operator"></div>
  <img src="http://placehold.it/200x300.png&text=one">

  <div id="image-2" class="control-operator"></div>
  <img src="http://placehold.it/200x300.png&text=two">

  <div id="image-3" class="control-operator"></div>

benschwarz

<script id="article-template" type="text/template">
	<article>
		<h1 class="title"></h1>
		<time class="publishedDate"></time>
		<div class="content"></div>
	</article>
</script>
<div id="blog">Loading</div>

<script src="js/plates.js"></script>

benschwarz

/**
 * The first commented line is your dabblet’s title
 */

body { font-size: 500%; } 

label, input[type='checkbox']  { display: none; }
input[type='checkbox']:checked ~ .on { display: block; }
input[type='checkbox'] ~ .off { display: block; }

benschwarz

/**
 * The first commented line is your dabblet’s title
 */

body { font-size: 500%; } 

input { width: 400%; }

benschwarz

body { padding: 10em; }
textarea { min-width: 40em; }

div {
  padding: 2em;
  border-left: 5px solid #c1c2c4;
  border-right: 5px solid #c1c2c4;  
  position: relative;
}

benschwarz

padding: 10em;

hr {
	background-color: black;
	border: 0;
}

benschwarz

/* duplicating a :hover transition using animation */
article {border: 1px solid red; min-height: 100px;}
.transition {
  float: right;
  transition: all 250ms;
  padding-top: 20px;
  opacity: 0;
}
article:hover .transition {
  opacity: 1;

benschwarz

.spin { 
width: 100px; height: 100px; font-size: 10em; animation: spin 2s infinite;
}

@keyframes spin {
  0% {transform: rotate(0); rotation-point: 50% 50%; }
  100% {transform: rotate(360deg); rotation-point: 50% 50%; }
}

benschwarz

article { border: 1px solid red; min-height: 100px}
article:hover menu {
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -ms-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation: fadeInUp 250ms ease-in-out alternate;
    -moz-animation: fadeInUp 250ms ease-in-out alternate;
    -ms-animation: fadeInUp 250ms ease-in-out alternate;

benschwarz

body { padding: 10em; }

.foo p::before {
  content: attr(data-dropcap);
  font-size: 700%;
  position: absolute;
  margin-top: -0.4em;
  margin-left: -0.5em;
  opacity: 0.4;
}