Создайте эффект «вставки» с помощью CSS на сайтах

Я очень впечатлен эффектом «вставки» на многих последних веб-сайтах. Некоторые примеры alt text http://img687.imageshack.us/img687/457/inset2.png Создайте эффект «вставки» с помощью CSS на сайтах

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

линия в центре. В настоящее время многие веб-сайты используют такие линии/эффекты.

Я попытался добиться того же с границами, но цветовая комбинация не работает, и это не правильно.

Другие сайты используют изображения для этого? легко ли это?

Любой пример css?

Пример сайтов: http://woothemes.com, http://net.tutsplus.com/, http://www.w3schools.com (в заголовке) и в WordPress админ страницу боковой панели

источник

2010-06-15 Aakash Chakravarthy

Дайте нам URL-адрес для примеров, и мы можем найти вам пример CSS - так работает веб-сайт :) – Skilldrick

Я так понимаю, вы пробовали 'border-style: groove;' и не нашли его? –

Вот опрятная вариация: dabblet.com/gist/1609945 –

Не знаю, если это поможет, но с использованием 1 точек границы, которые немного светлее и темнее фон из двух смежных элементов может имитировать это. Например:

<!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>

РЕДАКТИРОВАТЬ:

В качестве примечания, переключение светлого и темного в приведенном выше примере даст вам немного поднятую/тисненый пограничный эффект.

источник

2010-06-15 14:12:35 edl

Очень умно! +1 –

[JSFIDDLE] (http://jsfiddle.net/Qym4D/) из вышеперечисленного (demo) –

3D-эффекты на двухмерных компьютерных дисплеях - это просто оптические эффекты, достигаемые с помощью цвета: более легкие варианты показывают яркие (более высокие области), а более темные вариации предполагают shadown (нижние области). Большинство людей правые, и написание указаний, как правило, находится на левой стороне рабочего стола, поэтому вы используете воображаемый источник света в левом верхнем углу экрана.

Это было возможно сделать это с чистой CSS в прямоугольных областях на протяжении многих лет:

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>

шрифтов, однако, требуют более новых атрибутов CSS, которые не имеют широкую поддержку еще и, Кроме того, не разрешается предоставлять более одного цвета, поэтому обычно используются изображения. См http://www.quirksmode.org/css/textshadow.html

источник

2010-06-15 14:23:10

это CSS тень текста property.for получить этот эффект

Используйте

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

, но на самом деле это эффект цветовой комбинации, которые вы используете в фоновом режиме и текста. , так что вы должны это сделать.

использовать текст тень цвет темный, чем цвет фона.
использовать текст тени цвет светлый цвет текста.

источник

2010-06-15 14:53:15

Самый простой, нарисовать горизонтальную линию

со следующими стилями, контраст может быть изменен в зависимости от цвета фона:

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

источник

2012-06-21 21:37:21 user1302036

спользование <hr> довольно умна.

Вслед за user1302036’s answer, все, что нам нужно, чтобы установить цвет верхних и нижних границ для <hr> и установить левую и правую границу ширину до 0.

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

источник

2012-08-02 17:04:56 ancestral

Вы попробовали? – Dementic

Конечно. Вот JSFiddle: https://jsfiddle.net/qfsk30h4/ – ancestral

Здесь является более актуальным и гибкое решение, которое можно использовать.

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>

Используя RGBA (красный, зеленый, синий, альфа), вы можете использовать белый/черный с альфа (непрозрачности), чтобы сделать иллюзию эффекта вставки.

источник

2013-10-24 23:51:21

Просто сделайте следующее:

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

Play с непрозрачностью и цветом в соответствии с вашим дизайном, он работает на все слои я думаю;)

источник

2014-02-16 15:47:57

Использование границы дна и коробчатая тень.

body { 
    background-color: #D0D9E0; 
} 

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

Отъезд Fiddle и Browser Compatibility для коробчатого теневой собственности.

источник

2014-09-22 19:02:58

Создайте эффект «вставки» с помощью CSS на сайтах

ответ

Смежные вопросы