Bordes del HTML

Hi hi a todos! ¿Cómo están? vengo con otro tutorial en HTML para que puedan aprender todos los atributos y usarlos y hacer cosas bonitas :D Este tutorial también está publicado en mi foro, así que ya saben si lo han visto por ahí. Es un mero repaso de lo básico sumado con los bordes de manera mucho más detallada y con ejemplos visuales. Son bastantes llamativos a modo de ejemplo, por supuesto, quedan mejor algunos cuando tienen pocos píxeles, pero ya será cuando les toque hacer el trabajo, por ahora, vamos al repaso.

Bueno, les pasaré explicando lo primero de lo primero que deben saber. Todo el código está compuesto por cajas. Las cajas se hacen con el siguiente código lo dejó así para que lo vean. Todo el Código no es más que cajas de ése estilo con los atributos dentro de ellas.

Cada atributo se separa con un ; (punto y coma), así, el código funciona bien, de lo contrario, no sirve.

Entonces, para comenzar con nuestra primera y sencilla cajita, lo haremos de la siguiente manera:

Código:

<div style="background: #ffe71c; width: 40px; height: 40px;"></div>

¿Qué es lo que hicimos aquí? le pusimos un color de fondo a la cajita. Esto se hace de la siguiente manera backgorund: #color en html Aquí dejé varias herramientas para que puedan sacar muchas cosas bonitas y útiles a sus plantillas.


Luego, tenemos el height y el width. El primero, determina la altura y se marca en px, así que el código les quedaría height: 40px, por ejemplo, lo mismo con el width: 50px Esto pueden usarlo con los valores que más les quede acorde a su tablilla, no hay un estandar. Incluso, pueden usar un height:auto para que la tablilla se vaya agrandando (o ensanchando si usan el width) según el tamaño del contenido.

Recuerden que todo esto va en el div, tal como lo coloqué arriba de todo, en el código. Es bastante sencillito cuando le agarran la mano.

Ahora ya saben lo básico para definir la caja, pasemos a unos cuantos adornitos para los bordes de la cajita.

Estos se hacen de la siguiente manera border: 0px solid #color

Donde dice 0px colocaran el grosor del borde, generalmente, dependerá de qué es lo que quieran hacer, si grande o chiquitio, más, pueden empezar con números pequeños, hasta 10px para ir probando, si se les ocurre otra cosa, mejor. Donde está el solid, especifican el tipo de borde.

Miren cómo va quedando. Éste es un borde sólido:solid, pero existen varios tipos de bordes.

Código:

<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px solid #e21cff;"></div>

Éste es un borde doble, se escribe así double

Código:

<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px double #e21cff;"></div>

Y tenemos también uno punteado, dotted

Código:

<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px dotted #e21cff;"></div>

Y uno con degradado, groove

Código:

<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px groove #e21cff;"></div>

Y uno con rayitas, dashed

Código:

<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px groove #e21cff;"></div>

Como irán viendo, no es difícil ir haciendo los cambios, sólo es cuestión de cambiar las palabritas para darle el borde que queremos y grosores, como saben, eso varia según cada uno.

Y pueden hacer que un sólo lado tenga un borde, sólo necesitan colorcarle un par de atributos. Miren:

Código:

<div style="background: #ffe71c; width: 40px; height: 40px;border-right: 6px double #e21cff;"></div>

Para esto, hay que poner el siguiente codigo, en vez de border:, le agregaremos un lugar border-right: 6px double #e21cfff

Entonces, podemos usarlos para ponerlos en sólo un lugar, dos o tres, o incluso, podemos combinar estilos de bordes, tal y como están combinados los del post, si se dan cuenta, es cuestión de jugar con los lugares:

border-right: derecha
border-left: izquierda
border-top: arriba
border-bottom: abajo

Siguiendo los comandos dados arriba, pueden combinar cuantos bordes quieran. Miren

Código:

<div style="background: #ffe71c; width: 40px; height: 40px;border-left: 6px double #e21cff; border-top: 6px groove #e21cff;"></div>

Además, me faltó agregar unos cuantos tipos de bordes, los que se redondean, seguro siempre han visto algunos así, pues, es más fácil de lo que creen, el código es border-radius: 0px .Como saben, donde dice 0px se agregan la cantidad de pixeles. Si se pone uno sólo, se redondearan los cuatro bordes, si se ponen cuatro 0px 0px 0px 0px, cada borde tendrá un redondeado diferente. Fijense:

Código:

<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px groove #e21cff; border-radius:50px;"></div>

Como veran, se volvió ovalado al tener sólo un eje de px. Pero si agregamos todos, miren lo que pasa

Código:

<div style="background: #ffe71c; width: 40px; height: 40px;border: 6px groove #e21cff;border-radius:50px 10px 5px 0px;"></div>

Las dos primeros ejes 50px 0px, son los dos de arriba, el tercero y el cuarto, los de abajo.

Seguiremos viendo elementos, aunque no sé si les he dado mucha información por un post o no, así que lo dejaré aquí y haré la continuación con temas de margenes y demás chiches :D Pueden preguntar sus dudas aquí :D

Bye!

Alice rainsworth escribió:Gracias! Estaba buscando sobre esto desde hace tiempo
aunque me sigue pareciendo algo complicado.
Una pregunta! Si quisiera poner una firma o stamp
dentro de la cajita como tendria que hacer (?)

Aquí está el link del primer tutorial. No sé por qué éste tuvo más éxito cuando el básico es éste (?) ahí está explicado el comando para la imagen. En todo caso, siempre puedes usar el BBCode que también es compatible con el HTML.

Cualquier duda, me preguntas.

Bye!