Фон под текст css
Фон под текст cssГрадиент для текста
=== Скачать файл ===
Одно из модных направлений веб-дизайна последних лет — оформление заголовков контрастным фоном. Простая, на первый взгляд, задача решается не так уж и просто: Ближе всех к решению задачи когда-то подошёл akella , добавив border у родительского элемента. Решения остальных ребят, которые присылались мне в твиттер , грешили одной и той же проблемой: В простейшем случае, когда нужно добавить небольшой отступ, решение оказалось до боли простым. Его особенность заключается в том, что во всех браузерах по крайней мере в тех, в которых я проверял: Safari 4, Firefox 3. Соответственно, эта строчка кода полностью решает нашу проблему:. Не обошлось без ложки дёгтя: Во-первых, он иногда рисует контур с небольшим отступом от границ текста, а во-вторых — прочерчивает его между строками, перекрывая текст:. Первая проблема решается довольно просто: Итоговое решение выглядит так:. Оно не работает в IE6—7, в них не поддерживается свойство outline. Но, так как это исключительно декоративная задача, можно объединить её с решением от akella и получить почти идеальное решение. Немножко доработать напильником — и получится вполне приличное решение обновил пример. Лично меня такой способ полностью не устраивает, так как есть ограничения на высоту строки при больших значениях появляются проблемы между строками и толщину контура слишком толстый контур выглядит очень некрасиво. Предлагаю читателям подумать вместе со мной над более гибким решением, а также — совсем крутота — как такое же провернуть с фоном-картинкой. Тот же читатель Roman предложил ещё один способ решения задачи. Он основан на смещении трех слоёв относительно друг друга: Его можно немного упростить, убрав один слой и добавив левый border у контейнера. Способ более гибкий, чем с outline который, как выяснилось, не очень дружит с Opera. На основе него я хотел сделать решение с фоновой картинкой, но столкнулся проблемой: Можно задать любой текст и любую ширину контейнера, всё будет как надо. А бока можно ещё больше подтянуть. Первое что пришло в голову — добавить неразывный пробел после hello и перед everyone. Но это очень кривой костыль. Андрей, ну вообще да, у нее есть еще веселые баги с не-обновлением картинки на экране при изменениях в DOM, например когда от выезжающего меню куски нестертые остаются. Сколько сил убито на его лечение, ужас. Но с точки зрения пользователя, а не верстальщика — она мне очень даже нравится. Есть довольно тяжеловесное универсальное решение, но оно слишком тяяяяжелое! Там 1 и тот же текст повторяется 3 раза, в 2х случаях он спрятан и спозиционирован под основным блоком с отступами слева и справа. Но там можно подкладывать любой фон, менять расстояния между строками и работает везде. Но опять таки слишком много элементов и повторение текста плохо сказывается на seo. Если кто подскажет универсальное решение, с 1 блоком то ему огромное спасибо за это. Ещё outline покалечили в Opera 9. А как вам такое решение пока кроме IE ? Так фон можно фиксированным сделать, а для IE экспрешин. Такая полосатая заливка будет очень эффектно выглядеть с фиксированным фоном. Фон кстати можно вылечить простым background-attachment: Прокрутка текста с background-attachment: Наркотики не твоя тема ; зы: Для многих, лучшим решением будет ручное разбиение фразы на строки при помощи span-ов c padding-ом. Самый психически здоровый способ, при условии, что текст не часто меняется и т. В то время как мое решение воздействует на все браузеры, Вы действительно должны приспособить второстепенное положение, таким образом это измеряет должным образом. Решения — полностью CSS, базируемый, и используют редко используемый признак с абсолютным расположением. Это учитывает вершину или практический результат, чтобы быть любой шириной, не нарушая расположение. Вы можете рассмотреть мой демонстрационный пример здесь: When considering using semantic, clean code for purely presentation purposes, then my solution fits that need. Так вот, это дело начинает бажить в IE8, хотя в остальны все отлично. Почему — черт его знает. Для IE оптимально выдавать вариант с border слева. Проверил в IE, Opera , FF , Safari — работает. Начиная с FF 3. Второе решение тоже не идеальное: Так или иначе варианты выглядят вполне не плохо. Сейчас бьюсь с проблемой: А как быть, если фон полупрозрачный? Если в примере поменять красный на скажем rgba 1,0,0,0. Сергей Чикуёнок веб-разработчик Search for: Тем, что это не работает. Чем мне не нравится outline — в той же Опере он тормозит прокрутку страниц. По мне дак лучше заголовки вообще с прозрачным фоном делать. Так приятнее и удобнее. Жаль, я не говорю на русском языке, но вот — мой грубый перевод: Эта статья заинтриговала меня, чтобы создать более чистое решение. Кроме того, высота заголовка включена, так типографский поток последователен. Bryan, there are two problems with your solution: Very true, my solution was mainly to demonstrate that it can look uniform across all browsers. Currently, without using some one-off javascript, there is no perfect solution to this issue. Если размер шрифта, то нижняя строка наезжает на верхнюю.
Специальные гинекологические методы исследования
Выпускные платья курск каталог
Как определить географические координаты объекта по адресу
Никольский храм солнечногорск расписание богослужений
Сколько км от челябинска до тобольска