Создайте эффект вставки, используя CSS на веб-сайтах. - PullRequest
Новая
       35

Создайте эффект вставки, используя CSS на веб-сайтах.

10 голосов
/ 15 июня 2010

Я очень впечатлен эффектом "вставки" на многих последних веб-сайтах. Некоторые примеры альтернативный текст http://img687.imageshack.us/img687/457/inset2.png

и

альтернативный текст http://img163.imageshack.us/img163/8158/inset1.png

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

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

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

Какой-нибудь пример css?

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

Ответы [ 8 ]

17 голосов
/ 15 июня 2010

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

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

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

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

4 голосов
/ 22 сентября 2014

Используйте 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.

4 голосов
/ 02 августа 2012

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

После ответа user1302036 все, что нам нужно, это установить цвет верхней и нижней границ для <hr> и установить ширину левой и правой границ в 0. 

hr {
  border-width: 1px 0px;
  border-color: #666 transparent #ccc transparent;
}
4 голосов
/ 15 июня 2010

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

Это можно было сделать с помощьючистый 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>

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

2 голосов
/ 15 июня 2010

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

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

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

  1. использовать цвет тени текста темнее цвета фона.
  2. использовать цвет тени текста светлее цвета текста.
1 голос
/ 16 февраля 2014

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

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

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

1 голос
/ 25 октября 2013

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

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

1 голос
/ 22 июня 2012

Проще всего, нарисуйте горизонтальное правило

со следующими стилями, контраст можно изменить в зависимости от цвета фона: 
hr {
background-color: #000;
border-top: solid 1px #999;
border-left: none;  
height:0px;
}
...