Manual de CSS

 
 
 

Mapa Web

 
borde   borde
Portada arrow Lista de Códigos CSS arrow Bisel exterior con CSS

 

Bisel exterior con CSS Imprimir E-mail

Cómo aplicar un efecto de bisel en una capa?.
Para los que recién se inician en CSS o para los que necesitan refrescar la memoria; las capas se utilizan para aplicar estilos a partes amplias de un documento HTML y poseen atributos especiales que hacen más fácil su manejo.

Para lograr que el efecto funcione hay que definir algunas propiedades:

* Position
* Background
* Width
* Top
* Left

Position contendrá el valor "relativo" que nos permitirá cambiar el valor de Top y Left.
Background será definido en dos oportunidades y contendrá el color de base y el color de sombra.
Width contendrá el ancho de la capa.
Top y Left serán definidos en dos oportunidades y contendrán los valores de posición de la capa base y capa sombra

Para lograr el bisel exterior puedes copiar el siguiente ejemplo:

<html>
<head>
<style type="text/css">
body {background:#626262}
#sombra {position:relative; background:black; width:100%; top:-1px; left:1px}
#base {position:relative; background:#D7D7D7; top:-1px; left:-1px;}
</style>
</head>
<body>

<div id="sombra">
<div id="base">
&nbsp;
</div>
</div>

</body>
</html>

Autor: CSS Boulevar
www.webjimenez.com

 

 
Portada
Capítulos del Manual de CSS
Introducción a CSS
El Tag LINK
El Tag STYLE y la directiva @import
Comentarios CSS y Reglas Básicas
Agrupación de Selectores y Declaraciones
El Atributo Class y el Atributo ID
Pseudo-clases y Pseudo-elementos
Estructura y Herencia
Especificidad y Estilos en Cascada
Clasificación de los elementos y Colores
Unidades
Identación
Alineación
Espacios en Blanco
Anchura de Líneas
Alineación Vertical
Espacio entre Palabras y entre Letras
Transformación del Texto
Decoración del Texto
Practicar en línea
Lista de prácticas en línea
FAQ
Preguntas frecuentes
Códigos CSS
Lista de Códigos CSS
Foros
Foros CSS
Otros Manuales
Manuales de otros lenguajes
 
   
 
 
Alojamiento web en Hostalia