Vagabundia: : “El tamaño de las cosas” y 1 más artículos |
| 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>  Otra vez aritmética; si cada imagen requiere 189 pxeles, dos imágenes requieren 189 x 2 = 378 y tres 189 x 3 = 567 |
| 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> |
| You are subscribed to email updates from Vagabundia To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No hay comentarios:
Publicar un comentario