Página 3 de 3«123
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Algunos momentos interesantes (y útiles)
Algunos momentos interesantes (y útiles)
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 31 | 5:56 PM
Kotatsu: Herramienta online para crear tablas HTML fácilmente

A veces se vuelve una tarea tediosa el diseño web a la hora de crear tablas, más específicamente cuando deseamos que todas las celdas de una columna tengan una clase particular.

Para simplificarnos esta tarea, llegó Kotatsu, una herramienta creada especialmente para facilitar el desarrollo de tablas HTML.

Esta herramienta online, permite crear una tabla y asignar rápidamente clases a cada columna.

¿Cómo funciona?
Simplemente Añade tantas filas y columnas como necesites. Haz clic en “Generar HTML” y obtén tu código listo para usar.

Sí. ¡Más simple, imposible!

Ingresa a la web de Kotatsu y ponte manos a la obra.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 32 | 6:01 PM
Más velocidad al unificar los CSS de tu web

Cada día es más importante la velocidad de carga de nuestras páginas web y una de las cosas que sin duda ayuda a esto es reducir el número de ficheros que tenemos que abrir o consultar, tanto para CSS como para Javascript.

Unificar varios CSS en un único fichero de estilo para realizar una única petición HTTP es una tarea realmente sencilla. Solo tenemos que crear un fichero CSS con el contenido de todos nuestros CSS independientes y definirlos con @media.

Donde ahora tenemos esto:

Quote
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="screen" />
<link rel="stylesheet" href="header.css" type="text/css" media="screen" />

Pasaríamos a tener una única llamada a un único CSS que contendría algo así:

Quote
@media screen {
aquí el CSS del style.css
}
@media print {
aquí el CSS del print.css
}
@media header {
aquí el CSS del header.css}

Además podemos definir todos los media disponibles que tengamos en nuestra página web. Y recuerda que ahora en la definición de link sobra el media y quedaría algo así:

Quote
<link rel="stylesheet" href="style.css" type="text/css" />

Probar y veréis como una sencilla prueba en PageSpeed os dará un mejor resultado. Pero seguro que hay más cosas que puedes mejorar en tu página, pon empeño en ello porque redundará en una mayor velocidad de carga y además Google se sentirá más cómodo con tu sitio web.

Más información: Definición de media en w3.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 33 | 5:42 PM
Fixed Footer

Snippet para conseguir un pie de página que se quede fijo en la parte inferior de la pantalla.

Quote
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}

/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 34 | 11:48 AM
Crear cajas de mensajes con CSS y jQuery

Haciendo uso de CSS y jQuery podemos mostrar de una manera mucho más atractiva los mensajes que deseemos mostrar al usuario de nuestro sitio o aplicación web. Lo primero que deberemos hacer es crear el CSS para nuestras cajas.

Quote
.info, .exito, .alerta, .error {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.exito {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('exito.png');
}
.alerta {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('alerta.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}


El código XHTML sería, para cada uno de los mensajes, algo similar a:

Quote
<div class="info">Mensaje de información que deseamos mostrar al usuario</div>
<div class="exito">Mensaje de éxito de la operación realizada</div>
<div class="alerta">Mensaje de alerta que deseamos mostrar al usuario</div>
<div class="error">Mensaje que informa al usuario sobre el error que se ha producido</div>

Lo que nos daría un resultado similar al siguiente:

Ahora tan sólo queda añadir algún tipo de efecto con jQuery. Para poder interactuar con las cajas de mensajes de una forma genérica con jQuery, le añadiremos una clase más a cada uno de los elementos:

Quote
<div class="info mensajes">Mensaje de informació³n que deseamos mostrar al usuario</div>
<div class="exito mensajes">Mensaje de éxito de la operación realizada</div>
<div class="alerta mensajes">Mensaje de alerta que deseamos mostrar al usuario</div>
<div class="error mensajes">Mensaje que informa al usuario sobre el error que se ha producido</div>

Ahora tan sólo queda darle algún efecto con jQuery. Podemos animar el mensaje, cambiarlo de color, hacerlo aparecer, etc. En este ejemplo, y creo que es una forma bastante interesante de mostrar los mensajes, la caja que muestra el mensaje aparece, permanece durante tres segundos y desaparece tras un ligero parpadeo.

El código para ello sería:

Quote
$(document).ready(function(){
setTimeout(function(){ $(".mensajes").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(300);}, 3000);
});

El código para este ejemplo sería:

Quote
<!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>Mensajes2</title>
<style type="text/css">
.info, .exito, .alerta, .error {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.exito {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('exito.png');
}
.alerta {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('alerta.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){ $(".mensajes").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(300);}, 3000);
});
</script>
</head>
<body>
<div class="exito mensajes">Mensaje de éxito de la operación realizada</div>
<p>El mensaje desaparecerá a los tres segundos.</p>
</body>
</html>

Lógicamente podremos cambiar el tipo de mensaje variando la primera clase del div en función del resultado de las operaciones realizadas por el usuario o por la información que deseemos suministrarle.

  • Ver ejemplo en funcionamiento » »
  • Descargar ejemplo completo » »
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 35 | 6:31 PM
    Mostrar y ocultar información

    En determinadas ocasiones nos puede interesar poner opciones para mostrar información que inicialmente esté oculta. Por ejemplo en un listado de direcciones de empresas para que inicialmente se muestre sólo el listado de nombres y mostrar la información del ítem que escoja ver el usuario.

    Podríamos tener algo similar a este código fuente

    Quote
    <ul id="listaEmpresas">
    <li class="tituloItem">Empresa 1
    <div id="item_1" class="contenidoItem">
    <p>Empresa especializada en la elaboración de leporcias a la carta desde hace 6 años </p>
    <address>
    Dirección:<br />
    C/ Salmurriana 12 20345 Bastión, España <br />
    Tel. 123455678
    </address>
    </div>
    </li>
    <li class="tituloItem">Empresa 2
    <div id="item_2" class="contenidoItem">
    <p>Desde 1996 lenteja florindes por absoluta franquicia. </p>
    <address>
    Dirección:<br />
    C/ Pi 255-257 3984 Turrena, España <br />
    Tel. 87654321
    </address>
    </div>
    </li>
    </ul>


    Que se mostraría así por pantalla:
    • Empresa 1
    Empresa especializada en la elaboración de leporcias a la carta desde hace 6 años
    Dirección:
    C/ Salmurriana 12 20345 Bastión, España
    Tel. 123455678

    • Empresa 2
    Desde 1996 lenteja florindes por absoluta franquicia.
    Dirección:
    C/ Pi 255-257 3984 Turrena, España
    Tel. 87654321

    La idea es que al hacer click sobre el nombre de la empresa que queramos la información asociada se muestre o se oculte. Para ello crearemos una función Javascript que se encargue de realizar una u otra acción dependiendo del estado del contenedor que tiene la información.

    Creamos la función items() con un argumento id a través del cual le pasaremos como parámetro el número de identificador del contenedor con el cual queramos actuar. Los contenedores con la información llevan todos identificadores tipo item_1, item_2, item_3, etc. Bastará con que pasemos como argumento el número que diferencia a cada uno.

    Quote
    function ítems(id){}

    Una vez dentro de la función vamos a guardar dentro de una variable local (obj) el elemento HTML exacto con el que interactuar. Para ello le haremos referencia usando el método del DOM getElementById() y le pasaremos como argumento la parte común de los identificadores item_ y le concatenaremos el número que pasemos como argumento 'item_' + n

    Quote
    function items(id){
    var obj = document.getElementById('item_' + id)
    }

    Usaremos la propiedad CSS display y sus valores block o none para mostrar u ocultar el contenedor con la información respectivamente.

    A continuación comprobamos cuál es el estado del elemento, si está visible (display = 'block') o si está oculto (display='none')

    Quote
    if(obj.style.display == 'block')

    Si devuelve true (verdadero) le asignamos el valor none a la propiedad display del elemento

    Quote
    obj.style.display = 'none'

    Si no devuelve true le asignamos el mismo valor por el que le estamos preguntando

    Quote
    else obj.style.display = 'block'

    De esta forma siempre cambiará el valor al que no tenga asignado. Si está en block cambiará a none y viceversa en cada ocasión que pasemos al elemento por la función.

    Así la función nos queda de esta forma

    Quote
    <script type="text/javascript">
    <!--
    function items(id){
    var obj = document.getElementById('item_' + id)
    if(obj.style.display == 'block') obj.style.display = 'none'
    else obj.style.display = 'block'
    }
    //-->
    </script>


    ¿Qué nos queda ahora por hacer? Indicarle a cada elemento que contiene el nombre de la empresa que al hacer click en él se muestre u oculte la información asociada a ésta.

    Quote
    onclick="items(n)"

    …donde n será el número asociado al identificador del contenedor de la información. items(1) manejará el contenedor con id items_1, items(2) el que tiene por id items_2, etc.

    Quote
    <ul id="listaEmpresas">
    <li class="tituloItem" onclick="items(1)">Empresa 1
    <div id="item_1" class="contenidoItem">
    <p>Empresa especializada en la elaboración de leporcias a la carta desde hace 6 años </p>
    <address>
    Dirección:<br />
    C/ Salmurriana 12 20345 Bastión, España <br />
    Tel. 123455678
    </address>
    </div>
    </li>
    </ul>


    Aplicando los estilos CSS
    Aplicamos algo de formato a nuestra lista de empresas. Un ejemplo sencillo podría ser algo así

    Quote
    <style type="text/css">
    .tituloItem{
    cursor: pointer;
    font-weight: bold;
    }
    .contenidoItem{
    border-left: 1px dotted #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    padding-left: 10px;
    padding-bottom: 3px;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 0;
    }
    .contenidoItem p{
    margin: 3px;
    }
    </style>


    Y ahora alguien dirá que falta agregar el display con un valor de none para la clase contenidoItem para que la información asociada a cada empresa se encuentre inicialmente oculta ¿no? Pues no. Las páginas web pueden ser más o menos vistosas y pueden tener más o menos “cosas chulas” pero la misión principal de una página web es portar información y que esa información pueda ser siempre accesible por cualquier persona que acceda a nuestra página desde cualquier dispositivo. Desde luego que lo último que nos interesa es que aquellos visitantes que naveguen nuestro sitio sin Javascript se queden sin poder acceder a la información. De nada nos sirve darnos el trabajo de ponerla si luego no se llega a mostrar. De forma que de entrada la información estará toda visible y, en caso de que el agente de usuario (el programa que usa el dispositivo para navegar) que cargue la página disponga de soporte para Javascript y además se encuentre activado será entonces cuando el propio Javascript se encargue de poner la propiedad CSS display de los contenedores de información a un valor de none.

    Para ello agregaremos una función que se encargue de hacerlo tras cargarse el listado de empresas en el navegador.

    Lo primero que haremos será guardar el elemento que contiene el listado dentro de una variable de nombre listado.

    Quote
    listado = document.getElementById('listaEmpresas')

    Una vez localizado el objeto buscamos dentro de él los elementos que querremos ocultar cambiando su propiedad display a none. En el ejemplo hemos guardado la información dentro de elementos div así que serán esos elementos los que seleccionemos y se guardarán en la variable contenedores que será una variable de tipo array (listado de elementos)

    Quote
    contenedores = listado.getElementsByTagName('div')

    Ahora vemos cuántos de estos contenedores existen dentro de nuestro listado. Para ello le pedimos su propiedad length (longitud) y la guardamos en una variable de nombre numContenedores

    Quote
    numContenedores = contenedores.length

    ok, ahora nos vamos a pasear por cada uno de ellos para colocarles su propiedad display con un valor none pero antes nos hemos de asegurar de que se lo aplicamos sólo a los contenedores div que nos interesa. En el ejemplo usamos un solo div por empresa pero tal vez estos div podrían contener a su vez a otros div dependiendo de la cantidad de información que queramos meter y de cómo queramos distribuirla. Así que nos fijaremos nada más en los contenedores div cuyo id sea item_n. Para ellos usamos la sentencia condicional if para ver si es uno de los div que buscamos y nos fijamos si su id contiene la cadena 'item_' usando el método indexOf()

    Quote
    if(contenedores[m].id.indexOf('item_') == 0)

    en caso de cumplirse la condición le ponemos al elemento la propiedad display con su valor a none

    Quote
    contenedores[m].style.display = 'none'

    La función completa nos quedaría algo así

    Quote
    function ocultaItems(){
    listado = document.getElementById('listaEmpresas')
    contenedores = listado.getElementsByTagName('div')
    numContenedores = contenedores.length
    for(m=0; m < numContenedores; m++){
    if(contenedores[m].id.indexOf('item_') == 0)
    contenedores[m].style.display = 'none'
    }
    }


    Sólo nos queda realizar la llamada a la función detrás del listado de empresas.

    Quote
    <script type="text/javascript">
    <!--
    ocultaItems()
    //-->
    </script>

    La parte de Javascript quedará de la siguiente forma

    Quote
    <script type="text/javascript">
    <!--
    function items(id){
    var obj = document.getElementById('item_' + id)
    if(obj.style.display == 'block') obj.style.display = 'none'
    else obj.style.display = 'block'
    }
    function ocultaItems(){
    listado = document.getElementById('listaEmpresas')
    contenedores = listado.getElementsByTagName('div')
    numContenedores = contenedores.length
    for(m=0; m < numContenedores; m++){
    if(contenedores[m].id.indexOf('item_') == 0)
    contenedores[m].style.display = 'none'
    }
    }
    //-->
    </script>


    Aplicando los estilos CSS
    Aplicamos algo de formato a nuestra lista de empresas. Un ejemplo sencillo podría ser algo así

    Quote
    <style type="text/css">
    .tituloItem{
    cursor: pointer;
    font-weight: bold;
    }
    .contenidoItem{
    border-left: 1px dotted #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    padding-left: 10px;
    padding-bottom: 3px;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 0;
    }
    .contenidoItem p{
    margin: 3px;
    }
    </style>


    Y ahora alguien dirá que falta agregar el display con un valor de none para la clase contenidoItem para que la información asociada a cada empresa se encuentre inicialmente oculta ¿no? Pues no. Las páginas web pueden ser más o menos vistosas y pueden tener más o menos “cosas chulas” pero la misión principal de una página web es portar información y que esa información pueda ser siempre accesible por cualquier persona que acceda a nuestra página desde cualquier dispositivo. Desde luego que lo último que nos interesa es que aquellos visitantes que naveguen nuestro sitio sin Javascript se queden sin poder acceder a la información. De nada nos sirve darnos el trabajo de ponerla si luego no se llega a mostrar. De forma que de entrada la información estará toda visible y, en caso de que el agente de usuario (el programa que usa el dispositivo para navegar) que cargue la página disponga de soporte para Javascript y además se encuentre activado será entonces cuando el propio Javascript se encargue de poner la propiedad CSS display de los contenedores de información a un valor de none.

    Para ello agregaremos una función que se encargue de hacerlo tras cargarse el listado de empresas en el navegador.

    Lo primero que haremos será guardar el elemento que contiene el listado dentro de una variable de nombre listado.

    Quote
    listado = document.getElementById('listaEmpresas')

    Una vez localizado el objeto buscamos dentro de él los elementos que querremos ocultar cambiando su propiedad display a none. En el ejemplo hemos guardado la información dentro de elementos div así que serán esos elementos los que seleccionemos y se guardarán en la variable contenedores que será una variable de tipo array (listado de elementos)

    Quote
    contenedores = listado.getElementsByTagName('div')

    Ahora vemos cuántos de estos contenedores existen dentro de nuestro listado. Para ello le pedimos su propiedad length (longitud) y la guardamos en una variable de nombre numContenedores

    Quote
    numContenedores = contenedores.length

    ok, ahora nos vamos a pasear por cada uno de ellos para colocarles su propiedad display con un valor none pero antes nos hemos de asegurar de que se lo aplicamos sólo a los contenedores div que nos interesa. En el ejemplo usamos un solo div por empresa pero tal vez estos div podrían contener a su vez a otros div dependiendo de la cantidad de información que queramos meter y de cómo queramos distribuirla. Así que nos fijaremos nada más en los contenedores div cuyo id sea item_n. Para ellos usamos la sentencia condicional if para ver si es uno de los div que buscamos y nos fijamos si su id contiene la cadena 'item_' usando el método indexOf()

    Quote
    if(contenedores[m].id.indexOf('item_') == 0)

    en caso de cumplirse la condición le ponemos al elemento la propiedad display con su valor a none

    Quote
    contenedores[m].style.display = 'none'

    La función completa nos quedaría algo así

    Quote
    function ocultaItems(){
    listado = document.getElementById('listaEmpresas')
    contenedores = listado.getElementsByTagName('div')
    numContenedores = contenedores.length
    for(m=0; m < numContenedores; m++){
    if(contenedores[m].id.indexOf('item_') == 0)
    contenedores[m].style.display = 'none'
    }
    }


    Sólo nos queda realizar la llamada a la función detrás del listado de empresas.

    Quote
    <script type="text/javascript">
    <!--
    ocultaItems()
    //-->
    </script>

    La parte de Javascript quedará de la siguiente forma

    Quote
    <script type="text/javascript">
    <!--
    function items(id){
    var obj = document.getElementById('item_' + id)
    if(obj.style.display == 'block') obj.style.display = 'none'
    else obj.style.display = 'block'
    }
    function ocultaItems(){
    listado = document.getElementById('listaEmpresas')
    contenedores = listado.getElementsByTagName('div')
    numContenedores = contenedores.length
    for(m=0; m < numContenedores; m++){
    if(contenedores[m].id.indexOf('item_') == 0)
    contenedores[m].style.display = 'none'
    }
    }
    //-->
    </script>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 36 | 1:13 PM
    Como hacer fondos “elásticos” para títulos y menús

    Para empezar el tema, les propongo recordar algunos momentos interesantes. Las capacidades de CSS son enormes, lo que permiten que, con un poco de imaginación, se puedan realizar efectos muy atractivos. En el presente artículo, mostraremos dos formas de hacer que el fondo se adapte a la extensión del texto, algo que como verán a continuación, parte de conceptos básicos muy simples.

    Títulos con fondo “elástico”
    En primer lugar, veremos cómo hacer que el fondo de un título o subtítulo tome el tamaño necesario para cubrir la extensión del texto asignado. Pero además, veremos que se trata de un primer método, ya que en el ejemplo siguiente, utilizaremos otra forma de hacerlo. Estos dos métodos, pueden utilizarse en cualquier tipo de texto que sea necesario que cuente con un fondo.

    Para seguir ambos ejemplos, crearemos una sola página web en HTML o XHTML, y crearemos un archivo CSS que colocaremos en una carpeta que denominaremos “archivos”. Para albergar las imágenes, crearemos un fichero que llamaremos “imágenes”. Ambas carpetas estarán en la raíz del sitio, es decir, en la misma carpeta en la que se encontrará el archivo HTML. En caso de que deseemos modificar esta estructura, deberemos realizar los cambios correspondientes en los enlaces de los códigos que presentaremos como ejemplo.

    Para realizar el ejemplo, deberán además, descargar las siguientes imágenes, simplemente copiándolas desde esta página.

    En primer lugar, daremos los códigos de ejemplo, para que puedan ver como se han dispuesto los diferentes elementos, para luego ir detallando la forma en que funciona. En primer lugar, el código HTML:

    Quote
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
    <head>
    <title>Títulos líquidos</title>
    <link rel="stylesheet" type="text/css" href="archivos/estilos.css" />
    </head>
    <body>
    <div id="pagina">
    <div id="titulo">
    <h2>Subtítulo de la página</h2>
    </div>
    <div id="titulo">
    <h2>Entrar</h2>
    </div>
    <div id="titulo">
    <h2>Título más largo que los anteriores, para ver como se comporta.</h2>
    </div>
    </div>
    </body>
    </html>

    A continuación, el código CSS:

    Quote
    html {
    margin: 0;
    padding: 0;
    }

    #pagina {
    width: 900px;
    margin: 0 auto;
    }

    #titulo {
    height: 63px;
    background: url(../imagenes/der.jpg) no-repeat right;
    padding: 0;
    display: table;
    }

    #titulo h2 {
    height: 45px;
    padding: 18px 50px 0px 50px;
    background: url(../imagenes/izq.jpg) no-repeat left;
    font: bold 20px arial, helvetica, sans-serif;
    color: white;
    }

    En el archivo HTML podemos ver que en primer lugar encontramos una capa marcada con el identificador “pagina”, que sirve simplemente para acotar el espacio a 900 pixeles y centrar todo el trabajo. En el archivo CSS, además, hemos eliminado el margin y padding que los navegadores muestran por defecto para la etiqueta <html>.

    Entrando en el ejemplo, vemos que cada título está compuesto por una capa y un título <h2> dentro de la misma. La capa título tiene una altura de 63 pixeles, que se corresponde con la altura de la imagen que utilizaremos como fondo. La imagen que se coloca como fondo de esta capa, es lo suficientemente ancha como para que, en caso de que el título se extienda por todo el ancho de la página, este espacio quede cubierto.

    Para que el borde redondeado de la imagen seleccionada aparezca a la derecha, se debe posicionar la imagen de fondo hacia la derecha, colocando el valor “right” en la propiedad “background-position” o utilizando el método abreviado, como está en el ejemplo, colocando el valor al final del enlace a la imagen. Con esto, la imagen comenzará a visualizarse desde la derecha, por lo que lo que “sobre”, quedará cortado por la izquierda.

    Pero ahora nos encontramos con el inconveniente de que la capa tratará de ocupar todo el ancho disponible. Para que esto no suceda y se limite a cubrir el espacio ocupado por el texto, agregamos el valor “table” a la propiedad “display”. Esto quiere decir que esta capa se comportará como una tabla, las que en caso de no estar determinadas sus dimensiones, solo ocupan el espacio determinado por el contenido.

    El borde izquierdo y el contenido está determinado por la etiqueta “<h2>”. Además de disponer la forma en que se visualizará el texto (fuente, color, etc.), se le agrega como fondo la imagen que da el borde izquierdo. Al contrario de la imagen de fondo de la capa, esta imagen debe posicionarse a la izquierda y sin márgenes. Al estar superpuesta a la imagen de fondo de la capa, da el efecto de que se trata del principio de una misma imagen. La parte que ofrece mayores dificultades, es combinar la altura con el relleno superior (padding-top). Se debe tener en cuenta que el tamaño final de un objeto es la suma de las dimensiones otorgadas al mismo más el relleno y los bordes.

    Por ello, para que el texto se vea en la mitad del fondo, se adoptó un relleno superior de 18 pixeles, lo que fue necesario descontar de la altura (45px + 18px = 63px). Para que el texto no comience encima del doblez que muestra la imagen, fue necesario establecer un relleno a la izquierda de 50 pixeles, que para que el texto se muestre centrado, fue necesario compensar con un relleno igual a la derecha.

    Menú con ítems de fondo “elástico”
    El ejemplo anterior, puede trasladarse a cualquier elemento, incluyendo los ítems de menú. Pero para desarrollar el ejemplo que seguiremos ahora, hemos optado por hacerlo de otra forma, que también puede aplicarse al ejemplo anterior sin mayores dificultades, y que consiste en realizarlo al revés. Si se sigue el ejemplo anterior, es necesario agregar el siguiente código al archivo HTML:

    Quote
    <div id="menu">
    <ul>
    <li><a href="#">Ítem 1</a></li>
    <li><a href="#">Otro ítem más</a></li>
    <li><a href="#">Ítem de menú</a></li>
    <li><a href="#">Corto</a></li>
    <li><a href="#">Ítem más largo aún</a></li>
    </ul>
    </div>

    Y las siguientes líneas en el archivo CSS:

    Quote
    #menu ul {
    list-style: none;
    }

    #menu ul li {
    float: left;
    background: url(../imagenes/izq-menu.jpg) no-repeat left;
    margin-left: 10px;
    }

    #menu ul li a {
    text-decoration: none;
    color: white;
    font: bold 12px arial, helvetica, sans-serif;
    background: url(../imagenes/der-menu.jpg) no-repeat right;
    margin-left: 20px;
    padding: 0 30px 0 10px;
    line-height: 32px;
    display: block;
    }

    #menu ul li a:hover {
    color: black;
    text-decoration: underline;
    }

    Como puede verse, se trata simplemente de una lista, a la cual se le han quitado los marcadores de los ítems (list-style: none), aunque esto no es imprescindible y solo se trata de algo estético. Luego se hace que los ítems de menú sean flotantes y se le asigna un fondo, el que se trata de una imagen larga que se posiciona a la izquierda, de forma que el borde redondeado izquierdo es proporcionado por la misma.

    Luego se hace que el ítem que contiene un enlace (#menu ul li a) también presente una imagen de fondo, la que en este caso se muestra a la derecha y solo contiene el borde derecho de la imagen final. A diferencia del ejemplo anterior, es necesario otorgar un margen izquierdo igual al ancho de la imagen de fondo del lado izquierdo, para que la imagen más larga no se monte encima de la corta. Para determinar la altura del ítem, se emplea la propiedad line-height en lugar de dar un valor de la altura.

    Conclusión
    Para conseguir algunos efectos, es posible emplear varios métodos diferentes, todos válidos y que dan el mismo resultado. En CSS no existen límites para el desarrollo, por lo que el único límite con que se cuenta, es el de la propia imaginación.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 37 | 4:35 PM
    Internet Explorer 9: Cómo hacer tu sitio web adjuntable a la barra de tareas de Windows

    Internet Explorer 9 permitirá adjuntar tu sitio web a la barra de tareas de Windows en forma de ícono, que al cliquear despliega un menú con diversas opciones. Aquí te contamos cómo hacer que tu sitio web sea compatible con esta herramienta.

    Sólo debes agregar las siguientes líneas en alguna parte de tu código HTML:

    Quote
    <meta name="application-name" content="Ars Technica"/>
    <meta name="msapplication-starturl" content="http://arstechnica.com/"/>
    <meta name="msapplication-tooltip" content="Ars Technica: Serving the technologist for 1.2 decades"/>
    <meta name="msapplication-task" content="name=News;action-uri=http://arstechnica.com/;icon-uri=http://arstechnica.com/favicon.ico"/>
    <meta name="msapplication-task" content="name=Features;action-uri=http://arstechnica.com/features/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-features.ico"/>
    <meta name="msapplication-task" content="name=OpenForum;action-uri=http://arstechnica.com/civis/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-forum.ico"/>
    <meta name="msapplication-task" content="name=One Microsoft Way;action-uri=http://arstechnica.com/microsoft/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-omw.ico"/>
    <meta name="msapplication-task" content="name=Subscribe;action-uri=http://arstechnica.com/subscriptions/;icon-uri=http://static.arstechnica.net/ie-jump-menu/jump-subscribe.ico"/>

    Debería verse así:

    Sin embargo, algunos no están conformes con la sugerencia del equipo desarrollador de IE9 sobre utilizar el tag meta. Algunos incluso sugieren utilizar HTML5, y brindan un ejemplo de cómo se vería el código necesario. Aquí lo tienes:

    Quote
    <head>
    <title>Ars Technica</title>
    <meta charset="utf-8" />
    <meta name="ms-application-jumplist" content="jump" />
    <style>
    #jump {display: none;}
    </style>
    </head>
    <body>
    <menu id="jump" type="context"
    label="Ars Technica" title="Ars Technica: Serving the technologist for 1.2 decades">
    <li><a href="http://arstechnica.com/">
    <img src="http://arstechnica.com/favicon.ico" /> News
    </a></li>
    <li><a href="http://arstechnica.com/features/">
    <img src="http://static.arstechnica.net/ie-jump-menu/jump-features.ico" /> Features
    </a></li>
    <li><a href="http://arstechnica.com/civis/">
    <img src="http://static.arstechnica.net/ie-jump-menu/jump-forum.ico" /> OpenForum
    </a></li>
    <li><a href="http://arstechnica.com/microsoft/">
    <img src="http://static.arstechnica.net/ie-jump-menu/jump-omw.ico" /> One Microsoft Way
    </a></li>
    <li><a href="http://arstechnica.com/subscriptions/">
    <img src="http://static.arstechnica.net/ie-jump-menu/jump-subscribe.ico" /> Subscribe
    </a></li>
    </menu>
    </body>

    Puedes utilizar el primero, o experimentar con el segundo. Lo dejamos a tu criterio.

    Una versión beta de Internet Explorer 9 fue lanzada en septiembre del 2010 y está previsto su lanzamiento definitivo a principios del 2011.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 38 | 6:12 PM
    Transicion Swishmax

    Este post está dedicado a Faraon y Jorge quienes pidieron cómo hacer este efecto de transición y como hacer el mouse over para que despliegue información con Swishmax.

    Sabemos que a toda la comunidad les servirá ya que es muy útil para los proyectos web.

    Este es el efecto lo puedes usar tanto para tus galerías de fotos como para textos. Recuerda darle mouse over a los logos para ver el efecto de desplegado que tiene.

    Aquí te dejamos lo que aprenderás.

    PASO 1
    Creamos un nuevo documento de Swishmax en blanco (Blank Movie).

    PASO 2
    Vamos a la ventana Properties – Botón Movie Properties y en la venta colocamos los valores que se ven en la imagen.

    PASO 3
    Con la herramienta Rectangle Tool vamos a crear un rectángulo que cubra toda nuestra película.

    PASO 4
    Ahora con la herramienta Autoshape Tool vamos a dibujar un cuadrado con las esquinas redondeadas como se ven en la imagen.

    PASO 5
    Vamos a arrastramos la imagen que nos servirá como lateral, esta la trabaje en Photoshop para darle unos efectos de sombra.

    PASO 6
    Con la herramienta Rectangle tool vamos a crear una forma que nos servirá como máscara así que cubriremos solamente la parte del cuadro redondeado que queremos que se vea.

    PASO 7
    En la ventana Outline movemos el cuadrado por debajo del rectángulo con las esquinas redondeadas.

    PASO 8
    Seleccionamos la forma que usaremos como máscara y el cuadrado con las esquinas y los agrupamos en un Movie Clip.

    PASO 9
    En la ventana Properites le colocamos el nombre de mascara a nuestro Movie Clip y marcamos la opción Use bottom object as mask.

    PASO 10
    Desplegamos nuestro Movie clip y al cuadro con puntas redondeadas en la Timeline vamos a agregarle un Place.

    PASO 11
    Ahora le agregamos un movimiento de 11 frames y movemos nuestro cuadro blanco hacia la izquierda.

    PASO 12
    Agregamos un movimiento de 12 frames y movemos solo un poco hacia la izquierda nuestro cuadro.

    PASO 13
    Por ultimo agregamos un movimiento de 19 frames y movemos el cuadro a su posición inicial.

    PASO 14
    En el frame 1 del movie Clip damos clic derecho y vamos a la opción Movie Control – stop().

    PASO 15
    Repetimos el paso anterior en el frame 52.

    PASO 16
    Arrastramos a nuestro documento las imágenes de los iconitos de Adobe y los colocamos en la posición que nos guste dentro de nuestro documento.

    PASO 17
    Vamos a la ventana Outline y seleccionamos las imágenes de los iconos y las agrupamos en un Movie Clip.

    PASO 18
    En al ventana Propertis al movie clip le colocamos el nombre de logos_1

    PASO 19
    Desplegamos nuestro Movie Clip y seleccionamos el primer icono y los agrupamos en un Botón.

    PASO 20
    En la ventana Properties le colocamos el nombre de suite y marcamos la opción Has separate over state y Use bounding box for hit-state.

    PASO 21
    Desplegamos nuestro botón y en el grupo Over State vamos a escribir el nombre del programa que representa el icono.

    PASO 22
    Repetimos los pasos anteriores con todos los iconos.

    PASO 23
    Ahora seleccionamos todos los botones y en la timeline en el frame 51 les agregamos un Fade In a todos.

    PASO 24
    Movemos los iconos hacia abajo solo un poco.

    PASO 25
    En el frame 61 agregamos un Stop.

    PASO 26
    Ahora en el frame 62 a todos los botones les agregamos un Fade Out.

    PASO 27
    Movemos los botones un poco más hacia abajo.

    PASO 28
    Colocamos un Stop en el frame 72.

    PASO 29
    Creamos un nuevo movie clip y lo nombramos logos_2 y colocamos el resto de logotipos que faltan solo que esta vez en el frame 1 agregamos un stop.

    PASO 30
    Contraemos nuestro Movie Clip y con al herramienta Text Tool vamos a escribir la palabra Logos 1 y Logos 2 y vamos a convertir cada uno de los textos en un botón.

    PASO 31
    Ahora al botón Logos 1 en la ventana Script vamos a agregarle el siguiente Código Action Script.

    Quote
    on (press) {
    mascara.gotoAndPlay(2);
    logos_2.gotoAndPlay(62);
    logos_1.gotoAndPlay(2);

    }

    PASO 32
    En el botón Logos 2 vamos a agregarle el siguiente Código Action Script.

    Quote
    on (press) {
    mascara.gotoAndPlay(2);
    logos_1.gotoAndPlay(62);
    logos_2.gotoAndPlay(2);
    }

    PASO 33
    Listo ya tenemos nuestro efecto terminado ahora con el comando Ctrl + T vemos una vista previa de nuestro efecto.

    Descarga el editable de transición Swishmax


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 39 | 5:19 PM
    Crear una apariencia de notas adhesivas con CSS y HTML 5

    En este post vamos a ver la forma de transformar una lista de HTML en un original efecto donde aparecerán como notas adhesivas donde anotar nuestras notas.

    Lo primero que hacemos es crearnos nuestra estructura de listas para crear las notas. Cada elemento de la lista será una nota, y estas estarán compuestas por un título y el texto que tendrá esa nota.

    Quote
    <ul>
    <li>
    <a href="#">
    <h2>Title #1</h2>
    <p>Text Content #1</p>
    </a>
    </li>
    <li>
    <a href="#">
    <h2>Title #2</h2>
    <p>Text Content #2</p>
    </a>
    </li>
    […]
    </ul>

    Lo siguiente que vamos a ver será el estilo que hay que darle para conseguir los cuadrados amarillos que formará parte del efecto.

    Quote
    *{
    margin:0;
    padding:0;
    }
    body{
    font-family:arial,sans-serif;
    font-size:100%;
    margin:3em;
    background:#666;
    color:#fff;
    }
    h2,p{
    font-size:100%;
    font-weight:normal;
    }
    ul,li{
    list-style:none;
    }
    ul{
    overflow:hidden;
    padding:3em;
    }
    ul li a{
    text-decoration:none;
    color:#000;
    background:#ffc;
    display:block;
    height:10em;
    width:10em;
    padding:1em;
    }
    ul li{
    margin:1em;
    float:left;
    }

    Después de esto, deberemos de tener algo parecido a lo siguiente.

    El siguiente paso que vamos hacer es darle algo de sombra al cuadro amarillo que hemos creado, y cambiar el tipo de letra que vamos a utilizar.

    Para hacerlo más real, utilizaremos un tipo de letra que parezca que haya sido escrita de forma manual. Para ello utilizaremos el API que proporciona Google para tipos de letras, y seleccionaremos el tipo “Reenie Beanie”.

    Una vez que tengamos seleccionada el tipo de letra de la API de Google, lo que hacemos es incluir en nuestro desarrollo el enlace hacia ese tipo de letra para que todo el mundo lo vea como nosotros queramos asegurándonos de que los navegadores permitirán ese tipo de letra.

    Quote
    <link href="http://fonts.googleapis.com/css?
    family=Reenie+Beanie:regular"
    rel="stylesheet"
    type="text/css">

    A continuación, lo que hacemos es cambiar en los estilos el tipo de letra y aplicar algo de padding al estilo.

    Quote
    ul li h2{
    font-size:140%;
    font-weight:bold;
    padding-bottom:10px;
    }
    ul li p{
    font-family:"Reenie Beanie",arial,sans-serif;
    font-size:180%;
    }

    Ahora vamos a modificar los estilos para conseguir el efecto de sombra del que hemos hablado antes. Para eso nos aprovecharemos de la característica de CSS 3 que nos facilita esa función, “box-shadow”, en sus distintas versiones para los distintos navegadores.

    Quote
    ul li a{
    text-decoration:none;
    color:#000;
    background:#ffc;
    display:block;
    height:10em;
    width:10em;
    padding:1em;
    /* Firefox */
    -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
    /* Safari+Chrome */
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    /* Opera */
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    }

    Después de hacer lo anterior, lo que nos queda es algo parecido a la imagen de abajo.

    El siguiente paso será inclinar las notas según su posición, para darle un aspecto de desorden y no parezcan que estén perfecta.

    Para esto también utilizaremos características CSS 3, en este caso “transform:rotate”.

    Quote
    ul li a{
    -webkit-transform:rotate(-6deg);
    -o-transform:rotate(-6deg);
    -moz-transform:rotate(-6deg);
    }

    Para darle una inclinación de forma aleatoria, utilizaremos la propiedad CSS3 “nth-child”.

    Quote
    ul li:nth-child(even) a{
    -o-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
    position:relative;
    top:5px;
    }
    ul li:nth-child(3n) a{
    -o-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    position:relative;
    top:-5px;
    }
    ul li:nth-child(5n) a{
    -o-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    position:relative;
    top:-10px;
    }

    Una vez aplicado esto, debemos de tener algo similar a esta imagen.

    El siguiente paso será hacer un zoom de la nota cuando pasemos el ratón por encima de alguna de ellas y que vuelva a su posición normal cuando saquemos el ratón de esa nota.

    Quote
    ul li a:hover,ul li a:focus{
    -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
    -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
    box-shadow:10px 10px 7px rgba(0,0,0,.7);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    position:relative;
    z-index:5;
    }

    También le damos un valor al elemento z-index de 5 para asegurarnos de que cuando se haga el zoom, ese elemento se quede por encima del resto.

    Por último lo que hacemos es proporcionar a las notas una transición más suaves y distintos colores.

    Para el tema de las transiciones, utilizaremos la característica de CSS “transition” para los diferentes navegadores.

    Quote
    ul li a{
    text-decoration:none;
    color:#000;
    background:#ffc;
    display:block;
    height:10em;
    width:10em;
    padding:1em;
    -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;
    -webkit-transition:-webkit-transform .15s linear;
    }

    Y para el tema de los colores, volvemos a utilizar la propiedad vista anterior “nth-child” para asignar a los distintos grupos distintos colores. Así a los pares le asignaremos un color verdoso y a los múltiplos de 3 un color morado. Al resto le dejaremos el color amarillo por defecto.

    Quote
    ul li:nth-child(even) a{
    -o-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
    position:relative;
    top:5px;
    background:#cfc;
    }
    ul li:nth-child(3n) a{
    -o-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    position:relative;
    top:-5px;
    background:#ccf;
    }

    Bajar.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Algunos momentos interesantes (y útiles)
    Página 3 de 3«123
    Búscar: