Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 55
Первый пункт действительно стал откровением, спасибо! Убежал чистить свои таблицы от дубликатов цвета в color и border-color.
полезно, спасибо
Не знаю шрифтов, которые бы имели наклонную гарнитуру, но я могу ошибаться. (Ошибается. Сам привести конкретных названий шрифтов не могу (они однозначно существуют), но в комментариях к оригинальной статье в пример приводят шрифт Helvetica, который имеет наклонную гарнитуру. — прим. переводчика) Насколько я понял, шрифт не может иметь обе гарнитуры: италик и наклонную — одновременно, поскольку наклонная гарнитура является искусственной заменой италика в тех шрифтах, в которых его нет. (Здесь тоже несколько сомнительно, особенно что касается замены италика, — прим. переводчика)
Хотелось бы примеров шрифтов с наклонной гарнитурой. В чем суть-то ее? Если смысл курсива понятен, то зачем наклонную гарнитуру включать, когда она прекрасно программно получается, непонятно. Или это просто костыльная замена нативного курсива от ленивых дизайнеров шрифтов?
Я верно понимаю, что в вебе не добиться разного отображения italic и oblique? В редакторе, например, увидеть ее просто (в том же фотошопе, та же Georgia отлично демонстрирует). Пробовал, как шрифты имеющие курсивную гарнитуру, так и без нее: в обоих случаях и italic, и oblique дают одинаковый результат (в отсутствии курсива под italic выдается наклоненный шрифт, при наличии курсива в oblique также он отдается).
Представьте, что вы в Фотошопе делаете трансформацию
Чтобы быстрее вам ответить, прямо из Википедии скопировал:
skew в правую сторону: грубо говоря это и есть облик. А у италика начертание букв даже отличается, появляются скругления, например.Чтобы быстрее вам ответить, прямо из Википедии скопировал:
Одинаковое отображение Georgia в примере объясняется тем, что у этого шрифта нет наклонной гарнитуры, только италик.
В посте сказано, что курсив и наклонная гарнитура в одном шрифте одновременно быть не могут. Собственно, предполагаю, что то, что называют наклонной гарнитурой, включенной в состав шрифта, на самом деле костыль от разработчиков шрифта. Они просто наклонили шрифт и сказали, что это курсив.
Вот только при наличии курсива фотошоп может сделать наклонный шрифт, игнорируя наличие курсива, а браузер отказывается. Хотя техническую возможность наклонить шрифт он имеет.
Вот только при наличии курсива фотошоп может сделать наклонный шрифт, игнорируя наличие курсива, а браузер отказывается. Хотя техническую возможность наклонить шрифт он имеет.
Ну, например Helvetica Neue имеет курсивную гарнитуру, хотя по сути она — наклонная.
Да, действительно, вы правы. Проверил на Times New Roman, Хром при
Да, действительно, вы правы. Проверил на Times New Roman, Хром при
font-style:oblique подставляет именно курсивную гарнитуру. Хех, интересно.A value of 'normal' selects a font that is classified as 'normal' in the UA's font database, while 'oblique' selects a font that is labeled 'oblique'. A value of 'italic' selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'.
The font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font.
В спецификации ничего не сказано про невозможность существования одновременно курсивного и наклонного начертания. Отсюда делаю вывод, что, по-хорошему, речь не о костылях, а о реальной возможности существования именно наклонного начертания, а не использования его в качестве замены. Тогда почему бы ему не сосуществовать в мире и согласии с курсивом?
Спецификация описывает вполне логичное и предсказуемое поведение, хотя на деле видим совсем иное (проверил на всем имеющемся зоопарке браузеров). Предлагаю до появления обоснованного объяснения считать, что это одно из свойств, при обработке которого популярные браузеры не полностью соответствуют спецификации.
А вопрос про наклонное начертание интересен, и срочно требуется шрифтовик, который разъяснит.
Как мне кажется, в спецификации и не может быть такого сказано о начертаниях. Это ж разработчики шрифта определяют, какие гарнитуры внедрить в шрифт. Другое дело, как сами браузеры с ними работают…
Это и вправду очень интересная тема.
Это и вправду очень интересная тема.
Я не спец по шрифтам, не знаю, как там все хранится и делается, поэтому мои суждения могут оказаться в корне неверными, но все же, посудите сами. Если шрифт может хранить курсивное и наклонное начертание раздельно (а не наклонное под видом курсива), то как может обосновываться невозможность одновременного хранения обоих начертаний?
К тому же, сама спецификация создавалась не на пустом месте. Вряд ли авторы решили «мы разделим наклонный и курсивный, и нам плевать, что в имеющихся шрифтовых форматах такого разделения нет». Они четко говорят про a font that is labeled 'oblique' и a font that is labeled 'italic'.
Допускаю, что нормой является отсутствие наклонных начертаний в составе шрифта именно в силу простоты его программной генерации из нормального.
К тому же, сама спецификация создавалась не на пустом месте. Вряд ли авторы решили «мы разделим наклонный и курсивный, и нам плевать, что в имеющихся шрифтовых форматах такого разделения нет». Они четко говорят про a font that is labeled 'oblique' и a font that is labeled 'italic'.
Допускаю, что нормой является отсутствие наклонных начертаний в составе шрифта именно в силу простоты его программной генерации из нормального.
Я опытным путем проверил: программно шрифт наклоняется только в том случае, если у него отсутствует курсивное начертание, в противном случае oblique выдает курсив.
Э-э-э, а если шрифту без курсивного начертания поставить фонт-стайл: италик, то будет отображаться нормальное начертание?
Нет, точно так же текст будет программно наклонен.
Я, тогда, честно говоря, не понял разницу между oblique и italic. Если italic предпочитает курсивное начертание, а если его нет, выдаёт программно наклонённое, и при этом oblique делает то же самое, то в чём прикол тут вообще?
Я бы понял, если бы oblique всегда программно наклоняло шрифт, невзирая на присутствие курсивного начертания.
P. S. Извините за… медленную реакцию.
Я бы понял, если бы oblique всегда программно наклоняло шрифт, невзирая на присутствие курсивного начертания.
P. S. Извините за… медленную реакцию.
> Если смысл курсива понятен, то зачем наклонную гарнитуру включать, когда она прекрасно программно получается, непонятно
В том-то и дело, что не прекрасно.
www.marksimonson.com/notebook/view/FakevsTrueItalics
В том-то и дело, что не прекрасно.
www.marksimonson.com/notebook/view/FakevsTrueItalics
Я, видимо, недостаточно эстет, чтобы понять проблемы автора. Впрочем, и для него наши проблемы так же далеки, ведь мы обсуждаем разграничение наклонного и курсивного начертания, а он сетует на то, что простая деформация не делает нормальное начертание удовлетворительным курсивом. К тому же, я не уверен, что его реализация «simply slanted» полностью соответствует той, которая используется, например, в браузерах.
Жаль, что visibility: collapse не работает адекватно. В некоторых случаях неудобно использовать свойство display для переключения состояния элемента через JS, так как необходимо запоминать предыдущее состояние этого свойства. Не сказать чтобы проблема, есть 100501 способ решить эту задачу, но visibility кажется логичнее — оно как раз и служит, чтобы скрывать и показывать элементы, тогда как у display это скорее побочная функция, а основная — выбор типа элемента.
Такое чувство, что кто-то открыл для себя спецификацию.
С inherit интересный трюк, но раньше он не работал в ИЕ,.
С inherit интересный трюк, но раньше он не работал в ИЕ,.
Border-image — очень интересный инструмент, позволяющий легко делать адаптирующиеся к размерам контента боксы
Вот пример: take.ms/xApbc (возможно, не самый удачный, но достичь соответствия макету можно было достичь только либо использовав фоновое изображение, либо border-image) Код здесь: jsfiddle.net/8yQN7/
Вот пример: take.ms/xApbc (возможно, не самый удачный, но достичь соответствия макету можно было достичь только либо использовав фоновое изображение, либо border-image) Код здесь: jsfiddle.net/8yQN7/
Столкнулся недавно с аналогичной задачей, необходимо было создать рамку в стиле конверта (с диагональными наклонными линиями). К сожалению, у меня не получилось использовать border-image, поскольку (на мой взгляд) при его использовании невозможно аккуратно подгонять «стыки» изображений на углах. Если фиксированный размер бокса с рамкой — пожалуйста, но в этом случае есть и другие способы. Поэтому, лично я решил проблему очень тупо: сделал div с фоном в виде той самой диагональной картинки и паддингом на ширину рамки, а внутрь него сунул еще один div с непрозрачным фоном и все, без изысков, зато быстро.
А можно посмотреть картинку?
Прелесть border-image именно в том, что углы остаются в углах, всё, что между ними — растягивается/сужается таким образом, чтобы влезло целое число отрезков (это если round задать, есть и другие варианты).
Прелесть border-image именно в том, что углы остаются в углах, всё, что между ними — растягивается/сужается таким образом, чтобы влезло целое число отрезков (это если round задать, есть и другие варианты).
А вы присмотритесь к углам в примере который указан выше, сразу видно в чем проблема.
Там углы сделаны ровно так, как было в макете, в общем-то =) Серьезно, пришлите мне картинку, пожалуйста, мне интересно попробовать.
Ну вот выкинул все ненужное, картинку упростил (в оригинале были наклонные линии двух цветов), смысл понятен: как сделать, чтобы эта рамка была границей блока любого размера (блок может менять размер), при условии, что углы на рамке не должны искажаться и сами линии всегда строго параллельны и не искажаются тоже.
Если фон однородный и непрозрачный, то сделать можно. Правда без помощи background-image.
jsfiddle.net/8yQN7/5/ (почему-то какое-то смещение происходит, вот тут всё нормально отображалось, уже не стал разбираться). Действительно, не без недостатков.
Теоретически, если поэкспериментировать с углом наклона и шириной полосок можно добиться нормального отображения, при условии, что ширина и высота box'а с рамкой меняется не как приспичит, а строго по определенным шагам, но это уже костыли, использование которых удручает.
Просто надо учитывать, что повторяющийся кусок на border-image должен быть «вещью в себе» и стыковаться сам с собой как угодно, хотя я и понимаю, что в идеале это вообще должен быть 1 пиксель.
Именно поэтому я всегда говорю: хотя дизайнер и верстальщик это разные профессии, но при этом дизайнер обязан понимать особенности верстки, чтобы верстальщик потом не плакал кровавыми слезами пытаясь сверстать «красивости» макета.
Просто надо учитывать, что повторяющийся кусок на border-image должен быть «вещью в себе» и стыковаться сам с собой как угодно, хотя я и понимаю, что в идеале это вообще должен быть 1 пиксель.
Именно поэтому я всегда говорю: хотя дизайнер и верстальщик это разные профессии, но при этом дизайнер обязан понимать особенности верстки, чтобы верстальщик потом не плакал кровавыми слезами пытаясь сверстать «красивости» макета.
Ох, туда же можно всунуть гиф-анимацию.
Вертикальные проценты рассчитываются относительно ширины контейнера, а не его высотыТолько вчера открыл для себя единицы измерения vh и vw — соответственно проценты высоты и ширины родительского элемента (поддерживается в современных браузерах).
Эти единицы позволяют, например, сделать padding-top зависящим от высоты (vh), а не от ширины.
На основе этого свойства я даже сваял Vertical Grid CSS Framework, позволяющий «замостить» экран гридом не только по ширине, но и по высоте.
К сожалению, border-image — одна из новинок, пользующаяся недостаточной популярностью. Хотя, возможно, я не прав. Если у вас есть примеры использования border-image — добро пожаловать в комментарии!
Можно использоавть GIF'ку border-image.com
Забавная вещица, но на это больно смотреть, ИМХО.
где-то встречал что делали таким способом выделение как в фотошопе
Да, фотошоп мне это сразу и напомнило. Раньше тоже такое встречал на сайтах, но как правильно в самописных админках в составе модулей для обрезки изображений. Сейчас же обычно обходятся обычным прямоульником с ключевыми узлами и затемнением.
В целом для каких-нибудь крупных систем, что должны работать в браузере этот прием имеет место быть.
В целом для каких-нибудь крупных систем, что должны работать в браузере этот прием имеет место быть.
border-image не корректно работает с border-radius. По крайней мере мне не удалось скрестить эти два стиля.
Есть ли у вас «нерабочий» пример где-нибудь на Codepen или JSFiddle?
Уже нет, иначе бы сразу запостил. Если интересно, то могу восстановить по памяти
Сколько угодно: jsfiddle.net/8yQN7/11/
Однако это проблема легко решается подготовкой файла с изображением границы.
Однако это проблема легко решается подготовкой файла с изображением границы.
спасибо, полезная статья. про visibility collapse не знал. а border image использую давно )
Метод расчета вертикальных процентов удобно использовать когда дочерний элемент должен при ресайзе сохранять свои пропорции внутри резинового родителя.
jsfiddle.net/68Fvf/
jsfiddle.net/68Fvf/
Свойство border-width поддерживает ключевые значенияБыло бы славно иметь поддержку ключевого значения для «волосной линии», каковая была во флеше. Что-то вроде самой тонкой линии на данном устройстве.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
12 малоизвестных возможностей CSS