Не стандартный подход к верстке хлебных крошек

@Ucorp · Регистрация: 25.08.2012

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

Есть какие-нибудь соображения как сверстать без использования изображений?
P.S. Иконка домика не в счет.

@sMockingbird · 09.09.2013, 16:54

как вариант, с использование css можно получить треугольники эти (правда они будут не совсем такой формы).

а почему с изображениями не устраивает, если не секрет?

@Ucorp · 09.09.2013, 18:23 **[ТС]**

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

Есть какие-нибудь соображения как сверстать без использования изображений?
P.S. Иконка домика не в счет.

Изображения выглядят размыто на мобильных устройствах при зумировании. Да и на экранах с высоким разрешением та же беда. Сделал на svg, webkit выпендривается. Попробовал трансформом сделать треугольники, тоже не очень. Может есть еще какой-нибудь вариант?

@Lovrentiy · 10.09.2013, 08:17

дак ты текст или сам треугольник пробуешь, когда размыто?

@Ucorp · 10.09.2013, 11:25 **[ТС]**

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

дак ты текст или сам треугольник пробуешь, когда размыто?

Треугольник конечно, текст не может быть размытым.

@sMockingbird · 10.09.2013, 11:33

поставьте картинку обалденного качества и всё гуд будет)

а вообще, при масштабировании в любом случае же качество будет теряться, если не вектор)

+Вы можете в случае, когда пользователь заходит с мобильного устройства, менять картинку к примеру, т.е. для PC оставить так как есть, если у Вас сейчас норм всё.
Ну как то так, я могу ошибаться)

@and_y87 · 10.09.2013, 16:15

Обычно используют CSS3 свойство :before и :after делая через content & border...
но картинка домика должна быть обязательно...

Создаёшь крохи...

HTML5
1
2
3
4
5
<ul id="crumbs">
  <li class="home"></li>
  <li>Объявления</li>
  <li>Транспорт</li>
</ul>

а CSS такой:

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
#crumbs, #crumbs LI {
  list-style: none;
}
#crumbs LI {
  margin: 10px;
  display: inline-block;
  background: #009;
}
#crumbs LI A {
  color: #FFF;
  text-decoration: none;
}
/* Вот важное место - генерация треугольников */
#crumbs LI A:before {
  margin-left: 2px; /* ширина зазора */
  border : 0 solid #fff; /* цвет зазора */
}
#crumbs LI A:after {
  border : 0 solid #009; /* цвет фона */
}
#crumbs LI A:before,
#crumbs LI A:after {
  content : '';
  float: left;
  border-left: 10px;
  display: inline-block;
}

Это логика...
может где ошибся т.к. писал код прям тут в textarea

@Taatshi · 10.09.2013, 17:08

http://cssarrowplease.com/ - генератор CSS кода декоративной стрелки у блока.

@newJS · 10.09.2013, 21:46

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

Может есть еще какой-нибудь вариант?

такие устроят

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

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
36
37
38
39
40
41
42
43
44
body {background:window;}
.tabCentr {text-align:center;}
 
 
#tabs1 div {border-style:solid; border-color:transparent;}
#tabs1 .arr1, #tabs1 .arr3 {border-width:0 15px 15px 0;}
#tabs1 .arr2, #tabs1 .arr4 {border-width:15px 15px 0 0;}
#tabs1 .arr1 {border-bottom-color:honeydew;}
#tabs1 .arr2 {border-top-color:honeydew;}
#tabs1 .arr3 {margin:-30px 4px 0 0; border-bottom-color:blue;}
#tabs1 .arr4 {margin:0 3px 0 0; border-top-color:blue;}
#tabs1 .arr5 {border:15px solid blue; border-radius:0 10px 10px 0;}
 
#tabs1 {list-style:none; margin:0; padding:0; display:inline-block;}
#tabs1 li {white-space:nowrap;}
#tabs1 li {margin:0 0 0 -15px; padding:0; display:inline; float:right;}
 
#tabs1 b {display:block; padding:0 25px; font-weight:normal;}
#tabs1 img {margin:5px 0 0 -20px; border:0;}
#tabs1 a {display:block; text-decoration:none; color:honeydew;}
#tabs1 a {margin:-30px 0 0 0; height:30px; line-height:30px;}
#tabs1 a {font-size:17px;}
 
/* ---- */
 
#tabs2 {font-size:0;}
#tabs2 div, #tabs2 p {border-style:solid;}
#tabs2 div, #tabs2 p {border-width:15px 0px 15px 15px;}
#tabs2 div {border-color:honeydew transparent}
#tabs2 p {border-color:blue transparent}
#tabs2 p {margin:-30px 0 0 4px; padding:0;}
#tabs2 .arr2, #tabs2 .arr3 {margin:0 0 0 -15px;}
#tabs2 .arr1 p {border-width:15px; border-color:blue; margin-left:0;}
 
#tabs2 {list-style:none; margin:0; padding:0; display:inline-block;}
#tabs2 li {white-space:nowrap;}
#tabs2 li {padding:0; display:inline-block;}
 
#tabs2 b {display:block; padding:0 25px; font-weight:normal;}
#tabs2 .arr1 b {padding:0 20px;}
#tabs2 img {margin:0 0 0 -10px; padding:0 0 5px 0; border:0; vertical-align:middle;}
#tabs2 a {display:block; text-decoration:none; color:honeydew;}
#tabs2 a {margin:-30px 0 0 0; height:30px; line-height:30px;}
#tabs2 a {font-size:17px;}

HTML5
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
<br><br><br>
<div class="tabCentr">
<ul id="tabs1">
<li><div class="arr5"></div>
<b><a href="#w1">Транспорт</a></b></li>
<li>
<div class="arr1"></div>
<div class="arr2"></div>
<div class="arr3"></div>
<div class="arr4"></div>
<b><a href="#w1">Объявления</a></b></li>
<li>
<div class="arr1"></div>
<div class="arr2"></div>
<div class="arr3"></div>
<div class="arr4"></div>
<b><a href="#w1"><img src="pics/ie48.gif" alt="" width="16" height="16"></a></b></li>
</ul></div>
<br>
<div class="tabCentr">
<ul id="tabs2">
<li class="arr1">
<div></div><p></p>
<b><a href="#w1"><img src="pics/ie48.gif" alt="" width="16" height="16"></a></b></li>
<li class="arr2"><div></div><p></p><b><a href="#w1">Объявления</a></b></li>
<li class="arr3"><div></div><p></p><b><a href="#w1">Тлансполт</a></b></li>
</ul>
 
</div>
 
 
 
<a name="w1"></a>

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Ucorp 0 / 0 / 0 Регистрация: 25.08.2012 Сообщений: 56

	Не стандартный подход к верстке хлебных крошек 09.09.2013, 16:21. Показов 1961. Ответов 8 Метки нет (Все метки) Есть какие-нибудь соображения как сверстать без использования изображений? P.S. Иконка домика не в счет. Изображения 0

@sMockingbird 284 / 283 / 73 Регистрация: 06.05.2013 Сообщений: 1,613
	09.09.2013, 16:54
	как вариант, с использование css можно получить треугольники эти (правда они будут не совсем такой формы). а почему с изображениями не устраивает, если не секрет? 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	10.09.2013, 08:17
	дак ты текст или сам треугольник пробуешь, когда размыто? 0

@sMockingbird 284 / 283 / 73 Регистрация: 06.05.2013 Сообщений: 1,613
	10.09.2013, 11:33
	поставьте картинку обалденного качества и всё гуд будет) а вообще, при масштабировании в любом случае же качество будет теряться, если не вектор) +Вы можете в случае, когда пользователь заходит с мобильного устройства, менять картинку к примеру, т.е. для PC оставить так как есть, если у Вас сейчас норм всё. Ну как то так, я могу ошибаться) 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	10.09.2013, 17:08
	http://cssarrowplease.com/ - генератор CSS кода декоративной стрелки у блока. 0