Diseño Web Madrid

Creación de bordes redondeados con CSS

19 Ene 2010

Existen varias formas de crear cajas con bordes redondeados, algunas a través de CSS puro y otras con la ayuda de plugins javascript (jQuery). en este post se muestran 3 formas de realizar el efecto, las 2 primeras funcionan perfectamente en todos los navegadores y la última no funciona en Internet Explorer

1. 3 divs, 3 imágenes

Esta opción permite crear un bloque con bordes redondeados de un ancho fijo. Lo primero que debemos hacer es dibujar nuestro bloque en un editor gráfico (fireworks, photoshop, gimp, etc…), este bloque debe tener el ancho que va a tener el bloque cuando lo mostremos en nuestra página web.

Ahora debemos recortar las tres imágenes que conformarán el bloque. en este ejemplo sencillo, el bloque tendrá contenido pero no tendrá título, por lo que los cortes los podemos hacer ajustados a la curva de los bordes, como lo muestra la siguiente imagen:

En la imagen podemos ver 3 secciones resaltadas (los recortes se han realizado con fireworks ya qye este programa provee una mejor optimización de imágenes para web). Los recortes superior e inferior están ajustados a los bordes superior e inferior de la imagen respectivamente y de igual for5ma, se ajustan al inicio de la curva de la imagen; esto asegura que la parte central del bloque tenga todo el espacio posible para agregar el contenido. El recorte central no necesariamente debe ser del alto del bloque ya que por CSS le podemos dar la propiedad repeat para que se ajuste al alto del contenido. Una vez exportadas las imágenes, tendremos 3 imágenes, una superior, una central y una inferior. El código CSS para conformar el bloque sería así:

.top_bloque {background-image:url(imagen_superior.gif); width:300px; height:14px; display:block}
.central_bloque {background:url(imagen_central.gif) repeat-y; width:280px; display:block; padding:0 10px 0 10px}
.bottom_bloque {background-image:url(imagen_inferior.gif); width:300px; height:14px; display:block}

Es importante anotar que la definición para .central_bloque (que es el div en donde se cargará el contenido) tiene unas características distintas a los otros 2; a la imagen de fondo se le ha agregado la propiedad repeat-y, lo cual permitirá que si el div se expanda verticalmente, la imagen de fondo siempre se muestre, el ancho se ha reducido en 20px ya que le hemos dado un padding de 10px a la izquierda y la derecha, esto es para asegurar que el contenido dentro de este div no quede ajustado al borde del mismo sino que tenga una separación similar a la que hay arriba y abajo.

Una vez se ha creado el código CSS, podemos crear el código HTML así:

2. divs anidados y 4 imágenes

Esta técnica permite crear cajas que se ajusten el contenido horizontal y verticalmente, la idea es crear una base exterior para encerrar un elemento de cualquier dimensión y que el elemento contenedor siempre tenga los bordes redondeados. Para esta técnica vamos a usar la misma imagen base que usamos para el punto anterior, variaremos en la cantidad de recortes que demos sacar de la imagen. Los recortes para esta técnica serían se la siguiente forma:

En esta imagen se muestran 4 recortes, uno para cada esquina del bloque. El cósigo CSS a sería así:

.superior_izquierda {background:#ffffff url(izquierda_arriba.gif) no-repeat; width:100%;}
.superior_derecha {background:url(derecha_arriba.gif) no-repeat top right;}
.inferior_izquierda {background:url(izquierda_arriba.gif) no-repeat left bottom;}
.inferior_derecha {background:url(izquierda_abajo.gif) no-repeat right bottom; padding:10px;}

Para esta técnica, la idea es que cada elemento va a tener una alineación específica en cada esquina del bloque y, en el código HTML, se anidarán los elementos para mostrar el contenido de forma correcta. En nuestro HTMl el código sería así:

<span=”inferior_derecha”>
Hola, esta es una muestra de contenido.

3. Sin usar imágenes

Esta es una técnica bastante sencilla y no requiere del uso de imágenes, ¿el problema? no funciona en Internet Explorer; pero de todos modos la dejo referenciada para que sepan todo lo que pueden hacer con CSS y claro, funciona perfectamente en Firefox. El código CSS sería este:

#exterior {height: 300px; width: 500px; margin: 0 auto;}
#interior {background: #e8eef5; -webkit-border-radius: 6px; -moz-border-radius: 6px; padding: 10px;}

Usando este código CSS, se redondean los bordes de cualquier div o span.

Existen otros métodos para redondear los bordes de un bloque, estos son los más sencillos de aplicar y los más rápidos. Otros métodos arcaicos usan tablas….dejen de usar tablas.

Sin Comentarios
Tags: -moz-border-radius, background, bordes, css

5 propiedades CSS simples y útiles

En: css

19 Ene 2010

Este post es acerca de 5 propiedades CSS útiles con las que debe estar familiarizado, pero que son de raro uso. No son del nuevo CSS3, son propiedades de CSS2 familiares a todos los navegadores actuales, tales como: clip, min-height, white-space, cursor, and display. Entonces, debemos tratar de tenerlas en cuenta porque es sorprendente lo útiles que son.

1. CSS Clip

La propiedad clip es como una máscara. Permite enmascarar el contenido de un elemento dentro de una forma rectangular. Para usar clip en un elemento se debe especificar la posición en absolute (position:absolute). Luego, especificar los valores top, right, bottom, y left relativos al elemento.

Ejemplo de clip en una imagen (demo)

El siguiente ejemplo muestra como enmascarar una imagen usando la propiedad clip. Primero, especificar la posición del elemento <div> en relative (position:relative). Luego, especifique la posición del elemento <img> en absolute (position:absolute) y los valores rect de acuerdo a cómo desee mostrar la imagen.

.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}

Redimensionamiento y Clip de imagen (demo)

En este ejemplo, se muestra como redimensionar una imagen y aplicarle la propiedad clip. La imagen original está en un formato rectangular, la idea es redeimensionarla en un 50% para crear una galería de thumbnails en formato cuadrado. Entonces, usaremos las propiedades width y height para redimensionar las imagágenes y luego enmascararlas con la propiedad clip. Luego, usaremos la propiedad left para ajustar las imágenes a 15px hacia la izquierda.

.gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}

2. Min-height (demo)

La propiedad min-height permite especificar el alto mínimo para un elemento. Es útil para balancear un diseño, por ejemplo, para asegurar que un área de contenido sea más lata (así tenag poco o ningún contenido) que un área de navegación.

.with_minheight {
min-height: 550px;
}

Hack para min-height en IE6

Nota: la propiedad min-height no está soportada por IE6, acá se muestra un hack para esta versión:
.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}

3. White-space (demo)

La propiedad hite-space especifica cómo se manejarán los espacio en blanco referentes a un elemento. Por ejemplo, especificando white-space: nowrap prevendrá que el texto afectado por esta propiedad se corte hacia la siguiente linea, se cortará a la siguiente linea el elemento completo.

em {
white-space: nowrap;
}

4. Cursor (demo)

Si cambia el comportamiento de un botón, se debe cambiar el cursor también. Por ejemplo, cuando un botón está deshabilitado, el cursor se debe cambiar al cursor por defecto (flecha) para indicar que no es clicable. Así, la propiedad cursor es muy útil cuando se estén desarrollando aplicaciones web.

.disabled {
cursor: default;
}
.busy {
cursor: wait;
}
.clickable:hover {
cursor: pointer;
}

5. display:inline / block (demo)

Por si no lo sabía: los elementos block se muestran en una nueva linea, mientras que los elementos inline se muestran en la misma linea. Las etiquetas <div>, <h1>, y  son ejemplos de elementos block. Como ejemplo de elementos inline tenemos , , y . Se puede sobreescribir el estilo como se muestran los elementos, especificando el display con inline o block.

.block em {
display: block;
}
.inline h4, .inline p {
display: inline;
}

Este artículo tomado de www.webdesignerwall.com y traducido por Iván León

Sin Comentarios
Tags: clip, css, cursor, display, min-height, propiedades CSS, white-space

Creación de bordes redondeados con CSS

1. 3 divs, 3 imágenes

2. divs anidados y 4 imágenes

3. Sin usar imágenes