html
Agregar borde redondos en imagenes
En este diseño web veremos como usar border-radius que nos permitirá crear bordes redondeados sin la necesidad de contar con imagenes para eso. Pero estamos limitados por que sile agregamos una imagen no podremos redondear los bordes. En disenoweb.org planteamos la solución de jQuery además de usar el border-radius. Lo que debemos hacer en nuestro [...]
Diseño de reloj y clima en CSS
Con este tutorial de diseño web crearemos un elegante reloj similar al reloj que figura en los teléfonos móviles de HTC. Primero veremos el código del diseño web en el HTML: <div id=”clock”> <div id=”time”><span id=”hour”>12</span> <span id=”mins”>00</span></div> <!– hora –> <div id=”weather”> <div id=”location”>Nublado</div> <img id=”icon” src=”imagenes/sol-y-nubes.png” alt=”Nublado” /> <div id=”temp”>31º</div> <div id=”high-low-temps”>H: 63° [...]
Fondos transparentes en diseño web
La gran mayoría de las veces en el diseño web en sumamente necesario contar con fondos transparentes usando las hojas de estilo, esto se debe a varias razones, una y la más común es no tener que poner el mismo color de fondo para todo y esto es por si hay una imagen de forndo [...]
Definiendo el ancho de una de las capas
Una de las mejores formas de maquetar nuestro diseño web es usando capas (principalmente elementos DIV). Una vez que definamos la estructura de nuestro documento HTML mediante las capas podremos maquetarlo y darle estilo con CSS. Definir el ancho de una capa con CSS debería de ser una cosa, a priori sencilla. Pero veremos que alguna cosa que otra [...]
Esquinas redondeadas con CSS3
En el diseño web mediante las hojas de estilo de CSS3 ya podemos redondear los bordes de los elementos. Para poder redonder los bordes usaremos la propiedad border-radius. De foma general la sintaxis que usaremos en el diseño web será: border-radius: [tamaño|porcentaje]; De esa manera podremos indicar el tamaño y el porcentaje a usar para [...]
Texto 3D
En este tutorial de diseño web explicaré como realizar efectos 3D a los textos solamente usando código de hojas de estilo en CSS. La única propiedad que se empleará para realizar este efecto es “sombra” para las fuentes de CSS, y la propiedad a usar realmente es text-shadow. Este fecto de diseño web es muy [...]
Sombras en el texto
A pesar que text-shadow no pertenece específicamente a CSS3, sino que fue introducido ya con la segunda versión del lenguaje, resultará útil porque a día de hoy todavía muchos navegadores no soportan esa regla y más cuando realizamos diseño web. En el elemento anterior habíamos colocado un fondo tirando hacia claro, que nos obligaba a [...]
Fondos múltiples
Si nuestro navegador no es compatible con CSS3 y ve varios fondos distintos en un mismo elemento, por muchas comas que pongamos para separarlos, no entenderá nada. El resultadó será que no nos mostrará ninguno de los fondos. La situación en el diseño web, antes de Modernizr nos obligaba a colocar siempre un único fondo, [...]
Figuras en diseño web
Si queremos crear un círculo perfecto en nuestro diseño web solo debemos establecer los bordes a 75px. .circulo { background-color: #c06; -moz-border-radius: 75px; -webkit-border-radius: 75px; border-radius: 75px; } Si queremos un semicírculo en el diseño web la técnica a usar será muy similar, solo que dibujando la mitad de la altura y redondeando los bordes [...]
Multiples fondos con CSS
Con el nuevo sistema de hojas de estilo de CSS3 podremos aplicar varios fondos a la misma página simplemente usando la propiedad de background. En el diseño web podremos observar como los diferentes fondos se montarán en tipo cascada. Lo primero que vamos hacer antes ed pasar al diseño web es revisar la propiedad que [...]
