Возможно ли нарисовать сложную рамку средствами css?
Доброго времени суток, уважаемые!
Сейчас на CSS уже чего только не пишут и возник вопрос: возможно ли нарисовать сложную рамку, чтобы она была ещё и кроссбраузерной (IE9 до сих пор жЫв ведь)?
Вроде вот такой
Тень понятно, но вот градиентные бордюры, стыки в уголках, блик и прочее.
MaxKorz: в принципе, конечно. Но если это элемент дизайна, заадаптивить подобную картинку будет сложно, имхо. При растягивании она вся перекосится до полного непотребства.
Ярослав Иванов: извините, но я просто ориентируюсь на запросы работадателей. Пока везде практически пишут "требуется верстка под IE9+". Оно может и бессмысленно, но, имхо, пока ты будешь этого заказчика убеждать, что 9-й мертв, придет другой верстальщик и ты останешься без работы.
Ярослав Иванов: Неверно ориентироваться на ваши проценты, поскольку огромное количество старых версий IE может использоваться внутри корпорации, без доступа к инету, следовательно их процент просто не виден. А заказы от таких клиентов существуют.
Saboteur: Таким корпорация все равно на внутренние браузеры. Я работал в компании, где в 2013 сделали новый сайт, с svg, крутыми скриптами и прочие фишки. Внутри самой компании люди были на IE6-7-8 (90%) И руководству было все равно какие машины внутри. Сайт не для них а для клиентов компании.
Ярослав Иванов: А я работал в двух компаниях, где автоматически ставится IE9, нет возможности установить ЧТО-ЛИБО из любого стороннего софта, количество людей в компаниях свыше десяти тысяч. Корпоративный сайт asp с кучей внутренних сервисов.
Поэтому и рекомендую, что ориентироваться нужно не на проценты из инета, а на требования заказчика.
И его тоже ). Просто даже если где-то получили свободу и добро на написание сервиса с новыми технологиями, всю остальную контору из-за этого перевести на 11 IE никто не будет.
Поэтому поддержка корпоративного браузера обязательна для всех.
Можно, но не нужно. Тут картинкой будет нормально.
Верстка без картинок - это хорошо. Но и выдумывать лишний геморрой на голову не надо.
Разве что тень через CSS для блока, хотя я бы и тень сделал картинкой.
Это понятно, лишний геморрой никто не любит. =) Просто... ну вот предположим, что эта картинка служит фоном для какого-нибудь блока. Начинаем верстать адаптивность и... выходит, что либо блок должен быть фиксированного размера (поскольку иначе картинка совсем уж похабно извивается), либо вообще её приходится отключать, заменив простым фоном. Оно как бы и не то чтобы ужасно, но все же неприятно.
Вот я и спросил "а возможно ли?", поскольку сам, как максимум, могу сверстать геометрическую фигуру. Несложную. Без картинки в бэкграунде. И без градиента. Зато с текстом. =)
kotey: Если прям критично адаптивность - нарезаешь на мелкие картинки и делашь. А если эту фигуру сделать на CSS, с адаптивнсотью будет еще больше гемора.
Спасибо, я понял.
А вообще... в принципе... если плюнуть на градиент и считерить, вставив одну картинку (вот этот белый блик), получается не так уж и похабно. О_о https://jsfiddle.net/KatSSS/dms4j0th/
Хотя, конечно, способом "градиент, блики, и чтобы работало" это не является. =( Чистое шаманство, которое можно предъявить не шипко требовательному заказчику, бия себя в грудь: "это именно то, что надо, даёт +100 к репутации и карме, а так же подманивает поисковики".
з.ы. Вот только как присобачить веревочку я так и не придумал =( Разве что ещё одну картинку через псевдокласс.
Простой
