Состыковать 2 блока с тенями

@asdds · Регистрация: 28.10.2014

Author24 — интернет-сервис помощи студентам

Доброго времени суток.
Студент-айтишник, вэб не профильный предмет, ковыряю сам потихоньку по книжкам.
Вопрос - два блока, тень по всему диаметру, 1px, blur 10. Как бесшовно состыковать два блока сохранив тень по диаметру? Картинка прилагается.
Спасибо.

@Давран · 28.10.2014, 22:23

asdds, попробуйте для второго блока написать

CSS

1	margin-top:1px;

и скиньте верстку, понятней будет

@asdds · 28.10.2014, 23:29 **[ТС]**

margin-top создает черную полосу.
Верстка:
1 блок

HTML5

<div class="top">
 
<header>
    <div class="logo">Йа логотип</div>
</header>
 
<nav>
    <table class="navtable">
            <tr>
            <td class="navactive"><a href="index.html">Главная</a></td>
            <td><a href="about.html">О нас</a></td>
                <td><a href="services.html">Услуги</a></td>
                <td><a href="vakancy.html">Вакансии</a></td>
                <td><a href="staff.html">Контакты</a></td>
            </tr>
    </table>
    <div class="under"></div>
               
</nav>
</div>

CSS

1
2
3

.top    {-webkit-box-shadow: 1px 0px 10px #000000;
        box-shadow: 1px 0px 10px #000000;
        border-radius: 5px}

CSS

.under  {width: 100%;   
        background-color: #DE8642;
        height: 20px;
        border-bottom-left-radius: 5px;
        }

2 блок

HTML5

1	<aside>news</aside>

CSS

aside   {
    background-color: #DE8642;
    margin-left: 80%;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 1%;
    color: white;
    -webkit-box-shadow: 1px 0px 10px #000000;
    box-shadow: 1px 0px 10px #000000;}

Добавлено через 43 минуты
Вообще идея следующая, можно ли сделать тень для трех сторон, но не смещением тени вниз? Если ее сместить вниз на 10 пикселей - эти два элемента сливаются без шва и выглядят целым, но снизу черная полоса в эти 10px.
Понятно что можно тень переработать, но вот именно в таком виде как у меня сейчас хочу решение найти...

@МилокМурлыка · 29.10.2014, 20:21

CSS

element:after{
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: -1;
    box-shadow: 0px 0px 5px 5px #000;
}

вместо element напишите свой селектор (id, class, что угодно)
тень сделайте свою, последняя строчка.
Честно говоря запутался я в вашем коде, поэтому решение даю в таком виде.
UPD: Стоп, что-то у меня поплыло, сейчас перепроверю..
UPD2: поставьте relative вместо absolute.

@asdds 0 / 0 / 0 Регистрация: 28.10.2014 Сообщений: 15
		1
	Состыковать 2 блока с тенями 28.10.2014, 21:46. Показов 1132. Ответов 3 Метки нет (Все метки) Доброго времени суток. Студент-айтишник, вэб не профильный предмет, ковыряю сам потихоньку по книжкам. Вопрос - два блока, тень по всему диаметру, 1px, blur 10. Как бесшовно состыковать два блока сохранив тень по диаметру? Картинка прилагается. Спасибо. Миниатюры 0

	29.10.2014, 20:21

Опции темы