martes, 5 de abril de 2016

Imágenes en marquesina

El código HTML de esta marquesina, si lo quieres usar en alguna publicación, es el siguiente:

P.D. Si quieres ver un ejemplo práctico de lo que puedes hacer con marquesinas como la que viste en este post, te remito a esta dirección electrónica, donde la marquesina fue útil para una sinopsis fotográfica de un video que aparece en esa publicación, y que fue catalogado como el video más viral del año 2015: http://bellasysensuales.blogspot.com/

Ver màs »

sábado, 26 de diciembre de 2015

Imágenes en acordeón

CSS-Only Accordion Effect: Horizontal Accordian

Montañas

Rios

cuevas

Cataratas

________________________________________________________________________________

El código html es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS-Only Accordion Effect: Horizontal Accordian</title>
<style>
body {
   font: small/1.2 Arial, Helvetica, sans-serif; }
#accordion {
   width: 500px;
   margin: 100px auto; }
#accordion div {
   float: left;
   width:25%;
   height: 300px;
   overflow: hidden;}
#accordion:hover div {
   width: 20px; }
#accordion:hover div:hover {
   width: 440px;
   overflow: auto; }

#spring {
   background-color: #CCFF99; }
#summer {
   background-color:#FF6633; }
#autumn {
   background-color: #FFCC00; }
#winter {
   background-color:#99FFFF; }
h1 {
   font-size: 150%;
   margin: 10px 10px .2em 25px; }
p {
   margin: 1em 25px; }
</style>
</head>
<body>
   <div id="accordion">
      <div id="spring">
         <h1>Spring</h1>
         <p>Spring ......</p>
      </div>
      <div id="summer">
         <h1>Summer</h1>
         <p>The seasons are considered ....</p>
         <p>Today, the meteorological reckoning of the seasons is used in Australia, Denmark, the former USSR and by many people in the United Kingdom, but the astronomical definition is still more frequently used in the United States.</p>
      </div>
      <div id="autumn">
         <h1>Autumn</h1>
         <p>Autumn .....</p>
      </div>
      <div id="winter">
         <h1>Winter</h1>
         <p>Winter is .....</p>
      </div>
      <div style="float: none; clear: both; height: 0;"> </div>
   </div>

</body>
</html>

________________________________________________________________________________