Cargando

Ir a contenido


 


Useo de Borders y Backgrounds en HTML5

En este tutorial estaremos viendo cómo aplicar algunos borders y backgrounds utilizando las nuevas funcionalidades que tenemos disponibles.



Escrito por el sep 18 2014 12:42


Hay propiedades muy utilizadas en HTML y CSS como lo son los borders y los backgrounds, desde la incorporación de CSS3 se han mejorado de forma tal que podemos tener bordes redondeados por ejemplo, a pesar que es algo que se ve bastante simple, esto no estuvo disponible en el pasado, por lo que estas funcionalidades ahora facilitan de una manera bastante amplia el trabajo tanto de diseñadores y de desarrolladores.

Aplicando un borde


Al momento de aplicar un borde debemos tener en cuenta 3 atributos muy importantes, estos son:
  • border-width: inicializa el ancho del borde.
  • border-style: inicializa el estilo para dibujar el borde.
  • border-color: inicializa el color del borde.
Una vez familiarizados con las propiedades veamos un ejemplo simple de aplicación de un borde:
<!DOCTYPE HTML>
<html>
		 <head>
					 <title>Example</title>
					
					 <style type="text/css">
								 p {
											 border-width: 5px;
											 border-style: solid;
											 border-color: black;
								 }
					 </style>
		 </head>
<body>
		 <p>
					 There are lots of different kinds of fruit - there are over 500 varieties
					 of banana alone. By the time we add the countless types of apples, oranges,
					 and other well-known fruit, we are faced with thousands of choices.
		 </p>
</body>
</html>

Para definir el ancho del borde podemos trabajar en base a 3 medidas, por unidades de medida como pixels, cm, em; por porcentajes y por valores preseteados como por ejemplo, thin, médium y thick.

Tipos de borde


El tipo de borde lo definimos con el estilo, para ello tenemos las siguientes opciones:
  • none
  • dashed
  • dotted
  • double
  • groove
  • inset
  • outset
  • ridge
  • solid
Ahora veamos gráficamente lo que cada uno de estos estilos significa:


Existe la posibilidad también de aplicar un borde y un estilo a cada uno de los lados del elemento, para ello utilizaremos las siguientes instrucciones:


border-top-width
border-top-style
border-top-color




border-bottom-width
border-bottom-style
border-bottom-color




border-left-width
border-left-style
border-left-color




border-right-width
border-right-style
border-right-color



Donde top se refiere a la parte superior, bottom a la inferior, left a la izquierda y right a la derecha.
Con ello inclusive podemos lograr combinaciones de tipos de bordes en un mismo elemento.
Veamos un ejemplo de esto último:
<!DOCTYPE HTML>
<html>
		 <head>
					 <title>Example</title>
					 <style type="text/css">
								 p {
											 border-width: 5px;
											 border-style: solid;
											 border-color: black;
											 border-left-width: 10px;
											 border-left-style: dotted;
											 border-top-width: 10px;
											 border-top-style: dotted;
								 }
					 </style>
		 </head>
<body>
					 <p>
					 There are lots of different kinds of fruit - there are over 500 varieties
					 of banana alone. By the time we add the countless types of apples, oranges,
					 and other well-known fruit, we are faced with thousands of choices.
					 </p>
</body>
</html>

El código nos da como resultado lo siguiente:


Border Radius


Para crear los bordes redondeados podemos utilizar la propiedad radius que nos permite indicar el radio de curvatura del borde.

Veamos cómo implementarlo el código:
<!DOCTYPE HTML>
<html>
		 <head>
					 <title>Example</title>
					 <style type="text/css">
								 p {
											 border: medium solid black;
											 border-top-left-radius: 20px 15px;
								 }</style>
		 </head>
<body>
					 <p>
								 There are lots of different kinds of fruit - there are over 500 varieties
								 of banana alone. By the time we add the countless types of apples, oranges,
								 and other well-known fruit, we are faced with thousands of choices.
					 </p>
</body>
</html>

Esto nos da como resultado la siguiente pantalla:


Con esto concluimos este tutorial sobre estos elementos, ya podemos incorporar mejoras sobre nuestros CSS sin mucho esfuerzo y con herramientas de vanguardia tecnológica.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
8.5
VOTA
5
25%
4
75%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 18 2014 12:42
  •   Actualizado sep 22 2014 12:36
  •   Visitas 561
  •   Nivel
    Avanzado



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse