Комментарии 13
color: #BADA55;
Хороший цвет, да =)
+14
Вот ещё чуть более 180 штук таких цветов.
+2
В «Метод Double-Box» вместе/вместо
overflow: hidden;
можно добавить clip: rect(auto, auto, auto, auto);
, что «обрежет» нижнюю часть вмете с тенью (полезно, если например под треугольником будет еще какой-то блок с тенью), соответственно не забыть сменить position на absolute..triangle-with-shadow {
width: 100px;
height: 100px;
position: absolute;
/*overflow: hidden;*/
box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
clip: rect(auto, auto, auto, auto);
}
+8
C unicode есть еще один нюанс. Нельзя применить тень с inset, т.к. в text-shadow этого параметра просто нет, а внутренняя тень иногда нужна.
+2
Ну там как бы еще куча всяких нюансов:
- Это не настоящий элемент, то есть внутри него нельзя поместить текст (хотя решаемо экстра-разметкой, но это не будет на 100% надежно)
- ClearType-сглаживание в крупных кеглях смотрится так себе, так что и края этого треугольника будут не очень
- Может так случиться, что этого символа не окажется в шрифтовом файле пользователя
- …
+1
15 строк кода на то, чтобы показать один жалкий треугольник. Мда…
В последнее время мне всё чаще кажется, что веб-строительство явно развивается не в том направлении.
В последнее время мне всё чаще кажется, что веб-строительство явно развивается не в том направлении.
-1
Почему же жалкий? Вполне даже симпатичный. Для жалкого хватит и пять строк :)
0
Вёрстка без картинок — это бесплатное снижение нагрузки на сервер.
+2
Сервис UTF-графики потрясающий. Спасибо за это.
+3
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Треугольники с тенью на CSS