Создайте эффект “вставки” с помощью CSS в веб-сайтах
Я очень впечатлен "вставкой" как эффект во многих последних веб-сайтах. Некоторые примеры 
и
Строка в центре. В наше время много веб-сайтов используют эти виды строк/эффектов.
Я пытался достигнуть того же с границами, но цветовая комбинация не работает меня, и это не является надлежащим.
Другие веб-сайты используют изображения для них? действительно ли это легко к этому?
Какая-либо CSS в качестве примера?
Сайты в качестве примера: http://woothemes.com, http://net.tutsplus.com/, http://www.w3schools.com (в заголовке) и на администраторской боковой панели страницы Wordpress
3 ответа
Не знаю, поможет ли это, но использование границ в 1 px, которые немного светлее и темнее фона двух соседних элементов, может имитировать это. Например:
<!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:
В качестве примечания, переключение светлого и темного в приведенном выше примере даст вам эффект слегка приподнятой/рельефной границы.
это свойство тени текста css. Для получения этого эффекта используйте
.style{
text-shadow:0 1px #FFFFFF;
}
, но на самом деле это эффект сочетания цветов, который вы используете для фона и текста. так что вы должны делать.
- используйте цвет тени текста темнее, чем цвет фона.
- используйте светлый цвет тени текста, чем цвет текста.
3D-эффекты в компьютерных 2D-дисплеях - это простые оптические эффекты, достигаемые за счет использования цвета: более светлые вариации предполагают яркие (более высокие области), а более темные вариации предполагают затемнение (более низкие области). Большинство людей - правши, и источники света для письма обычно располагаются в левой части рабочего стола, поэтому вы используете воображаемый источник света в левом верхнем углу экрана.
В течение многих лет это можно было делать с помощью чистого CSS в прямоугольных областях:
body {background-color: # 8080C0; } div {дисплей: встроенный блок; маржа: 1em; отступ: 1em; ширина: 25%; цвет белый; цвет фона: # 8080C0; } div.outset {ширина границы: 1px; стиль границы: сплошной; цвет границы: # A6A6D2 # 4D4D9B # 4D4D9B # A6A6D2; } div.inset {ширина границы: 1px; стиль границы: сплошной; цвет границы: # 4D4D9B # A6A6D2 # A6A6D2 # 4D4D9B; } Lorem ipsum dolor sit amet, conctetur adipisicing elit Lorem ipsum dolor sit amet, conctetur adipisicing elit Шрифты Однако требуются новые атрибуты CSS, которые пока не имеют широкой поддержки, а также не позволяют предоставлять более одного цвета, поэтому обычно используются изображения. См. http://www.quirksmode.org/css/textshadow.html