Página Inicial de WebUsable

Página anterior Página Inicial de WebUsable Disminuir tamaño de letra Aumentar tamaño de letra Mapa de WebUsable Envía tus comentarios
 

 Ejemplos y trucos útiles con CSS's

(Alguno de los ejemplos sólo funcionan en Internet Explorer)

Temas relacionados: DHTML y CSS's | Tabla de Referencia de CSS's | Tablas y CSS's

Contenido:
  1. Botones
  2. Äreas de trabajo
  3. Variaciones en los textos
    1. 3.1 Simulación de sombras
    2. 3.2 Resaltados
    3. 3.3 Cambios de enfoque
    4. 3.4 Enmarcados
  4. Menús de navegación
    1. 4.1 Barra de Opciones con Rollover
    2. 4.2 Barra de Opciones con Rollover y Opción Seleccionada
    3. 4.3 Menú Dinámico Multinivel
  5. Barras de Herramientas
    1. 5.1 Barra de Iconos con Rollover
    2. 5.2 Barra de Iconos con Opciones Subordinadas
    3. 5.3 Barra de Iconos con Rollover y Opción Seleccionada
  6. Posicionamiento de objetos
    1. 6.1 Posicionamiento flotante
    2. 6.2 Contenedor contenido
    3. 6.3 Superposición de capas
  7. Ocultar objetos
    1. 7.1 Ayuda de contexto
    2. 7.2 Simulación de ventanas Pop-up

  1. Botones
  2. Äreas de trabajo

  3. Variaciones en los textos

    1. 3.1 Simulación de sombras: La especificación CSS2 provee una forma de asociar sombra al texto, mediante la propiedad:

      text-shadow

      Sin embargo esta especificación (como algunas otras) no está soportada ni por Netscape ni por Internet Explorer.

      Pero a garndes males grandes remedios, y hay una forma bastante simple una sombra (y no sólo de un texto). Consiste en utilizar la propiedad de poscionamiento, situando el mismo texto a ensombrecer en 2 contenedores diferentes (capas) y posicionarlas próximas pero no solpadas. También utilizaremos la propiedad z-index para establecer la prioridad de visualización de ambas capas:

      Texto con sombra Clases de estilo
      Soy un texto
      Soy un texto

      .swText1 {color:#FFAA00;font-weight:bold;font-size: 20px;font-family: verdana,arial,helvetica,sans-serif;}

      .swText2 {color:#A1A1A1;font-weight:bold;font-size: 20px;font-family: verdana,arial,helvetica,sans-serif;}

      .swPosText0 {position: relative;top: -32px;left: -50px;}

      .swPosText1 {position: absolute;top: 2px;left: 2px;z-index:2;}

      .swPosText2 {position: absolute;top: 5px;left: 5px;z-index:1;}

      Texto con doble sombra
      Texto con doble sombra
      Texto con doble sombra

      .swText3 {color:#00B2CF;font-weight:bold;font-size: 20px;font-family: verdana,arial,helvetica,sans-serif;}

      .swText4 {color:#A1A1A1;font-weight:bold;font-size: 20px;font-family: verdana,arial,helvetica,sans-serif;}

      .swText5 {color:#E1E1E1;font-weight:bold;font-size: 20px;font-family: verdana,arial,helvetica,sans-serif;}

      .swPosText4 {position: relative;top: -85px;left: -50px;}

      .swPosText1 {position: absolute;top: 2px;left: 2px;z-index:2;}

      .swPosText2 {position: absolute;top: 5px;left: 5px;z-index:1;}

      .swPosText3 {position: absolute;top: 8px;left: 8px;z-index:1;}

      Se debe ser cuidadoso en el posicionamiento de layers ya que con frecuencia hay conflictos con el flujo de objetos de HTML. Por su propia filosofía, los layers se posicionan con independencia de los elementos HTML y hay que conjugar adecuadamente la propiedad position con el elemento HTML donde se define el contenedor.

      Además de los capas contenedoras del texto, se ha utilizado un contenedor que englobe a los 2 layers de texto. Esto se hace así para posicionar correctamente el conjunto dentro de la página.

      En el segundo caso hemos implementado un atractivo efecto de doble sombra con sólo añadir un tercer contenedor de texto de color más atenuado. Combinado con otras posibilidades de CSS pueden otenerse títulos, anuncios o banners de peso casi despreciable evitando el uso de imagenes. Además la variación para posteriores usos es inmediata.


      2. Inicio de página


    2. 3.2 Resaltados: Combinando adecuadamente propiedades de las Hojas de Estilo pueden obtenerse atractivos efectos gráficos para encabezar páginas, secciones, apartados, títulos...

      En el primer ejemplo, para no ser integristas, hemos utilizado 3 pequeñas imágenes que junto a un par de clases nos proporcionan un sencillo pero agradable título de sección, por ejemplo, para un formulario.

      Texto con sombra Clases de estilo
      Título de Sección

      .ejStit1 {background: #FF0000;color: #FFFFFF;font-size: 13px;font-weight: bold;text-align: left;text-indent: 40px;padding: 0px 10px;font-family: verdana, arial, helvetica,sans-seriff;}

      .ejSectit {background: url("../images/ejHsectionBg1.gif");background-repeat: repeat-x;padding: 0px 10px;}

      Otro título sencillo

      .ejSectit3 {background: url("../images/ejHsectionBg2.gif");background-repeat: repeat-x;background-position: 30px 12px;repeat-x;padding: 0px 0px;line-height: 30px;}

      .ejStit3 {float: right;vertical-align: bottom;color: #FFAA00;font-size: 24px;font-weight: bold;text-align: center;margin-right: 10px;font-family: arial narrow,verdana, arial, helvetica,sans-seriff;}

      Datos de contacto
      (*) Teléfono particular:
      (*) Teléfono móvil:
      (*) Email:

      .ejStit2 {background: #003366;color: #FFFFFF;font-size: 13px;font-weight: bold;text-align: center;text-indent: 40px;padding-left: 20px;padding-right: 20px;font-family: verdana, arial, helvetica,sans-seriff;z-index: 10;}

      .ejSectit2 {background: url("../images/ejHsectionBg.gif");background-repeat: repeat-x;padding: 0px 10px;line-height: 20px;}

      .ejLabel1 {background: #EEEEEE;color: #000000;font-size: 10px;font-weight: normal;text-align: right;font-family: verdana, arial, helvetica,sans-seriff;}

      .ejInput1 {background: #FFFFFF;color:#000000;font-weight:normal; font-size:10px; text-align:left;border-left: 1px solid #FF7777;border-top: 1px solid #FF7777;border-right: 1px solid #8D2A22;border-bottom: 1px solid #8D2A22;font-family:verdana, arial, helvetica,sans-seriff;}

      .ejSection2 {background: #EEEEEE;border-bottom: 1px solid #FF0000;border-left: 1px solid #FF0000;border-right: 1px solid #FF0000;border-top: 0px solid #FF0000;}

      En el segundo caso con una imágen mínima se consigue un efecto bastante atrayente.

      En el tercer caso, de nuevo con 3 pequeñas imágenes y 5 clases de estilo podemos diseñar formularios de aspecto más atractivo que lo que habitualmente vemos en la Web.


      3. Inicio de página


    3. 3.3 Cambios de enfoque: Utilizando el atributo Hoover de pseudo-clases es inmediato aumentar o disminuir el enfoque de un texto concreto: Para ello es preciso simular un hiperlink que no haga nada:

      Enfoque Clases de estilo
      Pasa el ratón

      En HTML.

      <a class="swText6" href="javascript:void(null)"> Pasa el ratón</a>

      Y en CSS.

      a.swText6:link {color:#5CB2B3;font-weight: normal;font-size:18px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
      a.swText6:hover {color:#5CB2B3;cursor: hand;font-weight: normal;font-size:24px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
      a.swText6:active {color:#5CB2B3;font-weight: normal;font-size:18px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
      a.swText6:visited {color:#5CB2B3;font-weight: normal;font-size:18px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}

      Enfoca

      En HTML.

      <a class="swText6" href="javascript:void(null)"> Pasa el ratón</a>

      Y en CSS.

      a.swText7:link {color:#5CB2B3;font-weight: normal;font-size:18px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
      a.swText7:hover {color:#5CB2B3;cursor: hand;font-weight: normal;font-size:24px;text-decoration: none;border: 3px solid #CCECEE;font-family: verdana, arial,helvetica,sans-serif;}
      a.swText7:active {color:#5CB2B3;font-weight: normal;font-size:18px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
      a.swText7:visited {color:#5CB2B3;font-weight: normal;font-size:18px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}

      Pasa el ratón
      Pasa el ratón

      .swText3 {color:#00B2CF;font-weight:bold;font-size: 20px;font-family: verdana,arial,helvetica,sans-serif;}

      .swText4 {color:#A1A1A1;font-weight:bold;font-size: 20px;font-family: verdana,arial,helvetica,sans-serif;}

      .swText5 {color:#E1E1E1;font-weight:bold;font-size: 20px;font-family: verdana,arial,helvetica,sans-serif;}

      .swPosText4 {position: relative;top: -85px;left: -50px;}

      .swPosText1 {position: absolute;top: 2px;left: 2px;z-index:2;}

      .swPosText2 {position: absolute;top: 5px;left: 5px;z-index:1;}

      .swPosText3 {position: absolute;top: 8px;left: 8px;z-index:1;}

      En el segundo claso, de la misma forma, no sólo cambiamos el tamaño del texto sino también el fondo y le añadimos un borde.

      Finalmente en el tercer caso, mezclándo este procedimiento con la metodología seguida en los textos con sombra obtenemos un curioso efecto de enfoque.


      4. Inicio de página


    4. 3.4 Enmarcados: Enmarcar textos o áreas de objetos es absolutamente elemental si se usan CSS (que no lo es con HTML). Si además se hace uso de la propiedad Position pueden obtenerse efectos gráficos verdaderamente interesantes de una forma muy sencilla.

      Enfoque Clases de estilo
      Enmarcado

      .ejMarkText1 {color:#003366;font-weight:bold;font-size: 14px;border: 3px double #CC0000;padding: 3px 20px;font-family: verdana,arial,helvetica,sans-serif;}

      Enmarcado

      .ejMarkText2 {background: #FFEEEE;color:#003366;font-weight:bold;font-size: 14px;border-left: 1px solid #FFBCC5;border-top: 1px solid #FFBCC5;border-right: 3px solid #A47678;border-bottom: 3px solid #A47678;padding: 2px 20px;font-family: verdana,arial,helvetica,sans-serif;}

        Enmarcado

      .ejMarkCont3 {background: #D1D1D1;padding: 2px 10px;width: 100px;line-height: 25px;}

      .ejMarkText3 {position: relative;left: 8px;top: -25px;background: #000000;color:#FFFFFF;width: 100px;line-height: 25px;font-weight:bold;font-size: 13px;padding: 3px 10px;border: 2px solid #CC0000;font-family: verdana,arial,helvetica,sans-serif;}

      Por poner sólo algunos ejemplos de entre las muchas posibilidades que pueden darse, el primer caso es un borde doble sin más, conseguido con sólo definir dicho borde en la clase de estilo del texto.

      En el segundo caso obtenemos sombra de relieve sin más que cambiar el tamaño y color del borde de 2 de los lados del contenedor de texto.

      En el tercer caso obtenemos sombra paralela real sin más que definir un contenedor "ad-hoc" para la misma y posicionar adecuadamente el contenedor de texto.



Capítulos:
Capítulo anterior Botones Äreas de trabajo Textos Menús Barras de Herramientas Posicionamiento de objetos Ocultar objetos Capítulo siguiente

Temas relacionados: DHTML y CSS's | Tabla de Referencia de CSS's | Tablas y CSS's

  
 
WebUsable.com © Todos los derechos reservados.
Subir al inicio de página Página anterior Página Inicial de WebUsable Imprimir esta página Envía tus comentarios Recomienda esta página a un amigo Mapa de WebUsable