jueves, 5 de mayo de 2011

Vagabundia: : “El tamaño de las cosas” y 1 más artículos

Vagabundia: : “El tamaño de las cosas” y 1 más artículos


El tamaño de las cosas

Posted: 04 May 2011 08:00 PM PDT

Un elefante ocupa mucho espacio, dos elefantes ocupan mucho más ... es obvio ¿verdad? Pero también es obvio que si al elefante le ponemos un abrigo grueso, su volumen se incrementará aunque vaya uno a saber para qué habría que abrigar a un elefante.

En una página web pasa lo mismo; "algo" tiene un tamaño, ya sea porque nosotros lo hayamos establecido con width y height o bien porque "mide" eso.

El caso típico es una imagen; yo sé que esta mide exaxtamente 133x200:


Lo sé porque la medí, porque la miré en el navegador y decía que medía eso o bien porque la cargué indicando expresamente que la quería de ese tamaño.

Hasta ahí, todo bien pero empezamos a ponerle detallecitos, muchos detallecitos y, cuando queremos ubicarla, no entra en ese espacio que habíamos reservado. Algo falla y este problema sólo se resuelve con aritmética.
.estaimagen {   background-color: #FFF;   border: 5px solid #505961;   box-shadow: 0 0 20px #FFF;   height: 200px;   margin: 20px;   padding: 3px;   width: 133px; }  <img class="estaimagen" src="URL_iIMAGEN" />

¿Cuál es el tamaño final? ¿Qué espacio necesito para que entre y no se corte?


Sumamos:

si el ancho es 133
padding 3 a cada lado así que 3 + 3 = 6 => 133 + 6 = 139
border 5 a cada lado así que 5 + 5 = 10 => 139 + 10 = 149
margin 20 a cada lado así que 20 + 20 = 40 => 149 + 40 = 189

ancho + padding + border + margin = ancho real
133 + 6 + 10 + 40 = 189

Lo mismo pasará con la altura:

alto + padding + border + margin = alto real
200 + 6 + 10 + 40 = 256

¿Y la sombra? En versiones anteriores a IE9 se usan filtros que no las muestran de modo similar, son "duras" así que no las tenemos en cuenta. De todas maneras, en todos los navegadores, esas sombras también ocupan espacio; y es por eso que en este ejemplo se agrega un margen para que "haga lugar" a esa sombra. Si usáramos valores más altos, deberíamos incrementar ese margen o las sombras se cortarían.

Verificamos el calculo poniendo varias imágenes dentro de un contenedor de tamaño fijo:
<style>   #demotamanio {     border: 1px solid #666;     height: 256px;     margin: 0 auto;     overflow: hidden;     position: relative;     width: 189px;   }   #demotamanio br {     display:none;   }   #demotamanio img {     background-color: #FFF;     border: 5px solid #505961;     box-shadow: 0 0 20px #FFF;     float:left;     height: 200px;     margin: 20px;     padding: 3px;     width: 133px;   } </style>  <div id="demotamanio">   <div>     <img src="URL_IMAGEN1"/>     <img src="URL_IMAGEN2"/>     <img src="URL_IMAGEN3"/>   </div> </div>

x1 | x2 | x3

Otra vez aritmética; si cada imagen requiere 189 pxeles, dos imágenes requieren 189 x 2 = 378 y tres 189 x 3 = 567

Menús y transiciones

Posted: 03 May 2011 09:19 PM PDT

Si digo que las transiciones sirven para cualquier cosa, es una exageración pero ... sirven para casi cualquier cosa. Esta vez, veamos cómo podrían aplicarse a la creación de menús expandibles.

Creo el HTML que es un rectángulo en donde colocamos una lista ordenada cuya clase es visible y dentro de esta, una segunda lista cuya clase es novisible:
<div id="demomenu">   <ul class="visible">     <li>mi menú    <ul class="novisible">     <li><a href="#">item 1</a></li>     <li><a href="#">item 2</a></li>     <li><a href="#">item 3</a></li>     <li><a href="#">item 4</a></li>     <li><a href="#">item 5</a></li>     </ul>   </ul> </div>
Y el CSS:
<style>  /* las reglas generales */ #demomenu { /* este es el rectángulo que contendrá todo */   margin: 0 auto 50px;   position: relative; /* lo posicionamos de manera relativa */   width: 200px;  /* definimos su ancho */   z-index: 100; /* hacemos que quede por encima de las demás etiquetas */ } #demomenu ul { /* reseteamos las lista quitándoles posibles propeidades */   list-style-type: none;   margin: 0;   padding: 0; } #demomenu li { list-style-type: none; } #demomenu a { /* establecemos las propiedades de los textos delos enlaces */   color: #456;   font-size: 17px;   text-decoration: none;   text-shadow: 1px 1px 1px #FFF; } #demomenu a:hover { color: #000; }  /* esta es la  lista visible */ #demomenu .visible {   background-color: #456;   border: 2px solid #ABC;   border-radius: 4px;   box-shadow: 0 0 5px #FFF inset;   cursor: pointer;   padding: 5px 0;   text-align: center;   /* estas son las propiedades importantes */   display: block;   position: absolute;   width: 200px; } #demomenu ul.visible li { /* el primer item no es un enlace así que definimos sus propeidades */   color: #EEEEEE;   font-family: Tahoma;   font-size: 24px;   text-shadow: 1px 1px 1px #000; }  /* cada item que permanece oculto */ #demomenu ul.visible ul li {   background-color: #ABC;   border-top: 2px solid #456;   padding: 0 0 5px;   /* esta transición afectará al color de fondo de cada item */   -moz-transition: all 1s;   -webkit-transition: all 1s;   -o-transition: all 1s;   transition: all 1s; }  /* la lista oculta */ #demomenu .novisible {   display: block;   padding: 0 10px;   position: relative;   top: 10px;   /* con esto la mantenemos oculta */   height: 0;   overflow: hidden;   /* la transición hará que se anime el cambio de altura */   -moz-transition: all 1s;   -webkit-transition: all 1s;   -o-transition: all 1s;   transition: all 1s; }  /* cambia el color de fondo */ #demomenu ul.visible ul li:hover { background-color: #CDE; }  /* cambia la altura y por lo tanto, se hace visible */ #demomenu ul.visible:hover .novisible { height: 200px; }  </style>


Otra variante. En lugar de desplegar algo verticalmente, lo desplegaremos horizontalmente o mejor dicho, ampliaremos su ancho para dejar visible lo que está debajo; el HTML es otra lista:
<ul id="demomenu">   <li>item 1     <div>       <a href="#">item 11</a>       <a href="#">item 12</a>       <a href="#">item 13</a>     </div>   </li>   <li>item 2     <div>       <a href="#">item 21</a>       <a href="#">item 22</a>       <a href="#">item 23</a>     </div>   </li>   <-- seguimos agregando --> </ul>
Y el CSS cásico del ejemplo:
<style> #demomenu { /* reseteamos la lista quitándole posibles propeidades */   list-style-type: none;   margin: 0;   padding: 0; } #demomenu li { /* cada item de la lista */   background-color: #456;   border: 2px solid #ABC;   box-shadow: 0 0 5px #FFFF inset;   border-radius: 0 10px 10px 0;   color: #EEE;   font-family: Tahoma;   font-size: 24px;   height: 32px;   line-height: 32px;   list-style-type: none;   margin: 2px 0;   position:relative;   width: 100px;   text-shadow: 1px 1px 1px #000;   /* esta es la propiedad que se animará */   padding-left: 10px;   /* la transición  */   -moz-transition: all 1s;   -webkit-transition: all 1s;   -o-transition: all 1s;   transition: all 1s; } #demomenu li div { /* los enlaces interiores permanece ocultos */   left: 10px;   position: absolute;   top: -3px;   width: 200px;   /* esta es la propiedad que se animará */   opacity: 0;   /* la transición  */   -moz-transition: all 1s;   -webkit-transition: all 1s;   -o-transition: all 1s;   transition: all 1s; }  /* al poner el cursor encima, aumentamos el padding mostrando lo que hay debajo */ #demomenu li:hover { padding-left: 300px; } #demomenu li:hover div { opacity: 1; }  #demomenu li div a { /* las propeidades de los enlaces ocultos */   color: #000;   font-size: 14px;   margin: 0 5px;   text-shadow: 1px 0 1px #FFF; } #demomenu li div a:hover {   color: #FFF;   text-shadow: 1px 0 1px #000; }  </style>

No hay comentarios:

Publicar un comentario

Correo Vaishnava