curso de 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° [...]
Subrayado en CSS mediante puntos
La gran mayoría de los navegadores cuando van a mostrar un enlace o link el subrayado es através de una línea. CSS nos permitirá modificar en nuestro diseño web este estilo. En este caso, en el diseño web vamos a hacer que el subrayado del enlace sea una línea de puntos. Usaremos la propiedad border-bottom [...]
Páginas web sin scroll
En algunos casos tener scroll en nuestro diseño web puede resultar molesto para nuestros usuarios. Ahora veremos como en el diseño web de una forma fácil se puede omitir el scroll. La idea consiste en jugar con la propiedad overflow. La propiedad overflowcontrola lo que sucede cuando un contenido desborda el área en la que se encuentra. [...]
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, [...]
Puntas de papel levantadas
En este diseño web realizaremos una sombra doble por debajo de una capa y girarla un poco para que simule un papel levemente levantado por dos de sus puntas. Utiliza algunas de las nuevas propiedades CSS3, por lo que es sencillo deducir, que el truco no será visible con IE8 e inferiores. El código que [...]
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 [...]
Triángulos con CSS
La técnica que usaremos en el diseño web consiste en colorear los bordes, coloreando un solo borde y los demás haciéndolos transparentes. Por alguna razón, si coloreamos el borde superior de un cuadrado y dejamos el resto transparente se dibujará un triangulo inverso. Es recomendable que para ver como va quedando el diseño web se [...]
Letra capital
En el diseño web todo o casi todo se puede realizar en CSS. Una de los diseños más buscados es la poder convertir la primer letra del párrafo en la letra capital como lo hacen la gran mayoría de los libros. El código que deberemos usar para el diseño web y aplicar la letra capital [...]
