Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
-23 / 1 / 2
Регистрация: 08.12.2013
Сообщений: 152

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

25.11.2016, 10:01. Показов 1674. Ответов 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
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
25.11.2016, 10:01
Ответы с готовыми решениями:

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

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

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

3
0 / 0 / 0
Регистрация: 25.08.2015
Сообщений: 20
25.11.2016, 14:13
Там вообще не тень, а просто такая картинка, тень так не сделать
0
-23 / 1 / 2
Регистрация: 08.12.2013
Сообщений: 152
25.11.2016, 14:57  [ТС]
ошибаетесь тень можно так сделать!
0
0 / 0 / 0
Регистрация: 25.08.2015
Сообщений: 20
25.11.2016, 16:54
Даже если сильно заморочиться, все равно будет видно наложение
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
25.11.2016, 16:54
Помогаю со студенческими работами здесь

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

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru