Bisel exterior con CSS

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">
 
</div>
</div>

</body>
</html>

Autor: CSS Boulevar
www.webjimenez.com

Usuarios que han visto este tema también han visto...

- Textos con gradiente usando CSS
- Aproximación al problema del color: imagen vs CSS
- Crear menus de navegación en CSS usando listas
- Guia basica de hojas de estilo
- Hacks CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento