Crear un efecto de "inserción" mediante CSS en los sitios web

Estoy muy impresionado por el efecto similar al "recuadro" en muchos sitios web recientes. Algunos ejemplos son alt text http://img687.imageshack.us/img687/457/inset2.png Crear un efecto de "inserción" mediante CSS en los sitios web

alt text http://img163.imageshack.us/img163/8158/inset1.png

La línea en el centro. Hoy en día, muchos sitios web usan este tipo de líneas/efectos.

Intenté lograr lo mismo con los bordes, pero la combinación de colores no me funciona y no es adecuada.

¿Hay otros sitios web que utilicen imágenes para estos? ¿es fácil para esto?

Cualquier ejemplo css?

sitios Ejemplo: http://woothemes.com, http://net.tutsplus.com/, http://www.w3schools.com (en la cabecera) y en la página de administración de WordPress barra lateral

Fuente

2010-06-15 Aakash Chakravarthy

Danos la URL de los ejemplos y podemos encontrar tu CSS de ejemplo - así es como funciona la web :) – Skilldrick

Supongo que has probado 'border-style: groove;' y encontraste que falta? –

Aquí hay una variación ordenada: dabblet.com/gist/1609945 –

No sé si esto ayudará, pero usando 1 px fronteras que son ligeramente más claro y más oscuro que el fondo de 2 elementos adyacentes puede emular esto. Por ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled</title> 
<style type="text/css"> 
div{background:#555;} 
.top{border-bottom:#333 solid 1px;} 
.bot{border-top:#777 solid 1px;} 
</style> 
</head> 
<body> 
<div class="top">this</div> 
<div class="bot">andthis</div> 
</body> 
</html>

EDIT:

Como nota lado, el cambio de luz y oscuridad en el ejemplo anterior le dará un efecto de borde ligeramente elevada/grabado en relieve.

Fuente

2010-06-15 14:12:35 edl

¡Muy inteligente! +1 –

[JSFIDDLE] (http://jsfiddle.net/Qym4D/) del anterior (demo) –

Los efectos 3D en pantallas de computadora 2D son meros efectos ópticos logrados mediante el uso del color: las variaciones más claras sugieren que las variaciones brillantes (áreas más altas) y más oscuras sugieren sombras (áreas inferiores). La mayoría de las personas es diestra y las luces de escritura tienden a estar en el lado izquierdo del escritorio, por lo que utiliza una fuente de luz imaginaria en la esquina superior izquierda de la pantalla.

Ha sido posible hacerlo con CSS puro en áreas rectangulares desde hace años:

body{ 
 
\t background-color: #8080C0; 
 
} 
 
div{ 
 
    display: inline-block; 
 
\t margin: 1em; 
 
\t padding: 1em; 
 
\t width: 25%; 
 
\t color: white; 
 
\t background-color: #8080C0; 
 
} 
 
div.outset{ 
 
\t border-width: 1px; 
 
\t border-style: solid; 
 
\t border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2; 
 
} 
 
div.inset{ 
 
\t border-width: 1px; 
 
\t border-style: solid; 
 
\t border-color: #4D4D9B #A6A6D2 #A6A6D2 #4D4D9B; 
 
}

<div class="inset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div> 
 
<div class="outset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

Fuentes, sin embargo, requieren atributos CSS más nuevos que no cuentan con un amplio apoyo todavía y, Además, no permita proporcionar más de un color, por lo que es común usar imágenes. Ver http://www.quirksmode.org/css/textshadow.html

Fuente

2010-06-15 14:23:10

esto es css sombra del texto property.For conseguir este efecto del uso

.style{ 
    text-shadow:0 1px #FFFFFF; 
}

pero en realidad esto es efecto de la combinación de colores que está utilizando en el fondo y el texto. , así que debes hacer.

use el color de texto oscuro que el color de fondo.
use la luz del color de la sombra del texto que el color del texto.

Fuente

2010-06-15 14:53:15

más fácil, dibujar una línea horizontal

con los siguientes estilos, el contraste puede ser modificado en función de color de fondo:

hr { 
background-color: #000; 
border-top: solid 1px #999; 
border-left: none; 
height:0px; 
}

Fuente

2012-06-21 21:37:21 user1302036

usando un <hr> es muy inteligente.

seguimiento a user1302036’s answer, todo lo que necesitamos es establecer el color de los bordes superior e inferior para una <hr> y establecer los anchos de borde izquierdo y derecho a 0.

hr { 
    border-width: 1px 0px; 
    border-color: #666 transparent #ccc transparent; 
}

Fuente

2012-08-02 17:04:56 ancestral

¿Lo intentó? – Dementic

Por supuesto. Aquí hay un JSFiddle: https://jsfiddle.net/qfsk30h4/ – ancestral

Aquí está una más actual y solución flexible que puede ser utilizada.

JSFIDDLE

.hr { 
    background: rgba(0, 0, 0, 0.6); 
    height: 1px; 
    width: 100%; 
    display: block; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.6); 
} 

<span class="hr"></span>

Mediante el uso de RGBA (rojo, verde, azul, alfa) que puede utilizar blanco/negro con un alfa (opacidad) para hacer la ilusión de un efecto de inserción.

Fuente

2013-10-24 23:51:21

Simplemente haga lo siguiente:

.hr { 
    opacity: 0.2; 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #fff; 
}

Juego con la opacidad y colores para adaptarse a su diseño, Funciona en todos los orígenes que pienso;)

Fuente

2014-02-16 15:47:57

Uso border-bottom y box-shadow.

body { 
    background-color: #D0D9E0; 
} 

h1 { 
    border-bottom: 1px solid #EFF2F6; 
    box-shadow: inset 0 -1px 0 0 #AFBCC6; 
}

Mira la Fiddle y Browser Compatibility de la propiedad box-shadow.

Fuente

2014-09-22 19:02:58

Crear un efecto de "inserción" mediante CSS en los sitios web

Respuesta

Cuestiones relacionadas