Хорошая вставка границы в CSS3

Question

Мне действительно нравится этот стиль границ, который я видел в последнее время на трубках:

Вероятно, будет лучше, если вы просто посмотрите его на сайте: http://markdotto.com/bootstrap/

Мне особенно интересно, как они создают этот эффект, кажется, что нижняя граница подсвечивается, а верхняя часть затемнена.Я знаю, как бы это сделать в Photoshop, но как они это делают в CSS?

code, pre {
  background-color: rgba(0, 0, 0, 0);
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0)));
  /* Konqueror */

  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* FF 3.6+ */

  background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* IE10 */

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.15)), color-stop(100%, rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome 2+ */

  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* Safari 5.1+, Chrome 10+ */

  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* Opera 11.10 */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0);
  /* IE6 & IE7 */

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0)";
  /* IE8+ */

  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* the standard */

  background-color: rgba(0, 0, 0, 0.3);
  font-family: "Monaco", Courier New, monospace;
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
}
code {
  padding: 3px 6px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
pre {
  margin: 20px 0;
  padding: 20px;
  color: #fff;
  -moz-border-radius: 6px;
  border-radius: 6px;
  white-space: pre-wrap;
}

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

Answer 1

Это на самом деле довольно просто сделать. Я настроил небольшой jsfiddle , в котором описывается, как достигается эффект в этом случае, и объясняется код, который вы разместили.

Надеюсь, это все прояснит! Если нет, я бы побудил уточнить. Я люблю css и редко получаю возможность использовать его в своей работе.

edit - ответ от jsfiddle:

Верх <pre> затемнен черной вставкой, прозрачной рамкой-тенью:

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25)

rgba () здесь означает Красный, Зеленый, Синий, Альфа . 0, 0, 0 означает черный цвет, а .25 означает 25% непрозрачность или 75% прозрачность.

Нижняя часть <pre> выложена прозрачной прямоугольной тенью белого цвета с одним пикселем:

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);

Таким образом, вставленная черная тень находится внутри элемента, придавая глубину, а белая (255, 255, 255) тень висит на 1 пиксель ниже элемента, создавая иллюзию выделения.

Самое классное, в этом коде объединены два объявления:

box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);

Вот css, использованный в образце, с краткими объявлениями поставщиков, удаленными для краткости:

body {
  background: url('http://subtlepatterns.com/patterns/debut_dark.png');
  padding: 30px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

p {
  font-family: sans-serif;
  margin: 10px 0px;
  font-size: 14px;
}

code {
  font-family: monospace;
  margin: 10px 0px;
}

pre {
  margin: 20px;
  padding: 20px;
  color: #fff;
  border-radius: 6px;
  white-space: pre-wrap;
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  background-color: rgba(0, 0, 0, 0.1);
  font-family: Menlo, monospace;
  font-size: 12px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
}

Его можно применить к элементу <pre>, чтобы увидеть желаемый эффект. Если это не сработает, вам может потребоваться применить префиксы поставщиков к box-shadow и background-image.

Answer 2

Ключевая часть эффекта, о котором вы, похоже, говорите - появление краев, а не градиента на заднем плане, как объяснено другими ответами, - это:

-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);

Существует дваприменяемые тени: стандартная тень от блока (которую Photoshop назвал бы «Тень») снизу с более светлым цветом (rgba(255, 255, 255, 0.25)), и вставка (которую Photoshop назвал бы «Внутренняя тень») натоп с более темным цветом (rgba(0, 0, 0, 0.25)).

Answer 3

Хорошо, этот был хитрым.похоже, все, что они сделали, это использовали довольно темный прозрачный / прозрачный альфа-эффект в градиенте от темного к светлому.так что похоже, что это меняется с обоев веб-сайтов или фона.

У вас есть код, поэтому бессмысленно приводить вам пример.Так что это действительно хитрость для глаз с фоном для сайта.