Как мне создать затененный блок в HTML / CSS, как на сайте Apple? - PullRequest
Новая
       29

Как мне создать затененный блок в HTML / CSS, как на сайте Apple?

1 голос
/ 14 января 2011

Веб-сайт Apple содержит множество визуально привлекательных элементов, и иногда начинающий веб-разработчик может взглянуть на определенные элементы и задуматься, как воспроизвести этот вид. Поэтому я задаю вопрос (и предоставлю ответ):

Как Apple делает Dropbox с закругленными углами?

Ответы [ 4 ]

1 голос
/ 14 января 2011

Как уже упоминалось, у меня есть ответ:

CSS для эффекта выглядит следующим образом 

.content {
    background-color: #fff;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 4px 4px 4px 4px;
    border-color: #E5E5E5 #DBDBDB #D2D2D2;
    border-style: solid;
    border-width: 1px;
    height: 210px;
    width: 320px;
}

Проверьте jsfiddle этого кода, чтобы увидеть его вдействие.

Надеюсь, что это поможет любому, кто ищет быстрый и легкий shadowbox.

~ TheEternalAbyss

1 голос
/ 14 января 2011

Обычно для этого достаточно создать коробку в фотошопе и экспортировать ее уже с тенью. Тем не менее, есть новые методы CSS3, которые позволяют вам делать это с помощью кода:

Смотрите этот сайт

0 голосов
/ 14 января 2011

Вы должны добавить 

-webkit-box-shadow

для браузеров на базе движка WebKit (Safari, Chrome)

0 голосов
/ 14 января 2011

Инспектор Google Chrome или Расширение Firebug Firefox может показать вам HTML и CSS, которые они используют.

...