Как сверстать такую тень?

17.02.2013, 15:10. **Показов** 2696. **Ответов** 13

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

Подскажите пожалуйста...

@Taatshi · 17.02.2013, 15:51

прозрачный png с тенью, background-image, отрицательный margin-top для меню, z-index для правильного расположения слоев. Следить, чтобы картинка не перекрывала ссылки в меню - работать не будут.

@smladshoy · 17.02.2013, 23:01

А по моему это либо картинка(png с тенью)Или это div-какой нибудь с закруглёнными углами и с прописанным в css правилом:

CSS

1	.divtakoyto{width : 500px;height : 20px;background-color : #000000;box-shadow : 2px 3px 10px 3px black;}

-Поэкспериментируйте! Только разместите где вам надо!

@maakkss · 18.02.2013, 11:05

А разве нельзя создать див с заливкой в серый цвет, и в нём расположить картинки по центру?

@Platinumix · 15.03.2013, 00:22

Ребят какие нафиг картинки? это ж прошлый век! Зачем грузить сайт лишней графикой? Это все легко делается стилями. Юзай css совйство box-shadow для обычного блока div и все.

@Taatshi · 15.03.2013, 01:11

Platinumix, а как насчет кроссбраузерности?

@Platinumix · 15.03.2013, 01:54

Сообщение от Taatshi

Platinumix, а как насчет кроссбраузерности?

Ну для гарантии можно использовать всякие разновидности -webkit-box-shadow , -moz-box-shadow ... для IE версий до 9 есть

CSS

1	filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.
Все более мене свежие версии браузеров все это хорошо поддерживают... И вообще всякие градиенты, тени, закругления, тексты и прочее надо делать при помощи системных инструментов а не картинками как в прошлом веке и даже не js. Так сайт будет максимально легким, быстрым и гибким в дизайне...

@Vladimir_master · 10.04.2013, 22:10

Сообщение от Platinumix

Ребят какие нафиг картинки? это ж прошлый век! Зачем грузить сайт лишней графикой? Это все легко делается стилями. Юзай css совйство box-shadow для обычного блока div и все.

Вы наверное не посмотрели на картинку и бигом писать. Такую тень можно сверстать, но код там будет подлинее и в IE он не во всех версиях будет работать. Темболее у него размытие по краям больше.

@Platinumix · 11.04.2013, 08:02

Сообщение от Vladimir_master

Вы наверное не посмотрели на картинку и бигом писать. Такую тень можно сверстать, но код там будет подлинее и в IE он не во всех версиях будет работать. Темболее у него размытие по краям больше.

Я так понимаю, что вы мало знаете о тенях методами CSS. Могу вас заверить, что там можно поставить любое размытие т.к. все это задается цифрами. Код можно же писать не только руками, а использовать генераторы кода... Про IE разных версий даже и говорить не хочу, если хотите, что бы в нем все работало то пишите код на уровне стандартов 2000 года, верстайте таблицами и закругляйте углы картинками...

@Vladimir_master · 11.04.2013, 10:27

Сообщение от Platinumix

Я так понимаю, что вы мало знаете о тенях методами CSS. Могу вас заверить, что там можно поставить любое размытие т.к. все это задается цифрами. Код можно же писать не только руками, а использовать генераторы кода... Про IE разных версий даже и говорить не хочу, если хотите, что бы в нем все работало то пишите код на уровне стандартов 2000 года, верстайте таблицами и закругляйте углы картинками...

Покажи мне пожалуйста, где я написал, что нельзя сверстать такую тень стилями. Я напишсал, что проще зделать ему картинкой, чем он будет писать кодом, которого незнает. Ты сам хоть уверен в том что говоришь?

@Jeka778 · 11.04.2013, 15:00

это вообще кажется блок....

@sheila · 11.04.2013, 21:30

Кликните здесь для просмотра всего текста

HTML5

1
2
3

<div class="shadow round insideshadow">
Объект, который отбрасывает тень
  </div>

CSS

.shadow {
position:relative;
width:100%;    
}
 
.shadow:before,
.shadow:after {
content:"";
position:absolute; 
bottom:9px;
left:10px;
width:50%;
height:20%;
z-index:-2;
}
 
.shadow:after {
       right:10px; 
            left:auto;
}
 
.round:before,
.round:after { 
max-width:400px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.4);   
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.4);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.4);
            -webkit-transform:rotate(-3deg);    
               -moz-transform:rotate(-3deg);   
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }
        
        .round:after {
            -webkit-transform:rotate(3deg);   
               -moz-transform:rotate(3deg);  
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }
 
.insideshadow {
-webkit-box-shadow:0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 0 40px rgba(0, 0, 0, 0.1) inset;
}

это просто принцип, тень нужно подгонять под конкретный размер. С кроссбраузерностью вопрос..В IE9 тень есть, но она не поворачивается.. но возможно, есть какие то фиксы

@Mailo · 11.04.2013, 22:16

Да уж, сразу вопрос к требованию кроссбраузерности в ослах. Если 9+, то полностью согласен со вторым сообщением в теме, это png пиксель с тенью box-shadow, ну а ниже 9го осла только картинками.

@maximus2011 · 13.04.2013, 08:09

Сообщение от Taatshi

Platinumix, а как насчет кроссбраузерности?

А как насчет pie для ie7,8

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	13.04.2013, 08:09	14
	Сообщение от Taatshi Platinumix, а как насчет кроссбраузерности? А как насчет pie для ie7,8 0

Новые блоги и статьи
Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .	Полезные поделки на Arduino, которые можно сделать самому raxper 06.01.2025 Arduino как платформа для творчества Arduino представляет собой удивительную платформу для технического творчества, которая открывает безграничные возможности для создания уникальных проектов. Эта. . .	Подборка решений задач на Python IT_Exp 06.01.2025 Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .
С чего начать программировать микроконтроллеры raxper 06.01.2025 Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .	Из чего собрать игровой компьютер inter-admin 06.01.2025 Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .	Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного сумматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом зад Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .

b0d
		1
	Как сверстать такую тень? 17.02.2013, 15:10. Показов 2696. Ответов 13 Метки нет (Все метки) Подскажите пожалуйста... Миниатюры

@Taatshi Почетный модератор 12271 / 5336 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	17.02.2013, 15:51	2
	прозрачный png с тенью, background-image, отрицательный margin-top для меню, z-index для правильного расположения слоев. Следить, чтобы картинка не перекрывала ссылки в меню - работать не будут. 0

@maakkss 2 / 2 / 0 Регистрация: 17.02.2013 Сообщений: 73
	18.02.2013, 11:05	4
	А разве нельзя создать див с заливкой в серый цвет, и в нём расположить картинки по центру? 0

@Platinumix 231 / 12 / 3 Регистрация: 28.12.2012 Сообщений: 192
	15.03.2013, 00:22	5
	Ребят какие нафиг картинки? это ж прошлый век! Зачем грузить сайт лишней графикой? Это все легко делается стилями. Юзай css совйство box-shadow для обычного блока div и все. 0

@Taatshi Почетный модератор 12271 / 5336 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	15.03.2013, 01:11	6
	Platinumix, а как насчет кроссбраузерности? 0

@Vladimir_master 6 / 0 / 0 Регистрация: 10.04.2013 Сообщений: 13
	10.04.2013, 22:10	8
	Сообщение от Platinumix Ребят какие нафиг картинки? это ж прошлый век! Зачем грузить сайт лишней графикой? Это все легко делается стилями. Юзай css совйство box-shadow для обычного блока div и все. Вы наверное не посмотрели на картинку и бигом писать. Такую тень можно сверстать, но код там будет подлинее и в IE он не во всех версиях будет работать. Темболее у него размытие по краям больше. 0

@Platinumix 231 / 12 / 3 Регистрация: 28.12.2012 Сообщений: 192
	11.04.2013, 08:02	9
	Сообщение от Vladimir_master Вы наверное не посмотрели на картинку и бигом писать. Такую тень можно сверстать, но код там будет подлинее и в IE он не во всех версиях будет работать. Темболее у него размытие по краям больше. Я так понимаю, что вы мало знаете о тенях методами CSS. Могу вас заверить, что там можно поставить любое размытие т.к. все это задается цифрами. Код можно же писать не только руками, а использовать генераторы кода... Про IE разных версий даже и говорить не хочу, если хотите, что бы в нем все работало то пишите код на уровне стандартов 2000 года, верстайте таблицами и закругляйте углы картинками... 0

@Vladimir_master 6 / 0 / 0 Регистрация: 10.04.2013 Сообщений: 13
	11.04.2013, 10:27	10
	Сообщение от Platinumix Я так понимаю, что вы мало знаете о тенях методами CSS. Могу вас заверить, что там можно поставить любое размытие т.к. все это задается цифрами. Код можно же писать не только руками, а использовать генераторы кода... Про IE разных версий даже и говорить не хочу, если хотите, что бы в нем все работало то пишите код на уровне стандартов 2000 года, верстайте таблицами и закругляйте углы картинками... Покажи мне пожалуйста, где я написал, что нельзя сверстать такую тень стилями. Я напишсал, что проще зделать ему картинкой, чем он будет писать кодом, которого незнает. Ты сам хоть уверен в том что говоришь? 0

@Jeka778 0 / 0 / 0 Регистрация: 11.04.2013 Сообщений: 8
	11.04.2013, 15:00	11
	это вообще кажется блок.... 0

@Mailo 245 / 222 / 31 Регистрация: 18.02.2010 Сообщений: 2,275
	11.04.2013, 22:16	13
	Да уж, сразу вопрос к требованию кроссбраузерности в ослах. Если 9+, то полностью согласен со вторым сообщением в теме, это png пиксель с тенью box-shadow, ну а ниже 9го осла только картинками. 0