Помощник
|
Как сверстать только на html/css ?, Как сверстать меню шаблона используя только html/css |
Dikucher
|
Сообщение
#1
|
||
|
|
||
|
|||
MeTaTRoN |
10.4.2013, 15:36;
Ответить: MeTaTRoN
Сообщение
#2
|
|
.chat-bubble-arrow-border {border-color: #CCC transparent transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;bottom:-22px;left:30px;} .chat-bubble-arrow {border-color: #f7f5f5 transparent transparent;border-style: solid;border-width: 10px;height:0;width:0;position:absolute;bottom:-19px;left:30px;} <div class="chat-bubble-arrow-border"></div> <div class="chat-bubble-arrow"></div> Вот этот вот код позволяет сделать Вот такую стрелку (http://floomby.ru/s1/cacFXm) Думаю, если сделать какой нибудь костыль, то из этого можно получить, то что вам нужно. PS: Я копировал с сайта, поэтому часть CSS лишняя. Если пригодится, буду рад. Сообщение отредактировал MeTaTRoN - 10.4.2013, 15:36 -------------------- Реклама на аниме сайте Услуги программиста, тема на форуме |
|
|
tszyan |
10.4.2013, 15:36;
Ответить: tszyan
Сообщение
#3
|
|
Dikucher,
Что именно Вас пугает? Мы должны гадать, что Вы увидели в таком простом шаблоне? |
|
|
MeTaTRoN |
10.4.2013, 15:40;
Ответить: MeTaTRoN
Сообщение
#4
|
|
tszyan, скорее всего наклонные линии
-------------------- Реклама на аниме сайте Услуги программиста, тема на форуме |
|
|
medved112 |
10.4.2013, 15:41;
Ответить: medved112
Сообщение
#5
|
|
Если вы про наклонную, то вырезать прямоугольник, сделать фоном прозрачность, переделать в png.Это самый простой имхо вариант. Что еще тут может пугать я даже не знаю.
-------------------- |
|
|
tszyan |
10.4.2013, 15:43;
Ответить: tszyan
Сообщение
#6
|
|
Для новых браузеров наклон делается с помощью transform.
Если нужно кроссбраузерно, то как сказал medved112, делаем с помощью background-image. Надо только учесть что ширина у элементов разная. Для этого разбиваем фон на 2 части. 1-я - начало с шириною картинки больше чем максимальная ширина пункта, 2-я - конец - завершающий элемент Сообщение отредактировал tszyan - 10.4.2013, 15:45 |
|
|
andreykashops |
10.4.2013, 15:49;
Ответить: andreykashops
Сообщение
#7
|
|
Можно сделать так:
Вначале пункта span - первый срез Вконце пункта span - конечный срез Под фоном пускаем гардиент. -------------------- |
|
|
tszyan |
10.4.2013, 15:51;
Ответить: tszyan
Сообщение
#8
|
|
andreykashops,
лучше привязаться к li и a (2 бэкграунда, про которые писал выше) li + a + 2 span + градиент - чересчур К тому же span не позволит начать текст меню раньше его правой границы (без заморочек с позиционированием) - зачем такие сложности? Сообщение отредактировал tszyan - 10.4.2013, 15:54 |
|
|
andreykashops |
10.4.2013, 16:16;
Ответить: andreykashops
Сообщение
#9
|
|
tszyan, ну нужно смотреть по возможностям. Например в WP меню можно было бы сделать так, как сказал выше, а там пусть мастер смотрит. Я предожил один из вариантов.
Сейчас вот думал, можно пропробовать реализовать через background-size: 100%; Если выризать картинку гардиента, или может я ошибаюсь? -------------------- |
|
|
MAKAVE |
10.4.2013, 18:10;
Ответить: MAKAVE
Сообщение
#10
|
|
может быть человек хочет сделать резиновые пункты меню, это вероятно и пугает.
Можно конечно градиентом, как то сыграть, но стоит подумать о кросбраузерности. Самый простой вариант добавить, вспомогательный тэг, к примеру b или span внутрь тэга <a> <ul id="navigation"> <li><a href="#"><b>Стиль</b></a><li> <li><a href="#"><b>Динамика</b></a><li> <li><a href="#"><b>Комфорт</b></a><li> <li><a href="#"><b>Безопастность</b></a><li> <li><a href="#"><b>Цвета</b></a><li> </ul> Разрезать background (разумеется сохранить его в png формате, что бы сохранить прозрачность и качество), на две части: левую и правую вырезал быстро для примера: и правая часть Ну а дальше манипулировать с каскадными стилями: #navigation li a b { background: url('images/left.png') left; height: 115px; margin-right: 26px; padding-left: 20px; cursor:pointer; color: #fff; display:block; font-weight: normal; } #navigation li a { background: url('images/right.png') no-repeat right; height: 115px; margin-right: 26px; text-decoration: none; display:block; } Разумеется это не панацея, и не готовое решение, придется подгонять под себя, но как вариант, я бы попробовал сначала так. ps: можно с тремя частями вырезать градиент, в 1px в background-repeat прописать repeat-x и задать бэкграунд тэгу <a> вырезать правую, левую часть и что типа так: <li><a href="#"><span class="left"><span class="right">Цвета</span></span></a><li> но это уже мазохизм чистой воды Сообщение отредактировал MAKAVE - 10.4.2013, 18:11 -------------------- ★ Качественные сайты без доменов: → подробнее |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Арбитражники, как ведете учет расходов и доходов? | 12 | Boymaster | 1923 | Вчера, 21:03 автор: MisterBit |
|
Dao.AD: пуши, попсы и не только! ТОП монетизация и арбитраж. | Акция 100 % отчисления! | 90 | Daopush | 27258 | Вчера, 18:27 автор: Daopush |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 29 | freeax | 4817 | 17.4.2024, 1:19 автор: sergio11 |
|
Как вы отдыхаете от работы за компом | 148 | adw-kupon.ru | 19713 | 8.4.2024, 10:37 автор: Skyworker |
|
Как вы бросили работу и перешли на заработок с сайтов? | 18 | uahomka | 3109 | 5.4.2024, 5:53 автор: Skyworker |
Текстовая версия | Сейчас: 20.4.2024, 7:08 |