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

Я очень впечатлен эффектом "вставки" на многих последних веб-сайтах. Некоторые примеры

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

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

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

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

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

Ответы

Ответ 1

Не знаю, поможет ли это, но использование границ 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>

ИЗМЕНИТЬ:

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

Ответ 2

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

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

body{
	background-color: #8080C0;
}
div{
  display: inline-block;
	margin: 1em;
	padding: 1em;
	width: 25%;
	color: white;
	background-color: #8080C0;
}
div.outset{
	border-width: 1px;
	border-style: solid;
	border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2;
}
div.inset{
	border-width: 1px;
	border-style: solid;
	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>

Ответ 3

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

В ответ на user1302036s ответ, нам нужно только установить цвет верхней и нижней границ для <hr> и установить ширину левой и правой границы до 0.

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

Ответ 4

Используйте border-bottom и box-shadow.

body {
  background-color: #D0D9E0;
}

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

Просмотрите Fiddle и Совместимость браузера для свойства box-shadow.

Ответ 5

это свойство CSS shadow shadow. Для получения этого эффекта используйте

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

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

Использовать текст теневого цвета темнее, чем цвет фона.
использовать цвет тени для текста, чем цвет текста.

Ответ 6

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

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

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

Ответ 7

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

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 (красный, зеленый, синий, альфа), вы можете использовать белый/черный с альфа-прозрачностью, чтобы создать иллюзию эффекта вставки.

Ответ 8

Просто выполните следующее:

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

Играйте с непрозрачностью и цветами в соответствии с вашим дизайном. Он работает на всех фонов, которые я думаю;)