| |
 39.8 Кб |
|
| | Подскажите пожалуйста как сделать в header тень только с краев, неужели только картинкой?
Сейчас начал уже верстать на html5
P.S. Да, если учесть что верстка макета будет резиновой | |
| |
|
|
| |
|
|
| |
для: immortal727
(10.09.2013 в 17:19)
| | | Блока или текста? | |
| |
|
|
| |
|
|
| |
для: confirm
(10.09.2013 в 17:55)
| | | как показано в картинке, блока | |
| |
|
|
| |
|
|
| |
для: immortal727
(10.09.2013 в 19:25)
| | | По картинке не понять чего вам надо.
Это тень на тексте
Это тень на любой элемент, а не только картинка | |
| |
|
|
| |
|
|
| |
для: confirm
(10.09.2013 в 19:28)
| | | Тогда высылаю исходник странички в psd www.delfinrus.com/files/2nedeli/index.psd
Не могу понять просто как же мне сделать именно верхнюю часть так, чтобы тень была только с боков. Помогите пожалуйста. | |
| |
|
|
| |
|
|
| |
для: immortal727
(10.09.2013 в 19:37)
| | | Какого именно блока - шапка белая? И тень с его боков? | |
| |
|
|
| |
|
|
| |
для: confirm
(10.09.2013 в 19:52)
| | | ну да. Видите, там шапка (только серенькая, ну неважно) а сбоку под ней если присмотреться идет черная тень с боков, а в середине этой тени под шапкой нету. Как это сделать? | |
| |
|
|
| |
|
|
| |
для: immortal727
(10.09.2013 в 19:55)
| | | Так с боков шапки тень или слева и справа ее? | |
| |
|
|
| |
|
|
| |
для: confirm
(10.09.2013 в 20:01)
| | | Ну да, под шапкой, неужели не видно? Еще она полностью черная, т.е. без прозачности идет | |
| |
|
|
| |
|
|
| |
для: immortal727
(10.09.2013 в 20:04)
| | | Понятно, а то штаны, штаны, и не понять какие )
На CCS это просто:
<style>
div {
width: 400px;
height: 80px;
box-shadow: 0 6px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 6px 3px rgba(0,0,0,.5);
-moz-box-shadow: 0 6px 3px rgba(0,0,0,.5);
}
</style>
<div></div>
|
Тень сдвинута вниз на 6px с радиусом размытия 3px, с прозрачностью равной 50%. Заметьте, что размытие заставляет появляться тени и с других сторон, и чем оно будет выше, тем заметнее (на указанный радиус). Если убрать размытие, то тень приобретет четкое очертание, но будет только на указанной стороне. Если такое не подходит, седлайте ее частью рисунка, ваш заголовок "Автосервис" ведь рисунком будет, надо полагать? | |
| |
|
|
| |
|
|
| |
для: confirm
(10.09.2013 в 20:21)
| | | Так я так и делаю, но ведь тень идет по всему низу, а как же в середине убрать? Картинкой что-ли налезть как слой, только так получается | |
| |
|
|
| |
|
|
| |
для: immortal727
(10.09.2013 в 20:46)
| | | Вот что значит - вам вогнутая тень нужна. Нет, конечно, тень есть тень, и она будет принимать очертания объекта. Если это прямая сторона, то и тень не будет вогнутой или выпуклой. Если это круг, значит и тень будет по кругу. Создайте объект с вогнутым ребром, получите такую тень.
А картинку как PNG24, а как уж ее расположить и кому она должна принадлежать, это уже от верстки зависит. Если шапка фиксированная, а остальное прокручивается, значит шапке принадлежать. Если прокручивается вся страница, значит к заголовку ниже.
PS. В рамках HTML5 можно воспользоваться canvas и отрисовать тень такую. | |
| |
|
|
| |
|
|
| |
для: confirm
(10.09.2013 в 21:12)
| | | Ну вот, это уже лучше. Да вот только canvas только начал изучать пока. Ну да ладно, пока простую сделаю, а потом уже можно и через него сделать, чтоб время даром тоже не терять | |
| |
|
|
| |
|
|
| |
для: immortal727
(10.09.2013 в 21:31)
| | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>
.top {
width:1000px;
height:100px;
background:#fff;
}
.top:before {
z-index:-1;
position:absolute;
content:"";
width:450px;
height:1px;
left:0;
top:100px;
box-shadow:0 9px 11px rgba(0, 0, 0, 1);
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
-o-transform:rotate(-2deg);
-ms-transform:rotate(-2deg);
transform:rotate(-2deg);
}
.top:after {
z-index:-1;
position:absolute;
content:"";
width:450px;
height:1px;
right:0;
top:100px;
box-shadow:0 9px 11px rgba(0, 0, 0, 1);
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-o-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
}
</style>
</head>
<body>
<div class="top">
</div>
</body>
</html>
|
| |
| |
|
|
