HTML / CSS "теневая" граница? - PullRequest
Новая
       7

HTML / CSS "теневая" граница?

2 голосов
/ 02 мая 2011

Я пытался просмотреть в элементе проверки Chrome , но не смог выяснить, как эта страница [http://www.mousehuntgame.com/] создает рамку типа shadow ? По обе стороны от среднего поля [со всем содержимым страницы] оно становится темно-синим, создавая эффект тени.

Я хочу использовать это для моего сайта. Какой код? Это CSS? Спасибо!

Ответы [ 5 ]

5 голосов
/ 02 мая 2011

Они используют изображение:

image

(it's actually 1px high, I just stretched it here for clarity)

You could do it with CSS3 box-shadow, примерный пример приведен здесь: http://jsfiddle.net/B9Uyj/1/

Чтобы заставить box-shadow работать в старых версиях IE, вы можете использовать CSS3 PIE . (Это уже работает в IE9)

Изображение будет самым простым вариантом здесь.

4 голосов
/ 02 мая 2011

Если вы хотите CSS3, вы можете оформить свой текст с помощью 

text-shadow: red 2px 2px 2px;

сделать тень с 

-moz-box-shadow: 6px 6px 5px #CCC;
-webkit-box-shadow: 6px 6px 5px #CCC;
box-shadow: 6px 6px 5px #CCC;

для простоты градиентов фона вы можете использовать этот сайт http://gradients.glrzad.com/

2 голосов
/ 23 сентября 2013

Этот код Css предоставит сплошную границу для разделения и тени, как используется на странице в вашей ссылке.

 -moz-border-radius: 20px;
    -khtml-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    overflow:hidden;
    background:#F6E7B9;
    -webkit-box-shadow:0 0 4em rgb(4,6,5);
    -moz-box-shadow:0 0 3em rgb(6,7,8);
    box-shadow:0 0 1em rgb(5,9,2);
    border:20px solid skyblue;
    font-family:Verdana, Geneva, sans-serif;
enter image description here
1 голос
/ 02 мая 2011

Я обычно устанавливаю фоновое изображение контейнера, чтобы оно было размером 10 x 10 пикселей, которое будет иметь 20 пикселей на каждой стороне тени, а затем повторять по вертикали. Предполагая, что ваш пробел имеет ширину 960px и 20px с каждой стороны тени, используйте: 

<div class="box">
     content
</div>

CSS: 

div.box
{
     background: url(image-with-shadow.png) repeat-y;
     padding: 0 20px;
     width: 960px;
}

Вот пример изображения для использования: http://projectavian.com/repeat.png

0 голосов
/ 02 мая 2011

Я считаю, что они делают это с изображениями.Найдите 'active' и посмотрите все их элементы в этой таблице стилей: http://www.mousehuntgame.com/css/en/tabbarview.css?v=98&t=1294342331

...