Ahora que nos estamos aventurando en lo que es la programacion y diseño web, les traigo este tutorial de como agregar bordes y sombras a cualquier imagen o div utilizando CSS.
Para esto utilizaremos un editor de texto de su preferencia ya sean Sublime text, notepad ++, dreamweaver, phpEditor entre otros.
Vamos a crear 2 archivos llamados index.html y el estilo.css, con este ultimo es el que va agregarle los estilos o dar mejor apariencia a nuestras imagens o videos o div.
index
Les explico las principales lineas de codigo del html la primera es
<link rel="stylesheet" href="estilo.css"> esta linea nos indica que vamos a llamar al archivo CSS donde se encuentra nuestro codigo para darle esitlo a las imagenes
<img src="imagen.jpg" class="borde" width="400" hight="400"> la etiqueta <img src=""> llama una imagen ya sea este dentro una carpeta o no lo este a como se muetra en mi codigo que esta en la carpeta principal.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilo.css">
<title>..:: Borde y Sombras ::..</title>
</head>
<body>
<img src="imagen.jpg" class="borde" width="400" hight="400">
</body>
</html>
estilo.css
El * indica que el siguiente codigo se le va aplicar las etiquetas de nuestra html este solo quitamos espacios que le dan los navegadores
*
{
margin:0;
padding:0;
}
en este el indicamos que la etiqueta body va a tener un fondo de color tal asi como lo tiene en su navegador
body
{
background: #cecece;
}
box-shadow: "X" "Y" "difuminado" "color";
border grueso del borde solido y color
.borde
{
border: 7px solid #fff;
box-shadow: 0.5px 0.8px 15px black;
margin:25px 0 0 25px;
}
y este seria el resultado final de nuestro codigo
No hay comentarios :
Publicar un comentario