-25 / 0 / 1
Регистрация: 08.12.2013
Сообщений: 150
1

Как сделать из box-shadow фигуру параболу

25.11.2016, 10:01. Показов 901. Ответов 3
Метки нет (Все метки)

Я сделал вокруг круглого логотипа тень, но не пойму как сделать так чтобы она была в форме параболы чтобы тень плавно перетекала в фон header. На картинках (см.ниже) я скинул как я хочу сделать и как у меня пока получилось.
Вот мой код Html
HTML5
1
2
3
4
5
6
7
8
9
<header class="site-header" role="navigation">
        <hgroup>
        <div class="hgroup">
        <div class="logo-bar">
            <figure class="logo"><a href="#"><img src="layer.png" width="97" height="98" alt="Группа предприятий ГОРРЕМСТРОЙ"></a><figcaption>Группа предприятий ГОРРЕМСТРОЙ</figcaption></figure>
                </div>
        </div>
        </hgroup>
        </header>
Вот код CSS для картинки с классом logo
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
body {
    font-family: 'Georgia', sans-serif;
    color: #383838;
    font-size: 100%;
    font-weight: 400;
    background: url(fon.png) repeat 100% 0;
    background-color: #e7e7e7;
    padding:0px;
    margin: 0px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}
.site-header hgroup {
    min-height: 98px;
    width: 100%;
    background: url(bg_header.png) repeat-x;
    
}
hgroup .hgroup{
    margin: 0 auto;
    max-width: 1300px;
    text-align: left;
}
.logo {
    float: left;
    margin-left: 60px;
    position: relative;
    top: 11px;
    
}
.logo img{
    box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.91);
    border-radius: 0px 0px 60px 60px;
}
Спасибо за ваши ответы.
Миниатюры
Как сделать из box-shadow фигуру параболу   Как сделать из box-shadow фигуру параболу  
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.11.2016, 10:01
Ответы с готовыми решениями:

Как сделать, чтобы при наведении на блок уменьшался box-shadow фона?
Здравствуйте , суть в том что когда делал эффекты при наведение на блок , представьте такой...

Как изменить box-shadow в бутстрап?
Нужна внутренняя тень элемента только сверху и снизу. Задаю box-shadow: inset 0px 1px 20px...

Как делать тени с box-shadow?
Всем привет. Кто знает как делать тени с box-shadow. Я видел много раз как люди заходят в фотошоп...

Box-shadow не работает в IE 11
Всем привет. Такая проблема. Пишу в стилях box-shadow: 0 0 5px #CCCCCC; -moz-box-shadow:...

3
0 / 0 / 0
Регистрация: 25.08.2015
Сообщений: 20
25.11.2016, 14:13 2
Там вообще не тень, а просто такая картинка, тень так не сделать
0
-25 / 0 / 1
Регистрация: 08.12.2013
Сообщений: 150
25.11.2016, 14:57  [ТС] 3
ошибаетесь тень можно так сделать!
0
0 / 0 / 0
Регистрация: 25.08.2015
Сообщений: 20
25.11.2016, 16:54 4
Даже если сильно заморочиться, все равно будет видно наложение
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.11.2016, 16:54

Ограничение размера box shadow
Здравствуйте! Подскажите, пожалуйста, как сделать так, чтобы у div было две одинаковые тени сверху,...

IE не отображивает то ли :active, то ли box-shadow
.el1 { position: relative; left: 25px; top: 25px; width: 100px; min-width:...

Не получается подобрать эффект box-shadow
Попрбовал здесь Есть белый фон. И есть блок на всю высоту. Нужно сделать такой эффект, чтобы он...

Свойство box-shadow: разное значение
Добрый день уважаемые. Вот возник интерес, есть ли возможность разделить свойство box-shadow: по...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.