α-wwwiki

α-wwwiki :: history/expandPicts/20130612-204608.txt

editor : alpha [82.248.147.227] 2013/06/12 20:46:08
_h3 Expanding Pictures
_p In order to play with CSS rules, clik on the "include someCSS" button. You can use the tabKey (and the shift tabKey) to go from one picture to another. Except the input button, the code is free of any Javascript code, just pure CSS.

{input {@ type="submit" value="include someCSS" onclick="°°
  var css = document.createElement('style');
  css.innerHTML = getId('styles').innerHTML;
  document.head.appendChild( css );
  this.value = 'OK, someCSS is included !';
  this.disabled='disabled';
°°"}}

{div {@ id="section" class="group"}
  {div {@ class="figure" tabindex="1" }
    {img {@ src="data/amelie_sepia.jpg" height="150" alt="amelie"}}
    {div {@ class="figcaption"}amelie_sepia}
  }		
  {div {@ class="figure" tabindex="2"}
    {img {@ src="data/franchouillard.jpg" height="150" alt="frenchy"}}
    {div {@ class="figcaption"}franchouillard}
  }		
  {div {@ class="figure" tabindex="3"}
    {img {@ src="data/apple.jpg" height="150" alt="apple"}}
    {div {@ class="figcaption"}apple}
  }
}

_h3 CSS rules
{pre {@ id="styles"}°°

#section { 
  display:block;
  background:#fff;
  padding:10px;
}

.group:after { 
  visibility:hidden;
  display:block;
  font-size:0;
  content:' ';
  clear:both;
}

.figure { 
  display:block;
  background:white;
  padding:20px;
  float: left; 
  margin: 0 10px 0 0; 
  padding:2px;
  text-align:center;
  background: white;
  border: 1px solid red;

-webkit-box-shadow:0 0 8px black; 
  -moz-box-shadow:0 0 8px black;
   box-shadow:0 0 8px black;

-webkit-transform: rotate(5deg); 
  -moz-transform: rotate(5deg);

-webkit-transition: all 0.7s ease; 
  -moz-transition: all 1s ease;
  position: relative;
}

.figcaption { 
  text-align: center; 
  display: block; 
  font-size: 12px; 
  font-style: italic; 
}

.figure:hover {
  -webkit-transform: rotate(-3deg); 
  -moz-transform: rotate(-3deg);
}

.figure:focus { 
  -webkit-transform: rotate(-3deg) scale(2.5); 
  -moz-transform: rotate(-3deg) scale(2.5);
  z-index: 9999;
  outline:none;
}
°°}