Web.CSS.Bordes.
Ahora toca darle un toque a los bordes de un elemento HTML, por ejemplo como puede ser el estilo, ancho, color …etc.
Border-style. Se utiliza para visualizar bordes en un elemento HTML. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>Border Style</h2>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
- Si se observa con detenimiento se ha creado una clase con un borde distinto que se puede utilizar, de forma que cada párrafo se ve distinto.
- Ahora quiero que se observe la clase mix. Se le dá 4 estilos distintos a un sólo párrafo. ¿Que significa esto?. Lo que se hace es darle a cada lado del borde un estilo distinto. El orden sería arriba, derecha, abajo e izquieda.
Otras formas de uso como el ejemplo del a clase mix:
border-style: dotted solid; # Especificando dos valores solamente, se refiere el primer valor al borde superior e inferior y el segundo valor al borde derecho e izquierdo.
border-style: dotted solid double; #Especificando 3 valores solamente, se refiere en el mismo orden, borde superior, borde izquierdo y derecho y borde inferior.
border-style: dotted; #Especificando solamente un valor se refiere al mismo estilo en todos los bordes.
Border-width.
Se utiliza para especificar el ancho de los bordes de un elemento HTML. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
} p.three {
border-style: dotted;
border-width: 2px;
} p.four {
border-style: dotted;
border-width: thick;
} p.five {
border-style: double;
border-width: 15px;
} p.six {
border-style: double;
border-width: thick;
} p.seven {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<h2>Border-width</h2>
<p class="one">Un párrafo.</p>
<p class="two">Un párrafo.</p>
<p class="three">Un párrafo.</p>
<p class="four">Un párrafo.</p>
<p class="five">Un párrafo.</p>
<p class="six">Un párrafo.</p>
<p class="seven">Un párrafo.</p>
</body>
</html>- En este ejemplo, le damos un estilo y un ancho de borde distinto a cada párrafo.
- El ancho del borde se puede especificar en píxeles o usando los valores predeterminados thin, medium y thick (fino, medio y grueso).
- En la clase seven, si se observa bien, especifica varios valores a la vez. Aquí se especifica un ancho distinto para cada lado del borde. El orden sería arriba, derecha, abajo e izquierda.
Border-color.
Se utiliza para especificar el color de los bordes de un elemento HTML. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
} p.three {
border-style: solid;
border-color: red green blue yellow;
}
</style>
</head>
<body>
<h2>Border-color</h2>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A solid multicolor border</p>
</body>
</html>- El valor de los colores se le puede dar con el nombre en inglés, hexadecimal o mediante RGB.
- Si se observa la clase three, se especifican 4 valores distintos. Ocurre como en los ejemplos anteriores, es decir, un color distinto a cada lado del borde. El orden es arriba, derecha, abajo e izquierda.
Tratando los bordes de forma individual.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<h2>Bordes individuales.</h2>
</body>
</html>
- border-top-style: dotted; Borde superior.
- border-right-style: solid; Borde derecha.
- border-bottom-style: dotted; Borde abajo.
- border-left-style: solid; Borde izquierda.
Todos los valores a la vez en una sola instrucción.
border: 5px solid red; #En el mismo orden, especifica el border-width, border-style y border color.
Se puede ir mezclando cosas que se han ido aprendiendo.
p {
border-left: 6px solid red;
background-color: lightgrey;
}#Los 3 valores que del border-left especifica, en el mismo orden a border-left-width, border-left-style, and border-left-color pero sólo a la parte izquireda del párrafo.
#Se puede hacer los mismo con border-right, border-bottom y border-top.
Bordes redondeados.
Se utiliza para redondear las esquinas de los bordes de un elemento HTML. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
} p.round2 {
border: 2px solid red;
border-radius: 8px;
} p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Border-radius</h2>
<p class="normal">Borde normal</p>
<p class="round1">Borde redondeado1</p>
<p class="round2">Borde redondeado2</p>
<p class="round3">Borde redondeado3</p>
</body>
</html>Existe también la posibilidad de sólo se quiera darle borde a las esquinas de arriba o de abajo de un elemento. Un ejemplo:
border-radius: 0 0 20px 20px;
Ahora hay 4 valores distintos para el border-radius, de forma que se puede controlar que parte del elemento se quiere redondear:
- top-left. Arriba izquierda.
- top-right. Arriba derecha.
- bottom-right. Abajo derecha.
- bottom-left. Abajo izquierda.
Círculos.
Desde un rectángulo, como en el ejemplo anterior, se puede crear un círculo. El requisito principal es que la propiedad border-radios debe de ser la mitad del ancho y alto del rectángulo, de forma, que las esquinas se redondearán creando un círculo perfecto:
div {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: green;
color: white;
}En este ejemplo, hay un ancho y alto de 200 px, lo cual hay que generar un border-radius de la mitad para crear el círculo.
Sombras.
Con la propiedad box-shadow se puede aplicar sombras a los elementos de un página web. Un ejemplo:
div {
width: 300px;
height: 100px;
background-color: #9ACD32;
box-shadow: 10px 10px 5px 5px #888888;
}Existen 3 valores posibles que se le puedan aplicar a esta propiedad:
- El primer valor es el desplazamiento horizontal, es decir, va a proyectar la sombra a la derecha de la caja. Es obligatorio.
- El segundo valor es el desplazamiento vertical, es decir, va a proyectar la sombra debajo de la caja. También es obligatorio.
- El tercer valor es el desenfoque de la sombra. Este efecto es Opcional, no es obligatorio.
- El cuarto valor es la expansión de la sombra. Este efecto es opcional, no es obligatorio.
- El quinto y último valor es el color de la sombra. No es necesario, es opcional.
Incluso se pueden usar valores negativos para darle un efecto distinto a la sombra:
box-shadow: -10px -10px 5px -5px #888888;
- El desplazamiento horizontal de la sombra será a la izquierda de la caja.
- El desplazamiento vertical de la sombra estará por encima de la caja
- El desenfoque no admite valores negativos.
- La expansión hará que la sombra se reduzca.
Sombra interior.
Añadiendo la palabra inset antes de cualquier valor, se le daría un efecto de una sombra interior a la caja.
box-shadow: inset 10px 10px 5px #888888;
Múltiples Sombras.
Se puede crear múltiples sombras a un elemento de una página web, pero se deben separar adecuadamente mediante una coma:
box-shadow:
inset 10px 10px 5px #888888, inset -10px -10px 5px #888888;
En este ejemplo se está dando un efecto de sombra interior a todos los lados del elemento.
Sombras en el Texto.
Text-shadow sirve para aplicar sombra a las fuentes de texto. Un ejemplo:
h1 {
text-shadow: 5px 10px 2px #93968f;
}¿Como trabaja text-shadow?. Existen 4 valores que se les puede asignar:
- El primer valor se refiere a la derecha.
- El segundo valor a la izquierda.
- El tercer valor al desenfoque.
- El cuarto y último valor el color de la sombra.
Se puede jugar con los valores negativos también, como ocurre con el box-shadow, así poner la sombra más a la izquierda o más arriba o usar varias sombras y superponerlas:
h1 {
text-shadow: 5px 10px 2px #93968f, -3px 6px 5px #58d1e3;
}