X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сверстать вот такую штуку?, Помогите пожалуйста гуру
mr_LasVegas
mr_LasVegas
Topic Starter сообщение 31.3.2016, 20:43; Ответить: mr_LasVegas
Сообщение #1


UX/UI Designer
*****

Группа: Active User
Сообщений: 737
Регистрация: 9.4.2010
Из: Moscow
Поблагодарили: 289 раз
Репутация:   67  


Всем привет, помогите пожалуйста, не могу понять как сверстать правильно, пробовал по разному - все время вкривь и вкось.
Суть вопроса:
Надо сверстать вот такую штуку:
Прикрепленное изображение

Я каждый элемент разделил на 3 элемента, где элемент 1 и 3 это картинка, а 2 это div блок с background нужным цветом, а поверх написан текст.
Прикрепленное изображение

Но не получается соединить все 3 элемента в один, что бы все это правильно отображалось как на первой картинке.

П.С. хотелось бы что бы при уменьшении размера разрешения положение не нарушалось и элемент отображался корректно.

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

Сообщение отредактировал falken - 1.4.2016, 1:46
Причина редактирования: переместил в соответствующий раздел


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
TrustMan
TrustMan
сообщение 31.3.2016, 23:41; Ответить: TrustMan
Сообщение #2


Участник
***

Группа: User
Сообщений: 159
Регистрация: 12.5.2015
Поблагодарили: 51 раз
Репутация:   8  


Да не, ТС походу про адаптивность. При изменении размера по ширине скорее всего картинки наползают на div


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 1.4.2016, 1:36; Ответить: falken
Сообщение #3


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


Цитата(mr_LasVegas @ 31.3.2016, 19:43) *
Подскажите пожалуйста

Используйте псевдоэлементы :after и :before. Все проще, чем кажется. Залейте первую и третью пикчу сюда, покажу на примере в jsfiddle.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mr_LasVegas
mr_LasVegas
Topic Starter сообщение 1.4.2016, 6:38; Ответить: mr_LasVegas
Сообщение #4


UX/UI Designer
*****

Группа: Active User
Сообщений: 737
Регистрация: 9.4.2010
Из: Moscow
Поблагодарили: 289 раз
Репутация:   67  


Вот falken
Прикрепленное изображение
Прикрепленное изображение
Спасибо большое! Буду ждать)

Сообщение отредактировал mr_LasVegas - 1.4.2016, 6:38


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Geers
Geers
сообщение 1.4.2016, 9:59; Ответить: Geers
Сообщение #5


Старожил
******


Группа: Active User
Сообщений: 1231
Регистрация: 13.4.2011
Поблагодарили: 654 раза
Репутация:   95  


mr_LasVegas
В вашем случае вообще графика не нужна.
Флет тени для слов:
http://ruseller.com/lessons.php?id=1834&rub=32
http://artslab.info/podborki/generatory-dlinnyx-tenej/

И привязать этот Breadcrumbs http://beloweb.ru/wp/krasivyie-hlebnyie-kr...ss-na-css3.html

falken подскажет как. :D

Сообщение отредактировал Geers - 1.4.2016, 10:01


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 1.4.2016, 15:15; Ответить: falken
Сообщение #6


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


Geers, ну человек решил графикой сделать, так даже проще.

Цитата(mr_LasVegas @ 1.4.2016, 5:38) *
Буду ждать)

https://jsfiddle.net/z4dqzzwm/


Поблагодарили: (4)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
graycat777
graycat777
сообщение 1.4.2016, 16:02; Ответить: graycat777
Сообщение #7


Новичок
*

Группа: User
Сообщений: 46
Регистрация: 8.4.2015
Из: Украина
Поблагодарили: 21 раз
Репутация:   10  


Вариант без графики: https://jsfiddle.net/ebfyc59v/


--------------------


Поблагодарили: (5)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mr_LasVegas
mr_LasVegas
Topic Starter сообщение 1.4.2016, 19:25; Ответить: mr_LasVegas
Сообщение #8


UX/UI Designer
*****

Группа: Active User
Сообщений: 737
Регистрация: 9.4.2010
Из: Moscow
Поблагодарили: 289 раз
Репутация:   67  


falken, graycat777, спасибо огромное за помощь!! очень выручили! сейчас пойду делать у себя))


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alexan
Alexan
сообщение 13.4.2016, 15:58; Ответить: Alexan
Сообщение #9


Новичок
*

Группа: User
Сообщений: 16
Регистрация: 15.3.2016
Поблагодарили: 0 раз
Репутация:   0  


и как у вас, получилось? похвастаться можете?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
webhelper777
webhelper777
сообщение 13.4.2016, 20:32; Ответить: webhelper777
Сообщение #10


Новичок
*

Группа: User
Сообщений: 20
Регистрация: 9.4.2016
Поблагодарили: 0 раз
Репутация:   0  


вариант без графики предпочтительнее
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как пройти модерацию в Яндекс Директ, тематика Майнеры криптовалюты
3 rownong27 997 Сегодня, 15:59
автор: RICHHost
Горячая тема (нет новых ответов) Как заработать новичку?
107 Emeralda 17750 Сегодня, 14:59
автор: Smspva
Горячая тема (нет новых ответов) Как заставить Google любить тебя?
Хочу роста трафа из Гугла : ))
73 Aslan88 16266 Сегодня, 14:48
автор: coremission
Горячая тема (нет новых ответов) Черный список обменников и как безопасно обменять валюту
139 Kurses 29635 Сегодня, 14:45
автор: jack
Открытая тема (нет новых ответов) Естественные ссылки в деталях. Что из себя представляют, как добывать
seoandme.ru - SEO-блог Анны Ященко
0 AnnaYa 253 Сегодня, 10:56
автор: AnnaYa


 



RSS Текстовая версия Сейчас: 12.12.2017, 16:14
Дизайн