Marco Para Fotos 2 con CSS y HTML
Codigo Fuente:
| <HTML> | |
| <HEAD> | |
| <STYLE type=text/css> | |
| .marco2 { | |
| BORDER-RIGHT: #999999 1px solid; | |
| PADDING-RIGHT: 8px; | |
| PADDING-LEFT: 8px; | |
| PADDING-BOTTOM: 8px; | |
| WIDTH: 200px; | |
| PADDING-TOP: 8px; | |
| BORDER-BOTTOM: #999999 1px solid; | |
| BACKGROUND-COLOR: #f5f5f5 | |
| } | |
| </STYLE> | |
| </HEAD> | |
| <BODY> | |
| <DIV class=marco2><IMG height=150 alt="" src="42-16470989.jpg" width=200> </DIV><BR> | |
| </BODY> | |
| </HTML> Copia y pega el codigo fuente en el Bloc de Notas guardalo con el nombre que tu quieras no olvides guardarlo con la extencion .html 0 .htm saludos... |
Hola Reynaldo, me encontré con tu tutorial buscando "marcos en CSS", aunque funcional no explicas nada del código. Como ingeniera de Frontend me tomo el atrevimiento de resumirlo ya que está demasiado redundante (pudiste ahorrar varias líneas):
ResponderEliminar.marco2 {
border: 1px solid #999;
padding: 8px;
background: #f5f5f5;
width: 200px;
}
Y sí, eso daría como resultado una imagen con un borde claro de 8px y uno gris de 1px, pero en tu imagen de ejemplo tiene como una "sombra" y no explicas cómo la hiciste. A continuación lo expongo yo:
.marco2 {
border: 1px solid #CCC;
padding: 8px;
background: #f5f5f5;
width: 200px;
box-shadow: 1px 2px 2px #CCC;
-webkit-box-shadow: 1px 2px 2px #CCC;
-moz-box-shadow: 1px 2px 2px #CCC;
-ms-box-shadow: 1px 2px 2px #CCC;
}
La propiedad "box-shadow" recibe 4 parámetros, el primero y segundo indican cuántos pixeles se desplazará la sombra de forma horizontal y vertical respectivamente, el tercero sería la longitud de la sombra y por último su color.
Saludos y como consejo: Cuida tu ortografía. Ah! y por cierto, al querer publicar comentarios aparece "Comprueba que no eres un robot", pero no se puede comprobar porque el div #comment-form tiene un alto fijo de 315px y un overflow:hidden, así que no se ve el resto del formulario.