lunes, 21 de mayo de 2012

Cambio de Punteros con CSS


Cambiar el Puntero con CSS

Muchas veces necesitará dar un cambio al puntero dentro de sus páginas web, con este ejercicio aprenderá a hacerlo de una menera muy sencilla, les dejo el código completo y además un video-tutorial para que lo vean cuantas veces sea necesario.

<html>
<head>
<title>Cambio de Punteros con CSS</title>

<style type="text/css">
div {
    width:240px;
    height:100px;
    margin:10px;
    background-color:#ff8000;
    float:left;
    text-align:center;
    line-height:90px;
    font-family:arial;
    box-shadow: 1px 1px 15px 0px#999;
}
#default {cursor:default}
#cruz {cursor:crosshair}
#puntero {cursor:pointer}
#nw-resize {cursor:nw-resize}
#ne-resize {cursor:ne-resize}
#n-resize {cursor:n-resize}
#e-resize {cursor:e-resize}
#ayuda {cursor:help}
#texto {cursor:text}
#espera {cursor:wait}
</style>

</head>
<body>

<div id="default">Default</div>
<div id="cruz">Cruz</div>
<div id="puntero">Puntero</div>
<div id="nw-resize">Nw-resize</div>
<div id="ne-resize">Ne-resize</div>
<div id="n-resize">N-resize</div>
<div id="e-resize">E-resize</div>
<div id="ayuda">Ayuda</div>
<div id="texto">Texto</div>
<div id="espera">Espera</div>

</body>
</html>

jueves, 17 de mayo de 2012

Menú Horizontal

¿Cómo crear un menú con CSS?

Crear un menú vistoso y colorido es muy fácil con CSS en este tutorial les dejo el código completo para que lo puedan hacer, además un video-tutorial que explica paso a paso como hacerlo, espero que les guste y sea de mucha utilidad.

<html>
<head>
    <title>Menú Horizontal</title>
    <style type="text/css">
    #menu {
        padding:10px;
    }
    #menu li {
        display:inline;
    }
    #menu li a {
        font-family:arial;
        font-size:15px;
        text-decoration:none;
        float:left;
        padding:5px;
        background:#505050;
        color:#000;
    }
    #menu li a:hover {
        background:#900;
        color:#fff;
        margin-top:-5px;
        padding-bottom:10px;
        margin-left:5px;
        margin-right:5px;
        font-size:17px;
        font-family:"Times New Roman", Times, serif;
    }
   
    </style>
</head>
<body>
    <ul id="menu">
        <li><a href="#">INICIO</a></li>
        <li><a href="#">CONTACTOS</a></li>
        <li><a href="#">GALERIA</a></li>
        <li><a href="#">VIDEOS</a></li>
    </ul>
</body>
</html>

miércoles, 16 de mayo de 2012

Trabajando con Capas


Capas

En la primera entrada de este blog dije que la etiqueta div era una forma de generar una sección o división de la página web, en esta entrada veremos el uso de las capas y algunos de ejemplos sobre como configurarlas.

Es conveniente hacer un pequeño boceto de como debe quedar nuestra página web y las secciones en que diviremos la misma, el código de este trabajo lo escribo a continuación y para mayor facilidad y comprensión les dejo un video-tutorial.

<html>
<head>
    <title>Capas</title>
    <style type="text/css">
    #general {
        width:900px;
        height:500px;
        background:#CCC;
        margin:auto;
    }
    #capa1 {
        width:300px;
        height:500px;
        background:#FF6600;
        position:absolute;
    }
    #capa2 {
        width:300px;
        height:500px;
        background:#36F;
        position:absolute;
        margin-left:300px;
    }
    #capa3 {
        width:300px;
        height:250px;
        background:#390;
        position:absolute;
        margin-left:600px;
    }
    #capa4 {
        width:300px;
        height:250px;
        background:#996699;
        position:absolute;
        margin-left:600px;
        margin-top:250px;
    }
   
    </style>
</head>
<body>
    <div id="general">
        <div id="capa1">
       
        </div>
        <div id="capa2">
       
        </div>
        <div id="capa3">
       
        </div>
        <div id="capa4">
       
        </div>
    </div>
</body>
</html>



sábado, 12 de mayo de 2012

Definición de estilos CSS en la cabecera del documento

Podemos definir en la cabecera del documento, estilos que serán aplicados a toda la página.  Es una forma muy comoda de darle formato a todo el documento ya que los estilos serán seguidos en toda la página y nos ahorraremos mucho código aplicado a etiquetas individuales.

Para cumplir con este fin haremos uso de la etiqueta <style> y </style> colocada en la cabecera de la página para definir los distintos estilos del documento.

Vamos a ver un ejemplo de su uso:

<html>
<head>
    <title>Primer Ejemplo CSS</title>
    <style type="text/css">
        #cuadro {
           width:400px;
           height:200px;
           margin:auto;
           padding:10px;
           background:#F60;
           box-shadow:10px 10px 10px #999;
           border-radius:20px 0 20px 0;
        }
        #cuadro h1 {
            font-family:Arial;
            font-size:24px;
            color:#FFF;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="cuadro">
        <h1>Ejemplo de uso de la etiqueta <style> </h1>
    </div>
</body>
</html>

Resultado:


Ejemplo de uso de la etiqueta <style>


Explicación:

  • Bien, primero vamos que la etique <style> se utiliza entre la etique <head> (cabecera) y </head> (fin de la etiqueta de cabecera)
  • Se definió la propiedad type="text/css" y esta indica al navegador que el código que sigue debe ser interpretado como estilo CSS
  • Se finalizan los estilos solamente cuando se cierra la etique con </style>
  • Cuando se define un nuevo estilo y se usa # se indica que se hará una división en la página web, tambien conocido como CAPA, en este caso la capa se llama cuadro1
  • Cada una de las propiedades modificadas en este código tienen su función y a continuación se detalla cada una:
  1. width:400px;   define el ancho de la capa en 400 pixeles
  2. height:200px;  define el alto de la capa en 200 pixeles
  3. margin:auto;  centra la capa en la página o dentro del elemento donde aplique
  4. padding:10px; define la separación del texto a 10 pixeles del margen superior
  5. background:#F60; define el fondo con color anaranjado
  6. box-shadow:10px 10px 10px #999; esta propiedad define una sombra para la capa una sombra en la parte derecha e inferior de 10 pixeles con color gris
  7. border-radius:20px 0 20px 0; esta propiedad es algo especial, porque permite redondear las esquinas de la capa, en este ejemplo se redondea la esquina superior izquierda y la inferior derecha con 20 pixeles
Los estilos definidos simpre se inician con { y se terminan con } y cada línea se finaliza con (;) punto y coma.

En el segundo estilo utilizamos el código #cuadro1 h1 { esto porque lo que queremos es que la modificación de la etiqueta de encabezado h1 solo tenga efecto dentro de la capa cuadro1, sus propiedades se explican a continuación:
  1. font-family:Arial; define la fuente Arial
  2. font-size:24px;  establece el tamaño de fuente en 24 pixeles
  3. color:#FFF;  define el color blanco para el texto
  4. text-align:center;  centra el texto en la capa
Hazta aquí con esta lección,  en la proxima estudiaremos como crear una capa principal y dentro de ella crearemos tres capas más colocadas en una posición exacta.

Espero que escriban sus dudas o comentarios.

¿Qué es CSS? y ¿Para qué sirve?

CSS

En terminos técnicos es un lenguaje de estilo que es usado para definir como seran presentados los elementos de HTML.

El lenguaje HTML está limitado al momento de darle forma a un documento, esto es porque no fue concebido para este fin, sino principalmente científico, distinto al actual.

Para solucionar este problema se han presentado diferentes opciones, como tablas, imagenes transparentes, entre otras que no son estándares de HTML y por tal razón las paginas presentan problemas a la hora de la visualización en diferentes plataformas.

El modo de funcionamiento de CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que aplicaremos a:
  • Una web entera, de modo que se pueda definir la forma de toda la web de una sola vez.
  • Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, o a toda la página.
  • Una porción del documento, aplicando estilos visibles en un trozo de la página.
  • Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta.
La sintaxis CSS permite aplicar al documento un formato de modo mucho más exacto.  HTML se nos quedaba corto al momento de maquetar las páginas, con CSS tenemos herramientas que nos permiten definir:
  • La distancia entre líneas del documento
  • Aplicar identado a las primeras líneas del párrafo
  • Colocar elementos en la página con mayor precisión y sin lugar a errores
  • Definir la visivilidad de los elementos, margenes, subrayados, tachados, entre otros
Para mayor comprensión del potencial que ofrece CSS al diseño de páginas web, haremos una división para estudiar las diferentes formas en las que podemos utilizar esta herrmienta.

Estilos definidos en una etiqueta (una parte del documento)

Bien, para que podamos entender mejor este punto haremos uso de algunas etiquetas que siempre se utilizan en HTML y las modificaremos, tambien mostrarmos el resultado en este blog.

Con la etiqueta Div podemos definir secciones de una página y aplicarle estilos con el atributo style.

Ejemplo:

<div style="background:#F60; color:#FFF; font-family:Arial; font-size:16px">
        Este texto esta formateado con css dentre de una etiqueta "div"
</div>

Resultado:

Este texto esta formateado con css dentre de una etiqueta "div"

Otra etiqueta que podemos usar es la etiqueta <p>, que se usa para la escritura de párrafos, en este ejemplo definiremos un fondo gris, color de letra negro, fuente tahoma, tamaño de fuente 18.

 <p style="background:#CCC; color:#000; font-family:Tahoma; font-size:18px">
        Este texto esta formateado con CSS dentro de una etiqueta "P"
</p>

Este texto esta formateado con CSS dentro de una etiqueta "P"

El resultado no es muy diferente al anterior, pero vamos otro ejemplo con div.

<div style="border:1px; border-radius:10px; width: 300px; height:75px; background:#0099FF;
        font-size:18px; color: #FFF; padding:30px; text-align:center; margin:auto;">
        Es texto esta formateado con CSS dentro de una etiqueta "div"
</div>

Es texto esta formateado con CSS dentro de una etiqueta "div"

Tambien podemos aplicar estilos a nuestros hipervinculos empleando la etiqueta <a>, vamos a ver un ejemplo:

Ejemplo - Hipervinculo a google con color rojo, fuente verdana y tamaño 16 sin decoración (sin subrayado)

<a style="color:#CC0000; font-family:Verdana; font-size:16px; text-decoration:none" href="http://www.google.com">
        google.com
 </a>

google.com

La ventaja con esta forma de aplicar estilos es que podemos aplicarlos a la sección y en el momento que necesitemos, pero es complicado al momento de querer hacer modificaciones mayores, en la siguiente entrada veremos como utilizar la etique <style></style> para hacer un mejor trabajo.

Pueden hacer sus comentarios o consultas en la sección comentarios.