Прощай -9999px новая техника замены изображений через CSS


Содержание

Плавная смена изображения

08.04.2020, 23:46

Плавная смена изображений
Тема уже давно заезжена, но у меня немного другая проблема, ответ на которую я не нашла. На.

Плавная смена картинки
Фотографии плавно сменяют друг друга. Как это делается, какими средствами?

Плавная смена картинок в ячейке
Дорогие форумчане! Пытаюсь сделать плавную смену одной картинки другой. Использую JQuery. Всё.

Плавная смена при :hover
Доброго времени суток Форумчане! Подскажите пожалуйста, у меня есть например блок div#main <. >.

09.04.2020, 05:29 2

не совсем понимаю как вы таким хитрым способом пытались спозиционировать 4 картинки в одно место?

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

09.04.2020, 05:29

Плавная смена фона дива
Приветствую. Надо мне в шапке сайта тупо менять картинки — штук 8 по кругу. Использовать плагины и.

Плавная смена цвета фона на CSS3
Всем привет! Кто подскажет как сделать плавную смену градиентного цвета фона на сайте. Вот.

Плавная смена картинок при нажатии на ссылки
Доброго времени суток. Перед тем, как создавать тему, внимательно ознакомился с другими похожими.

Лучший метод замены изображений

Какая лучшая (как в кросс-браузере) техника для замены изображений в CSS? Я использую sprites, чтобы сделать свою навигацию, но я хочу, чтобы разметка оставалась дружественной к SEO. Учитывая следующую структуру HTML.

Каков наилучший способ заменить текст фоновым изображением, используя только CSS?

В настоящее время я использую это.

Но он не работает с CSS, а изображения отключены.

Тогда изображение будет иметь ширину 300 пикселей, а каждая вкладка будет шириной 100 пикселей.

В 2008 году в презентации Google на мероприятии Apart было ясно, что замена действительной не будет наказываться Google. См. сообщение Mezzoblue об этом

В принципе, до тех пор, пока изображение, которое вы заменяете текстом, имеет тот же текст в нем, он считается действительным и не пытается обмануть поисковые системы. Как они определяют, является ли изображение действительным или нет? Я понятия не имею. OCR? Обзор вручную?

Что касается CSS on/images off, то нет идеального решения, все они требуют дополнительной не-семантической разметки. См. Ссылку css-tricks, которая выкладывается на разных методах. Я лично не беспокоюсь о очень небольшом проценте пользователей, просматривающих CSS, но без изображений.

Ваш выбор прост. Дополнительная надбавка, или не заботятся о включении css/images.

Я просто придумал это, похоже, работает во всех современных браузерах, я только что тестировал его (IE8/совместимость, Chrome, Safari, Moz)

  • image alt text — лучшая практика для доступности /seo
  • нет дополнительной разметки HTML, а css также очень минимален.
  • обходит проблему css on/images off, где методы «text-indent» все еще скрывают текст для пользователей с низкой пропускной способностью.

Самый большой недостаток, который я могу придумать, — это css off/images on situation, потому что вы будете отправлять только прозрачный gif.

Возможно, будет возможно написать небольшой javascript, чтобы помочь с этим, заменив все источники изображений своими свойствами css для фонового изображения. Но это будет работать только в том случае, если браузеры все еще привязывают свойства css к элементам, а затем игнорируют их. Я не знаю, так ли это или нет, мне придется проверить это. Вы также хотели бы разработать тест на основе javascript, чтобы узнать, применяется ли css на странице (возможно, проверьте положение некоторого тестового элемента).

btw, я хотел бы знать, кто использует образы без таблиц стилей? какой-то мобильный телефон или что-то в этом роде?

Основываясь на комментарии ниже. встроенные стили hrm. возможно, мне нужно просто создать вспомогательную функцию php, например , чтобы создать такой код:

то просто прикрепите CSS в таблице стилей

это более старый метод, который я использую, но не уверен, где я его нашел. Он работает с CSS на /images off, CSS off/images on, CSS on/images on.

Если пользователь с отключенными/обратными CSS-окнами, они будут видеть удвоенный текст. Если паук поисковой системы посещает, они будут видеть текст и обычный текст, интеллектуальный паук может легко идентифицировать это, что это такое, метод невинных заметок изображения.

Итак, этот метод хуже для чтения с экрана, так как читается текст, но эти пользователи должны иметь возможность перейти к следующему абзацу, поэтому я застрял

вокруг «моего текста».

Все остальные, у которых отключены CSS и изображения, — это какой-то бот, правда?

Прощай -9999px: новая техника замены изображений через CSS

В своей статье Плавная смена изображений JavaScript я рассказал, как можно на веб-странице плавно менять изображения img скриптом JavaScript. Достоинства у такого метода есть — легко изменять временные параметры показа-перехода, можно каждое изображение использовать как ссылку на свой ресурс. (Если вы хотите использовать CSS спрайты или плавно менять фоновые изображения background смотрите статьи CSS3 Плавная смена фона а также CSS3 Как сменить фон при наведении мыши.)

Но есть очень серьезные недостатки: при потере окном браузера фокуса обработчик onBlur срабатывает не всегда и изображения накладываются друг на друга, что придает веб-странице неряшливый, непрофессиональный вид; на каждую страницу и для каждой группы изображений надо вставлять свой JavaScript код и при этем следить, чтобы имена переменных не повторялись. А если учесть, что некоторые визуальные редакторы скрипты JavaScript просто вырезают, то становится понятно, что для создания «живых» элементов веб-страниц лучше использовать другие инструменты.

Этих недостатков лишен способ получения плавной смены изображений анимациями CSS3. Анимации CSS3 позволяют делать чуть ли не фильмы, но об этом позже. А сейчас плавная смена изображений с использованием HTML тега . Сразу замечу, что похожего алгоритма я в интернете не нашел. Задача ставилась так: плавная смена изображений должна работать так же, как на JavaScript, не требуя наведения курсора мыши. Вот что у меня получилось

Разберемся, как плавно менять изображения используя CSS3.

В HTML в строке 10 подключаем файл с нашими стилями CSS и в блок div помещаем изображения

HTML

Алгоритм работы смены изображений прост — для каждого изображения создаем свою анимацию и задаем временные интервалы прозрачность-переход-непрозрачность.

Теперь к делу. Сначала нам понадобится лист бумаги в клеточку, цветные фломастеры, линейка и калькулятор. На листе бумаги нарисуем диаграммы временных интервалов показов наших картинок

На диаграмме значение Y=1 соответствует непрозрачности изображения — показу, а Y=0 полной прозрачности. Диаграмма каждого изображения отображена своим цветом. Все изображения будут отображаться по 4 секунды, а длительность перехода 2 секунды. Общее время выполнения всего цикла можно будет в дальнейшем менять, отношение показ/переход нет. Рисуем слева направо и сверху вниз.

1-е изображение 0-4 показ, 4-6 вниз, далее прозрачность. Эту диаграмму закончим когда нарисуем 4-ю

2-е изображение 0-4 прозрачность, 4-6 вверх, 6-10 показ, 10-12 вниз, прозрачность до конца

3-е изображение 0-10 прозрачность, 10-12 вверх, 12-16 показ, 16-18 вниз, прозрачность до конца

4-е изображение 0-16 прозрачность, 16-18 вверх, 18-22 показ, 22-24 вниз

Поскольку 4-е изображение является последним полный цикл получился 24 секунды и в интервале 22-24 секунды диаграмма 1-го изображения должна уйти вверх.

Посчитаем процентное значение времени каждой переходной точки:

4-я секунда 4/24*100=16%

6-я секунда 6/24*100=25%

10-я секунда 10/24*100=41%

12-я секунда 12/24*100=50%

и так же для всех остальных. Осталось написать CSS-стили

CSS3

Сначала настроим ключевые кадры — @keyframes — согласно построенным диаграммам — строки 1-37. Значения opacity на интервалах должны соответствовать значениям линий на диаграммах. Разберем на примере @keyframes fadeIm-1:

от 16% до 25% opacity меняется от 1 до 0;

от 25% до 91% opacity: 0;

от 91% до конца (и начала следующего цикла) opacity поднимается от 0 до 1.

В стиль общий для всех рисунков добавляем параметры анимаций — в строке 52 устанавливаем время выполнения анимаций — там вовсе не обязательно должно быть 24, в строке 53 указываем, что анимации повторяются в непрерывном цикле. В стиль каждого рисунка добавляем свои анимации — строки 63-81. Для того, чтобы это работало с браузерами на движке webkit необходимо продублировать каждую анимацию с префиксом -webkit-, как показано ниже, и добавить их в стили. Обратите внимание на два дефиса.

Достоинства такого подхода очевидны — один раз написать анимации и потом использовать их где надо как обычные CSS-стили. Эти же настройки я использовал для плавной смены фоновых изображений — статья CSS3 Плавная смена фона. Можно создать несколько блоков — для разного количества картинок и для удобства поместить их в отдельный файлы. Такое решение полностью свободно от недостатков, присущих реализации плавной смены картинок с помощью JavaScript. Более того, плавная смена картинок продолжается при потере окном браузера фокуса.

Алгоритм прост и понятен, не надо быть программистом чтобы разобраться, как это работает. И на его реализацию требуется совсем немного времени. Чтобы заменить плавную смену картинок в шапке сайта с JavaScript на CSS3, начиная с построения диаграмм и заканчивая проверкой в пяти браузерах, мне потребовалось всего 40 минут! Ниже рабочие диаграммы.

Параметры смены изображений такие: изображений — 10, непрозрачность — 4с., переход — 3с. Полное время цикла — 70с.

Все возникшие вопросы Вы можете задать в комментариях или в форме «Обратная связь», расположенной в правой колонке под главным меню.

code is art

Использование CSS подмены текста изображением и SEO. Какие могут быть последствия?

Подмена текста на сайте изображением — распространенная техника среди верстальщиков. С помощью CSS вы можете спрятать текст вне поля видимости страницы на мониторе, а на его месте расположить какую-либо картинку.

Для чего это нужно и как отнесутся к этому поисковые системы?

Давайте приведем пример. Допустим, у нас на сайте имеется логотип в виде картинки. Следующий код реализует это:

Давайте применим технику CSS-подмены. Создадим CSS-класс logo :

Остается немного изменить наш код логотипа:

Визуально вы не найдете разницы. И в первом и во втором случае вы увидите изображение логотипа, и никакого текста.

Но давайте взглянем на это со стороны SEO. Известно, что для выделение наиболее важных ключевых слов на сайте (как правило, по которым происходит продвижение) их помещают в теги заголовков

и логического выделения, в основном , .

Во втором случае, когда применяется CSS-подмена текста изображением, сам текст присутствует в теге

. И поисковая система, когда будет разбирать структуру сайта, выделит этот текст, как более приоритетный на странице и придаст ему дополнительный вес.

Рождается вопрос, а не противоречит ли это правилам поисковых систем. То есть фактически, мы предоставляем пользователю и поисковой системе различающуюся информацию.

За и против

Итак, давайте поглубже вникнем в суть этого метода с точки зрения SEO. Почему оптимизаторы начинают использовать эту технику?

Никто не мешает заменять изображениями большие блоки текста, насыщенные ключевыми словами. Ведь пользователю эти блоки не будут видны, а поисковая система «проглотит» их и будет использовать в ранжировании. Этим SEO-специалисты и пользуются.

Но может ли данная техника повлечь бан всего сайта или наложения какого-либо фильтра?

По словам Google?

Мэтт Катс, глава отдела по борьбе с поисковым спамом в Google, однажды сказал:

Использование CSS-подмены текста изображение является допустимой техникой. И Google не будет штрафовать сайт за ее использование, при условии, что соблюдены правила: текст на картинке должен полностью соответствовать заменяемому тексту. Например, если ваша компания называется «Expo Markers», что и изображено на логотипе, и скрытый текст тоже «Expo Markers», то вы можете не беспокоиться. Никакого нарушения правил здесь нет. Но если скрытый текст: «Expo Markers cheap online discount buy online Expo Markers sale …», то есть повод для беспокойства, потому как Google может оштрафовать сайт, или что еще хуже — забанить.

Итак, стало ясно, что если CSS-подмена текста изображением применяется не для поискового спама, то причин для беспокойства нет.

Используете ли вы подобный метод подмены и были ли у вас проблемы с поисковиками по этому поводу?

Похожие темы

Подписаться на обновления блога

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Комментарии (9)

  1. Исаак Тынгылчав/ 17.12.2008 в 11:21

Плохой способ. Если картинка не загрузилась — не отображается подпись.

Есть три варианта нормального решения, которое снижает вероятность неадекватной реакции модераторов:

  1. Вставляется и текст и картинка. Картинка после загрузки сталкивает надпсиь вниз в область overflow:hidden;
  2. По онлоад анализируется подгрузка картинки. Если не подгрузилась — выводится надпись.
  3. Порка дизайнера палкой по голове, до тех пор пока он не поймет что делать заголовки картинкой на информационных сайтах нельзя. Этот способ самый лучший.
  • rotor/ 17.12.2008 в 17:49

    @Исаак Тынгылчав, да дело не совсем в примере, а в подходе к спам-оптимизации.

    По памяти можно вспомнить еще штук пять способов замены текста картинками и раза в два больше нагуглить. И у каждого из них будут свои недостатки.

    Я вообще рад, что такой подход еще не распространен среди зарабатывающих SEO-школьников-оптимизаторов Рунета. И так в топе постоянно висит один неадекват, и если в их арсенале появится еще и это, то совсем худо будет.

    Исаак Тынгылчав, какой смысл сталкивать в невидимую область текст, если можно его написать в атрибуте «alt»? Или думаете, что заголовок, в котором первым идет узел , а потом текстовый узел, будет обработан поисковой системой лучше, чем заголовок с , в котором текст записан только в атрибут «alt»? Я сомневаюсь в этом, хотелось бы услышать какие-то доказательства. К тому же, если изображения по каким то причинам уже есть в кэше браузера, но их отображение отключено, то некоторые браузеры получат их размер и отобразят страницу соответственно, поэтому в вашем способе придется записать текст, как в атрибут «alt», так и после узла , иначе мы тоже не увидим текста, и к чему такое дублирование, каким образом оно скажется на восприятии поисковыми системами?

    Я обычно использую в вёрстке метод с абсолютным позиционированием, чтобы оставить видимым текст в случае, если изображения отключены:

    Таким образом текст закрывается фоновым изображением тега . Недостаток: нельзя использовать прозрачные изображения.

    2octane
    >какой смысл сталкивать в невидимую область текст, если можно его написать в атрибуте «alt»
    На случай если капртинка не загрузится. Alt в данном случае не помогает — у него размер в FF

    10px. Явно не заголовочный.

    >а потом текстовый узел, будет обработан поисковой системой лучше, чем заголовок с , в котором текст записан только в атрибут «alt»?
    Никаких сомнений. Текст в заголовке намного важнее картинки. А если тема востребована при поиске картинок то учитывается и заголовок и alt. Посмотрите в яндексе любую статью по словам «факторы релевантности»

    >если изображения по каким то причинам уже есть в кэше браузера, но их отображение отключено
    Не знал. Точнее не проверял. Спасибо.

    >Я обычно использую в вёрстке метод
    А если картинка прозрачная?

    Исаак Тынгылчав: Никаких сомнений. Текст в заголовке намного важнее картинки.

    Я имел ввиду вариант:

    В заголовке первым делом идет изображение, может быть и с заполненным атрибутом «alt», что в этом случае делает поисковая машина, какой текст будет взят? Может быть она найдет в заголовке изображение с пустым атрибутом «alt» и на этом закончит анализ заголовка? Если есть текст в атрибуте «alt» и в самом заголовке, какому из-них будет отдано предпочтение или они будут анализироваться одинаково или в целом?

    Исаак Тынгылчав: Alt в данном случае не помогает — у него размер в FF

    В фаерфоксе и опере это можно поменять в CSS, вот в ИЕ действительно так, но он будет отображать рамку вокруг незагруженного изображения.

    Исаак Тынгылчав: А если картинка прозрачная?

    Из под нее будет видно текст

    В заголовке первым делом идет изображение, может быть и с заполненным атрибутом «alt», что в этом случае делает поисковая машина, какой текст будет взят?

    Будет обработан полностью весь

    . Ввиду того, что некоторые веб-мастера забывают заполнять атрибут alt тега , я считаю, больше даже уверен, что альтернативный текст изображения имеет меньший вес чем просто текст на странице. Ввиду того, что и изображение и текст располагаются в теге

    , то несомненно на мой взгляд поисковая машина отдаст приоритет тексту.

    В SEO у альтернативного текста, в принципе, другое предназначение, как правило, это поиск по картинкам.

    Может быть она найдет в заголовке изображение с пустым атрибутом «alt» и на этом закончит анализ заголовка? Если есть текст в атрибуте «alt» и в самом заголовке, какому из-них будет отдано предпочтение или они будут анализироваться одинаково или в целом?

    Вся страница анализируется полностью. Конечно у поисковика имеется ограничение на максимальный размер загружаемого HTML кода, но мы будем рассматривать нормальные случаи. Нелогично было бы ПМ в своих алгоритмах ранжирования использовать отрывочные данные из страницы. Для построения картины необходима полная информация.

    Конечно, ничего из мною сказанного нельзя утверждать однозначно, я так же за это не берусь. Знать ответы на эти вопросы могут только разработчики алгоритмов ранжирования. Я строю только предположения, основанные на опыте.

    Однозначно спам. Лучше пойти с обратной стороны, убрать для поисковика массивы разбавляющего текста от индексации, убрать их куски в жава-скрипит. Т.к. поисковики яву обрабатывают плохо или совсем не обрабатывают. Получается что поисковик видит только то что не закрыто скриптом. Для посетителя сайт как сайт, а для пс только Н1 и контентная статья с телефонами.

    Правильно ли я осведомлен о том, что Яндекс-картинки используют содержание alt для показа своих подборок ? Это не довод в пользу alt ? Но будет ли большой текст обработан Яндексом как следует ?

    я не понял для чего в примере надо было указывать >

    Изменение, создание, всплывающих подсказок title с помощью CSS

    Доброго времени суток. ��

    Тем кто хоть раз верстал и сталкивался с html известно что у ссылок есть параметр title, по умолчанию он выводит всплывающую подсказку. В этой статье я расскажу о том, как изменить внешний вид таких подсказок и настроить их на свой вкус и под ваш сайт. Такие подсказки помогут вам выделить ссылки. Сделать красивые подсказки к ссылкам, которые имеют, например, вид иконок. Самое главное, что сделать это можно используя обычный CSS, не применяя никаких скриптов. Вы просто внесете изменения в существующие подсказки. Пример того что у вас может получиться можете посмотреть ниже:

    Чтобы сделать так же, вам естественно изначально нужно ссылкам прописать атрибут title. Если вы это уже сделали давно, то остается добавить лишь стили.

    Данные стили сделают всплывающие подсказки такие как в первой ссылки. Но если вы захотите, чтобы у разных ссылок были разные стили, то можно добавить классы ссылкам или если они уже есть, просто прописать им стили.Например по примеру у второй ссылки класс — tw_link, а у третей th_link.

    Далее, просто, атрибуту title нужного класса добавляете уникальные стили. Например, у нас всем title уже заданы стили, они по умолчанию зеленого цвета. имеют размер и позиционирование с анимацией появления. Нашим новым двум классам просто добавим новые цвета.

    Теперь вторая ссылка оранжевая, а третья черная. Таким же образом, можно менять размеры каждой выноске и тд. Все зависит от вашей фантазии.

    На этом все, спасибо за внимание. ��

    Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

    Frontender Magazine

    В этой статье мы рассмотрим несколько приёмов, которые могут быть использованы для создания текстурного текста или добавления фона для текста.

    Пожалуйста учтите, что некоторые приёмы, описанные в статье, являются экспериментальными, и не всегда будут иметь хорошую кроссбраузерную совместимость. А следовательно, эти приёмы — не лучший выбор для реальных проектов, в которых кроссбраузерность является критичным аспектом.

    Для каждого примера я привёл иллюстрацию конечного результата и ссылку в конце описания каждого из них. Для просмотра примера также достаточно просто кликнуть по соответствующей иллюстрации.

    Применение фонового изображения для текста посредством использования свойства -webkit-background-clip: text

    Мы начнём с CSS-свойства background-clip , применение которого даёт следующий результат:

    Данное CSS-свойство background-clip определяет область закрашивания фона элемента, или область, внутри которой будет прорисовываться фон. По умолчанию, фон занимает всё пространство между границами элемента со значением border-box и может принимать другие значения, такие как padding-box и content-box .

    С помощью этого свойства могут быть реализованы различные эффекты, вроде установки прозрачных границ элемента, и оно довольно хорошо поддерживается во всех современных браузерах.

    Для Webkit в свойство background-clip добавлено четвёртое значение, text , которое обрезает фоновое изображение по тексту на переднем плане, с учётом декоративных элементов и теней. Если в придачу к обрезке фона для текста установить прозрачный цвет шрифта, используя Webkit-свойство -webkit-text-fill-color , сквозь текст будет просматриваться необходимое нам фоновое изображение.

    На момент написания статьи значение text свойства background-clip не было внесено ни в один стандарт, так что, к сожалению, оно работает только в браузерах на движке WebKit. Для других браузеров придётся использовать более простое запасное решение на основе CSS, или же полифил.

    Ниже мы создадим текст с фоном, используя свойство -webkit-background-clip и опишем фолбек на основе CSS, благодаря которому в браузерах на движках, отличных от WebKit, будет виден текст на фоне картинки.

    Для нашего примера (см. скриншот выше) мы будем использовать элемент с фоном и заголовок первого уровня внутри него. Нам необходимо обрезать фон так, чтобы казалось, будто бы он применён только для текста внутри элемента.

    Мы будем использовать полужирное начертание шрифта, чтобы сквозь текст лучше просматривался наш фон. Для элемента .clipped мы устанавливаем фоновое изображение, которое обрезается по контуру текста свойством background-clip со значением text . Далее, мы устанавливаем белый цвет для текста, так как браузеры не на движке WebKit будут отображать текст на фоне изображения, и нам необходимо выбрать такой цвет шрифта, который будет хорошо читаться на нашем фоне. Затем прописываем прозрачность в качестве цвета заливки текста, это правило отменит белый цвет текста в браузерах на WebKit так, что фоновое

    изображение будет видно сквозь наш текст.

    Если вы посмотрите пример не в WebKit-браузере, то увидите просто белый текст на фоне изображения.

    Для тех случаев, когда изображение играет важную роль в передаче визуального посыла, отображение фонового изображения под непрозрачным текстом — это наверное самое лучшее запасное решение для браузеров не на движке WebKit. Однако при желании можно также в качестве альтернативы отобразить обычный текст без фонового изображения. Дивья Маниан (Divya Manian) написала отличную статью с объяснением техники создания подобного фолбека с обычным текстом, а Рейчел Нэйборс даже создала специальный миксин под Sass на основе кода Дивьи, он доступен на Codepen.

    Так же как и фоновое изображение, для текста в качестве фона можно применить градиент. Так как градиенты в CSS приравниваются к изображению, в примере выше их можно прописать для элемента .clipped , в результате чего получим текст с градиентом в качестве фона. Ризе Сельчук Сайдам (Riza Selçuk Saydam) создал очень хороший интерактивный пошаговый пример на Codepen, который объясняет, как можно создать подобный текст с градиентом. Взгляните на него, если вам потребуется визуальное объяснение этого приёма.

    Применение текстуры для текста с помощью mask-image: url();

    Свойство для следующего приёма на CSS, который мы рассмотрим, также на данный момент поддерживается только браузерами на основе WebKit, и работает только с префиксом -webkit- . А вообще, вам может пригодится в дальнейшем эта таблица поддержки браузерами различных новых свойств.

    В этом примере мы будем использовать CSS-маски для создания красивого эффекта текстурного текста. На текущий момент CSS-маски уже вошли в черновик нового стандарта, над которым работает W3C. Так что у нас есть надежда, что в скором времени и другие браузеры будут поддерживать это свойство.

    Однако, пока мы создадим пример, который будет корректно работать только в браузерах на WebKit, и добавим простой фолбек для браузеров, построенных на другом движке. Для примера мы будем использовать CSS-свойство mask-image для применения к тексту эффекта брызг. В итоге у нас должен получиться следующий результат:

    При использовании CSS-масок мы заставляем текст принять форму изображения-маски, вместо альтернативного подхода, когда изображение принимает форму текста, как в случае с применением background-clip , описанным выше.

    Свойство mask-image принимает одно из трёх значений: изображение с альфа-прозрачностью, прозрачные участки которого будут участками, где контент не будет отображаться, CSS-градиент или просто none . Для нашего примера мы будем использовать изображение с альфа-прозрачностью, которое выглядит следующим образом:

    На нашем изображении виден ряд клякс, которые мы и применим к тексту для имитации эффекта пятен от акварели. В браузерах, которые не поддерживают данную технику, текст будет отображаться без этих пятен.

    Если применить эту маску к тексту или любому другому контенту, текст будет виден только на месте чёрных пятен. На прозрачных участках текст отображаться не будет. Просто представьте, что текст и маска — это слои, а теперь представьте, что мы помещаем изображение-маску над текстом и ластиком стираем части текста, которые не перекрываются этими чёрными пятнами, и в результате у нас получится текст с маской, как на скриншоте выше.

    Чтобы эффект был более реалистичным, я добавил для элемента, содержащего текст, некий акварельный фон, который будет просвечивать в местах, где текст «стёрт». Таким образом создаётся красивый переход от текста к фону. И для всей этой красоты используется только CSS. Неплохо, да? Очень жаль, что на данный момент поддержка этой техники среди остальных браузеров оставляет желать лучшего. Однако, чуть ниже мы поговорим о том, как можно сделать такой эффект более кроссбраузерным.

    Сейчас для нашего примера нам понадобится контейнер, в который обёрнуты два заголовка:

    Мы применим эффект брызг к элементу h1 . Вот необходимое стилевое оформление для этого эффекта:

    Вот и всё что нужно, чтобы достичь подобного эффекта. Теперь вы наверняка захотите добавить немного дополнительной стилизации, как это сделал я в примере, для достижения конечного эффекта, к которому вы стремитесь. Однако, CSS-свойство, приведённое выше, является самым важным элементом добавления текстуры для текста с использованием маски.

    Необходимо также отметить, что на тот момент, когда это свойство начнёт поддерживаться другими браузерами, вам возможно потребуется добавить ещё несколько префиксов, кроме -webkit- . На момент написания данной статьи для корректной работы приёма достаточно использовать префикс -webkit- , но если вы решите использовать его в своём проекте, помните о необходимости обновлять код после внесения изменений в спецификации и держите в уме изменения в поддержке новых свойств различными браузерами.

    Альтернативным вариантом для этого примера в не поддерживающих его браузерах будет являться обычный текст на изображении.

    Более подробно о CSS-масках можно почитать в спецификации W3C, кроме того взгляните на ещё один искусный пример текстурного текста в этой статье Трента Уолтона (Trent Walton).

    Создание текстурного текста с помощью SVG

    Оба предыдущих эффекта можно воссоздать, используя SVG, к тому же в обеих случаях результат, полученный с помощью SVG, будет кроссбраузерным. Следовательно, этот метод также можно использовать в качестве запасного решения для браузеров, которые не поддерживают новые CSS-свойства, описанные выше.

    Обрезка фона по контуру текста с использованием SVG

    В данном примере мы используем элемент и SVG для воссоздания эффекта от background-clip: text .

    Контур обрезки определяет профиль, или же область, для которой применяется фон. Части фона, выходящие за рамки определённого очертания, не будут отображаться, в отличии от тех, что находятся внутри него.

    Контур обрезки может принимать несколько значений, одно из них — элемент

    . Когда в качестве контура обрезки указан текстовый элемент, фон обрезается по очертаниям текста.

    После того как контур обрезки определён, к нему можно обратиться с помощью clip-path в качестве атрибута изображения, которое мы хотим обрезать или CSS-свойства этого изображения.

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

    Сначала мы создадим элемент SVG , содержащий весь наш SVG-код. Затем определим контур обрезки и применим его для элемента image через атрибут clip-path :

    Поскольку элемент SVG является, по сути, графическим элементом, не забудьте добавить заголовок, чтобы сделать его доступным для скринридеров.

    В коде выше мы создали элемент text , прописали для него размер шрифта и указали координаты по оси x и y, которые определяют, где внутри SVG будет отрисован текст. Затем мы разместили текстовый элемент внутри элемента clippath , которому был присвоен ID, чтобы к нему можно было обратиться. Затем мы поместили элемент clippath внутрь элемента defs . Элемент defs может быть использован для хранения контента, который не отображается напрямую. Этот скрытый контент может быть вызван и отображён другими элементами SVG, что делает его идеальным для хранения шаблонов с графическими элементами многократного использования. В нашем случае он идеально подходит для определения контура обрезки, к которому мы хотим обратиться через атрибут нашего элемента с изображением.

    Затем мы добавили изображение, прописали для него ширину и высоту и установили для атрибута preserveAspectRatio значение none , чтобы соотношение сторон не было фиксированным. Будь оно таковым, высота и ширина не применялись бы при нарушении соотношения сторон.

    И наконец, мы вызываем ранее определённый контур обрезки, используя атрибут clip-path для изображения. Атрибут clip-path принимает идентификатор элемента clippath в качестве значения, и применяет контур обрезки для изображения.

    Взгляните на пример 3: Фон текста с использованием .

    Вместо того, чтобы использовать атрибут clip-path для применения контура обрезки к изображению, можно также применить его с помощью CSS следующим образом:

    Этот подход должен работать как следует во всех современных браузерах: Chrome, Safari, Opera, Firefox и IE9+. А значит, если вы захотите использовать способ с CSS-свойством background-clip: text; , вы можете, например, проверить поддержку этого свойства браузером с помощью библиотеки Modernizr и предоставить в качестве альтернативы приём с SVG для остальных браузеров. Нечто похожее делает полифил, который создал Тим Петруски (Tim Pietrusky), однако вместо фонового изображения и его обрезки с помощью clippath , в нём также используется приём с SVG. При использовании полифила текст заполняется фоновым изображением, которое по изначальной задумке должно было быть обрезано. В следующей части нашей статьи мы рассмотрим способ заливки текста узором через SVG.

    Применение фона для текста посредством его заливки с помощью элемента

    Ещё один способ применить фон, или же узор для текста — это, как ни странно, просто заливка текста узором, вместо использования фонового изображения и обрезки его под текст. Для этого примера мы зальём текст узором, имитирующим дерево, который я скачал с SubtlePatterns.

    Использование изображения и его последующая обрезка под текст может быть наиболее удачным подходом, при использовании декоративных шрифтов как в нашем первом примере. Для данного примера нам было необходимо, чтобы сквозь текст просвечивалась большая часть изображения, так как визуальная часть играла роль в формировании характера нашего примера. Однако, иногда нам нужно всего лишь добавить для текста незатейливый узор чтобы сделать его более красивым и менее скучным. В таком случае, используя SVG, мы можем определить узор точно так же, как определили контур обрезки в предыдущей части. А затем, мы можем использовать получившийся узор для заливки текста.

    Так же как и в предыдущем примере, у нас есть SVG-элемент с заголовком для доступности, элемент text , который мы хотим заполнить узором и элемент defs , который мы будем использовать для определения узора. Узор состоит из изображения image и имеет идентификатор, который позже будет использован для обращения к нему и последующего применения к нашему тексту. Узор будет вызываться через атрибут fill внутри элемента с текстом или через CSS-свойство fill .

    Так же как и в предыдущем примере, к узору можно обратиться через CSS следующим образом:

    Взгляните на пример 4, которое работает во всех современных браузерах, в действии — это готовый фон для текста посредством заполнения изображением SVG.

    На этом этапе важно отметить, что в качестве узора в SVG можно использовать не только изображение. Поскольку градиенты, как мы уже отмечали выше, также являются изображением, можно создать SVG-градиент и использовать его для последующей заливки текста.

    Создать и использовать градиент в SVG очень просто. Градиент создаётся через
    элементы radialGradient или linearGradient , ему присваивается идентификатор, а затем для обращения к нему используется атрибут fill или CSS-свойство, как мы делали выше для

    . Ниже простой пример, где градиент используется для заливки текста.

    На примере 5 продемонстрирована заливка текста градиентом.

    И конечно же, градиент можно установить фоновым изображением контейнера, а затем обрезать его фон с помощью clippath , как мы делали в предыдущей части статьи.

    Применение текстуры для текста с помощью SVG

    Точно так же, как мы применили маску из изображения для элемента с помощью CSS-свойства mask-image , можно добиться практически того же эффекта с помощью SVG маски.

    Изображение с прозрачными и непрозрачными участками будет определять места, в которых будет отрисовываться текст, как мы видели это в предыдущей части, касающейся применения CSS-свойство mask-image . Однако, между CSS-масками и SVG-масками есть одно важное отличие: при использовании SVG-маски, области отрисовки определяются не значением альфа-канала, а значением яркости, в отличие от CSS-маски. Следовательно, изображение с чёрными и прозрачными кляксами, которое мы использовали в качестве маски выше, нужно заменить на изображение с белыми и прозрачными участками. Для того, чтобы воссоздать эффект акварельного текста, представленный ранее, нам придётся использовать изображение-маску вроде следующего:

    Изображение-маску с альфа-каналом можно без проблем переделать в маску яркости в программе Photoshop, посредством применения перекрытия белым цветом, что превратит чёрные участки в белые. Именно это я сделал, чтобы заменить изображение для CSS-маски более подходящим для SVG-маски. Светло-серые участки, видимые на изображении выше, на самом деле являются прозрачными, я всего лишь добавил этот фон для изображения чтобы вы могли увидеть белые кляксы, которые в противном случае не были бы видны на белом фоне этой статьи. Теперь, так же, как мы определяли контур обрезки и узор SVG, мы можем определить нашу маску и применить её к тексту.

    Мы создадим image , обёрнутый в SVG-элемент mask , которому будет присвоен идентификатор, чтобы к нему можно было обратиться. А потом обернём mask в элемент defs , который используется для определения маски без её непосредственного отображения.

    Иначе говоря, мы определяем ( defs ) SVG-маску ( mask ), которая является изображением ( image ) со следующим адресом (URL маски яркости, созданной ранее), и затем применяем эту маску к нашему тексту, используя атрибут mask элемента text или, конечно же, через CSS, используя свойство mask .

    Для большей эффектности я добавил фон с акварелью для главного элемента svg , чтобы казалось, что текст переходит в фон.

    Взгляните на кроссбраузерный результат в примере 6.

    Если заинтересует этот прием, вы можете прочитать больше о комбинировании CSS и SVG масок в этой прекрасной статье Кристиана Шефера (Christian Schaefer), опубликованной в блоге The Nitty Gritty. Маски SVG обладают гораздо большим потенциалом, и всё становится ещё интересней, если в качестве маски применить, к примеру, анимированный фон на основе canvas .

    Создание текстурного текста в помощью HTML5

    Последняя техника, которую мы рассмотрим, предусматривает использование HTML5 элемента для создания описанных выше эффектов. С помощью можно обрезать один элемент по контуру другого, заливать текст текстурой и применять для текста эффекты вроде маски, изменив значение свойства globalCompositeOperation контекста .

    Перед тем, как погрузиться в разбор технических деталей, давайте определимся с разметкой, так как она будет одинаковой для всех трёх техник, которые мы будем рассматривать.

    У нас есть элемент , для которого мы указываем высоту и ширину. Перед закрывающим тегом мы добавим текстовый контент, который смогут прочитать скринридеры, а также он будет использоваться браузерами с отключённым JavaScript в качестве альтернативы. Здесь, однако, следует отметить, что в Firefox этот текст не отображается в качестве альтернативы в случае, когда JavaScript отключён, что вероятно, является ошибкой браузера.

    Теперь, когда у нас готова разметка, нарисуем текстурный текст.

    Для нашего первого примера мы создадим текст в , и зальём его выбранным узором чтобы получить следующий результат:

    Нам нужен элемент и его контекст отрисовки, к которому мы затем добавим изображение для последующей заливки нашего текста.

    Давайте пройдёмся по коду выше. Вся отрисовка происходит в функции drawText . Мы определяем стиль шрифта в свойстве font , а затем используя метод createPattern , из изображения, созданного выше, создаём узор и устанавливаем его в качестве значения для свойства fillStyle , которое определяет стиль заливки для шрифта. И наконец, мы отрисовываем текст в , используя метод fillText , принимающий в качестве аргумента строку с текстом, который должен быть отрисован, а также несколько координат по x и y, которые определяют, в каком месте будет отрисован текст.

    Взгляните на пример 7 в действии.

    Необходимо отметить одну важную деталь: если вы используете в подключённый шрифт, он иногда может не отображаться, поскольку отрисовка может произойти до того момента, как будет загружен шрифт. Чтобы этого избежать, можно, например, использовать загрузчик шрифтов вроде Web Font Loader, созданного разработчиками из Typekit и Google, и отрисовывать уже после загрузки шрифта:

    Эта техника используется во всех примерах, однако я не хочу всё усложнять, потому в следующих примерах представлю вам только те функции, которые имеют отношение к соответствующему приёму.

    Перейдём к следующему приёму. Мы создадим эффект, похожий на обрезку для нашего , изменив значение свойства globalcompositeOperation нашего контекста. Конечный результат будет выглядеть так:

    У контекста есть свойство globalcompositeOperation , которое

    определяет композиционные операции между так называемыми «исходным элементом» и «целевым элементом». Проще говоря, оно определяет как то, что вы хотите нарисовать будет сочетаться с тем, что уже нарисовано в . Исходный элемент — это то, что вы хотите нарисовать, а целевой элемент — это то, что уже нарисовано до настройки свойства globalCompositeOperation . С помощью этого свойства можно нарисовать новые элементы и фигуры под уже существующими, скрыть некоторые участки с помощью маски, а также очистить некоторые участки .

    Свойство globalCompositeOperation может принимать одно из 16 значений, каждое из которых хорошо продемонстрировано в визуальном примере на MDN. Если вам ещё не приходилось работать с этим свойством, обязательно взгляните на этот пример, так как он поможет лучше разобраться со свойствами, которые мы будем использовать дальше. Ниже приведена иллюстрация с результатом применения каждого из этих значений. В исходном коде примера «целевой элемент» является синим прямоугольником, который нарисован на первым, а «исходный элемент» — красный круг, который нарисован после указания значения для globalCompositeOperation .

    На простом языке значение source-in этого свойства можно интерпретировать как «отрисовка участков/областей исходного и целевого элементов в местах их пересечения». Итак, если у вас есть два элемента, и один из них уже нарисован, а другой вы собираетесь нарисовать, отображаться будут только те участки, где эти два элемента пересекаются.

    Чтобы понять эту концепцию лучше, давайте сразу же погрузимся в код.

    В коде выше внутри функции drawText у нас есть 3 «секции», которые определяют, что именно будет в результате отрисовано в . В первой секции мы указываем текст, а также все его стилевые свойства, а затем отрисовываем его с помощью метода fillText . Затем, мы устанавливаем для globalCompositeOperation нашего контекста значение source-in . Далее мы добавляем в изображение.

    Таким образом вы видите, что «исходный элемент» в этом случае — это элемент, который должен быть добавлен после установки значения для globalCompositeOperation (изображение), а «целевой элемент» — это текст, который был добавлен перед ней. Устанавливая значение source-in , мы говорим браузеру, что следует отрисовывать изображение только в тех местах, где оно пересекается с текстом, именно так мы получаем нужный нам эффект обрезки.

    Как только вы разберётесь со всеми значениями globalCompositeOperation , вы сможете их быстро и легко использовать в своих целях. Также не забудьте просмотреть визуальные примеры на MDN, они вам здорово помогут в освоении материала.

    Когда будете их просматривать, обратите внимание, что если установить значение source-atop в нашем примере, результат будет тем же. Это значение, source-atop , говорит браузеру что, нужно отрисовывать участки/области исходного элемента (изображения) только там, где он пересекается с целевым элементом (текстом), а также, что нужно отрисовывать остальные части целевого элемента, даже если они не пересекаются с исходным элементом. В нашем случае оно даёт все тот же желанный для нас результат.

    Взгляните на пример 8 для этого приёма.

    Примечание: на момент написания этой статьи не все значения свойства globalCompositeOperation поддерживаются всеми современными браузерами без исключения. Кроссбраузерными являются шесть значений, они работают в Chrome, Safari, Firefox и Opera: source-over , source-atop , destination-over , destination-out , lighter и xor . Больше информации о кроссбраузерной поддержки вы можете почерпнуть из этой статьи. Примеры посложнее с использованием свойства globalCompositeOperation для более подробного обучения созданию очень крутых типографических эффектов с помощью canvas можно найти в этой публикации на HTML5Rocks.

    Последним нашим примером мы рассмотрим не менее важный способ создания ещё одного эффекта с помощью canvas , однако на этот раз мы добавим для текста текстуру так, чтобы он переходил в фон, как мы делали раньше с помощью SVG и CSS. Готовый результат будет выглядеть следующим образом:

    Мы будем использовать изображение с альфа-каналом в качестве «маски». Текст, в свою очередь, должен отрисовываться только там, где он пересекается с чёрными участками изображения и должен быть «стёрт» в прозрачных местах изображения. Это значит, что нам нужно, чтобы наши исходный и целевой элементы отрисовывались только на участках взаимного пересечения. Исходя из данного рассуждения и иллюстрации значений globalCompositeOperation , представленной чуть выше, для получения необходимого нам результата мы будем использовать значение source-in .

    Ниже представлено изображение, которое мы будем использовать в качестве «маски». Чёрные участки — это места пересечения изображения с текстом. Так же как и в части про CSS-маски, просто представьте что текст и изображение — это два отдельных слоя, разместите их один над другим и затем сотрите все части текста и изображения, где они не пересекаются друг с другом. Вы получите конечный эффект, который является результатом применения значения source-in .

    Код Javascript такой же как и выше, только значение для globalCompositeOperation будет отличаться. Мы перейдём сразу к живому примеру, где можно посмотреть исходный код и поковыряться в нём.

    Взгляните на пример 9 в действии

    Здесь мы снова добавили для canvas фон, чтобы эффект перехода текста в фон выглядел немного реалистичнее. У нас получился «поцарапанный» фон с поцарапанным текстом, которые прекрасно сочетаются.

    Анимирование фона текста

    Можно не только добавить фон для текста, но и анимировать его, создав при этом изящный эффект взаимодействия с ним. Так как в рамках этой статьи мы рассматриваем приёмы добавления фона или текстуры для текста, мы не будем детально касаться способов анимирования фона. Из этой темы может получиться целая отдельная статья.

    Мери Лу (Mary Lou) написала статью об эксперименте с CSS свойством background-clip: text и создании изящных эффектов для фона текста, обязательно почитайте её.

    Трент Уолтон (Trent Walton) также написал статью, в которой описал создание текста с фоном из градиента и анимирование этого фона, которое даёт очень красивый и простой эффект.

    И как всегда, несколько очень креативных экспериментов над CSS свойством background-clip с применением анимации CSS можно легко найти на Codepen. Среди них хотелось бы особенно выделить вот этот действительно крутой эксперимент от Лукаса Бебера (Lucas Bebber), в котором он создал интересный эффект заполнения текста водой и предложил фолбек для браузеров, не поддерживающих background-clip: text . Загляните по ссылке и на него и поиграйте с его кодом, в нём использованы очень крутые приёмы для создания эффекта заполнения водой.

    Использование изображения вместо текста

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

    За последние годы появилось множество готовых решений и Крис Койер (Chris Coyier) проделал огромную работу по их сбору, обозначив их плюсы и минусы и сведя результаты в так называемый Музей использования изображения вместо текста на основе CSS.

    Если вы не хотите использовать ни один из описанных выше приёмов для создания текста с графическим эффектом, а вместо этого предпочитаете использовать один из существующих приёмов замены текста изображением, непременно взгляните на самый свежий приём от Скота Келлума (Scott Kellum). Он назвал его «Новым методом Келлума». Метод предполагает использования в своём роде «пустого» шрифта, добавленного через правило @font-face ; символы этого шрифта не имеют ширину или начертание, что делает текст невидимым и, следовательно, позволяет избежать применения других приёмов, предполагающих скрытие исходного текста чтобы виден был только его фон.

    На самом деле, существует огромное количество статей с подробным разбором приёмов замены текста изображением. Однако, все они не вписываются в тему данного руководства, которая состоит в описании приёмов создания декоративного текста без замены текста изображением. Я могу лишь предоставить ссылки на несколько источников, которые рекомендую вам почитать, если вы хотите знать больше о приёмах замены текста изображением:

    Заключение

    Надеюсь вы научились одной-двум полезным методикам из этой статьи. Я считаю, что мы рассмотрели большинство возможных способов создания текстурного текста с помощью CSS и HTML. Моим любимым является приём с использованием SVG, просто из-за его хорошей кроссбраузерной поддержки. Полагаю, однажды всё-таки придёт тот день, когда все браузеры будут поддерживать CSS-маски и значение text свойства background-clip , и мы наконец сможем использовать их без необходимости добавления альтернативных вариантов. И тогда лучшим выбором, без сомнения, станет метод на основе CSS.

    Надеюсь, эта статья была для вас интересной. Спасибо что прочитали её! =) Если вам известны другие способы добавления текстуры для текста, пожалуйста, поделитесь ими в комментариях ниже.

    Скрыть текст с помощью css

    У меня есть тег в моем html, как это:

    используя css, я хочу заменить текст моим фактическим логотипом. У меня нет проблем с логотипом, изменив размер тега и поместив фоновое изображение через css. Однако я не могу понять, как избавиться от текста. Я видел это раньше, в основном, выталкивая текст с экрана. Проблема в том, что я не могу вспомнить, где я его видел.

    29 ответов

    Это один из способов:

    здесь еще один способ чтобы скрыть текст, избегая при этом огромное поле 9999 пикселей, которое браузер создаст:

    почему бы просто не использовать:

    просто добавить font-size: 0; к вашему элементу, который содержит текст.

    самый кросс-браузерный дружественный способ-написать HTML как

    затем используйте CSS, чтобы скрыть промежуток и заменить изображение

    Если вы можете использовать CSS2, то есть несколько лучших способов использования content свойство,но, к сожалению, веб еще не 100% там.

    Джеффри Зельдман предлагает следующее решение:

    это должно быть менее ресурсоемким, чем -9999px;

    пожалуйста, читайте об этом здесь:

    скрытие текста с учетом доступности:

    В дополнение к другим ответы, а вот еще один полезный подход для скрытия текста.

    этот метод эффективно скрывает текст, но позволяет оставаться видимым для чтения с экрана. Это вариант для рассмотрения, если доступность является проблемой.

    стоит отметить, что этот класс используется в настоящее время в Bootstrap 3.

    Если вы заинтересованы в чтении о доступности:

    посмотреть mezzoblue для хорошего резюме каждой техники, с сильными и слабыми сторонами, а также пример html и css.

    не используйте < display:none; >Это делает контент недоступен. Вы хотите, чтобы читатели экрана видели ваш контент и визуально стилизовали его, заменив текст изображением (например, логотипом). Используя text-indent: -999px; или аналогичный метод, текст все еще есть — просто визуально нет. Использовать display:none , и текст пропал.

    так много сложных решений.

    самый простой-просто использовать:

    вы можете использовать css background-image собственность и z-index чтобы изображение оставалось перед текстом.

    почему бы вам не использовать:

    Если у вас нет элемента span или div, он отлично работает для ссылок.

    ответ заключается в создании промежутка со свойством

    вы можете найти пример в этот сайт

    Это на самом деле область созрела для обсуждения, со многими тонкими методами, доступными. Важно, чтобы вы выбрали / разработали технику, которая отвечает вашим потребностям, включая: считыватели экрана, комбинации изображений/css/сценариев включения / выключения, seo и т. д.

    вот некоторые хорошие ресурсы, чтобы начать работу по дороге замены изображения standardista техники:

    выше также хорошо работает в последнем Thunderbird.

    используйте тег условия для другого браузера и используя css, который вы должны разместить height:0px и width:0px также вы должны поставить font-size:0px .

    если дело просто в том, чтобы сделать текст внутри элемента невидимым, установите атрибут color на 0 непрозрачность, используя значение rgba, такое как color:rgba(0,0,0,0); чистый и простой.

    попробуйте этот код, чтобы сократить и Скрыть текст

    или скрыть использование в вашем классе css .hidetxt

    repalce содержание с CSS

    Я обычно использую:

    если мы можем редактировать разметку, жизнь может быть проще, просто удалите текст и будьте счастливы. Но иногда разметка была размещена JS-кодом или нам просто не разрешено ее редактировать, слишком плохо, что css оказался единственным оружием, размещенным в нашем распоряжении.

    мы не можем поставить обертывание текста и скрытие всего тега. Кстати, некоторые браузеры не только скрывают элементы с помощью display:none но также отключает компоненты внутри.

    и font-size:0px и color:transparent может быть хорошо решения, но некоторые браузеры их не понимают. Мы не можем на них положиться.

    используя overflow:hidden обеспечивает нашу ширину и высоту. Некоторые браузеры (не будут их называть. IE) может читать ширину и высоту как min-width и min-height . Я хочу предотвратить расширение коробки.

    через нулевое значение font-size и line-height в элементе делает трюк для меня:

    чтобы скрыть текст из html, используйте свойство text-indent в css

    / * для динамического текста вам нужно добавить пробел, чтобы ваш примененный css не беспокоил. nowrap означает, что текст никогда не будет переноситься на следующую строку, текст продолжается на той же строке до
    встречается тег

    Я не помню, где я взял это, но успешно использовал его в течение многих лет.

    мой mixin находится в sass, однако вы можете использовать его так, как считаете нужным. Для хорошей меры я обычно держу .hidden класса где-то в моем проекте, чтобы прикрепить к элементам, чтобы избежать дублирования.

    один из способов добиться этого-использовать :before или :after . Я использовал этот подход в течение нескольких лет и особенно отлично работает с векторными значками глифа.

    Каскадные Таблицы Стилей / Новый метод замены текста картинкой, или избавляемся от -9999px

    Хотелось бы поговорить о техниках замены текста изображением. Думаю, практически все сталкивались с моментами в верстке, когда, к примеру, для заголовка страницы нужно использовать графический объект, при этом сохранив под ним текст и для поисковых роботов, и для печатной версии. Да и в принципе, никогда не хочется ломать семантинку страницы.

    Немного об истории решения этого вопроса.

    Hello world!

    Знакомая штука? По сути, внутрь тега, в фоне которого лежит наша картинка, мы добавляем инлайновый тег, который дублирует текст на картинке, а потом его скрываем с помощью display:none;
    Многие сразу же признали кривизну этой техники, как с точки зрения семантики, так и с точки зрения утяжеления html лишними тегами. Ко всему прочему, ее полюбили серые оптимизаторы, в результате чего некоторые поисковые системы применяли санкции к страницам, перегруженным такими объектами.

    В том же году появилась еще одна техника замены. Работала она примерно так:

    #ID_OF_ELEMENT <
    padding: HEIGHT_OF_IMAGEpx 0 0 0;
    overflow: hidden;
    background-image: url(«hello_world.gif»);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:HEIGHT_OF_IMAGEpx;
    >

    Как видно, здесь был использован хак для IE5.5, в котором совсем все плохо было с блочной моделью. Впоследствии, эта техника не прижилась, так как переставала работать в ряде случаев, плюс многие не любят хаки.

    -9999px

    После всего этого появилась на свет техника Phark’s Accessible Image Replacement, которая является самой популярной на текущий момент и состоящая всего из одной строки:

    .text-hide <
    text-indent: -9999px (или -999em);
    >

    Техника не идеальна, однако если не забывать о некоторых нюансах ее работы, то она сойдет для большинства случаев. В частности, проверять, чтобы text-align был направлен в ту же сторону, что и text-indent (в большинстве случаев — text-align:left). А также, не забывать, что применив ее на элемент со свойством display: inline-block;, этот элемент улетит в IE7 вслед за скрываемым текстом.

    Я, как и многие, был приверженцем «-9999px», но в то же время понимал, что это не самый лучший вариант и что должно быть более красивое решение этой задачи. Каждый раз, прописывая -9999px, я задумывался а не повлияют ли эти пиксели на сайт в будущем.

    Новое решение

    И вот, несколько дней назад товарищ Zeldman предложил такой вариант:

    .text-hide <
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    >

    Такой способ решает сразу несколько проблем:

    • Во-первых, можно быть уверенными, что даже самый длинный текст, который скрывается, никогда не достигнет видимого контейнера, даже если длина этого текста будет превышать 9999px
    • Во-вторых, сначала обнаружилась, а потом этим же способом решилась проблема, которая состояла в следующем: каждый раз при задании -9999px в dom-дереве добавлялся невидимый блок такой ширины. И если на обычных браузерах это сказывалось мало, то на iPAD обнаружились серьезные проблемы с производительностью анимации (демо для проверки)

    Однако этот способ также не идеален — если на элементе есть padding, то часть текста будет из него выглядывать. Проблема решается обнулением паддингов для тех блоков, где скрывается текст.

    Вариант Зелдмана немного оживил ведущих фронт-енд разработчиков, которые ведут оживленные дискуссии в комментах и блогах.
    Также, он был замечен командой разработчиков html5boilerplate, которые сейчас активно дискутируют на github на тему включения нового способа скрытия текста в набор вспомогательных классов своего бойлерплейта.

    В той же ветке был предложен еще один способ, который имеет право на жизнь:

    .text-hide <
    font: 0/0 serif;
    text-shadow: none;
    color: transparent;
    >
    Этот способ тоже кроссбраузерен — проверено в IE7-10, Opera 11.61, Chrome 17.0, Firefox 10.0, и Safari 5.1.2. Правда, для старых браузеров такой вариант не прокатит — многие из них не понимают нулевое значение шрифта. Например, какой-то из старых Safari вместо нуля может принять значение 6 или 8.

    Большую часть информации об истории и новом способе почерпнул из этого поста

    Изменение, создание, всплывающих подсказок title с помощью CSS

    Доброго времени суток. ��

    Тем кто хоть раз верстал и сталкивался с html известно что у ссылок есть параметр title, по умолчанию он выводит всплывающую подсказку. В этой статье я расскажу о том, как изменить внешний вид таких подсказок и настроить их на свой вкус и под ваш сайт. Такие подсказки помогут вам выделить ссылки. Сделать красивые подсказки к ссылкам, которые имеют, например, вид иконок. Самое главное, что сделать это можно используя обычный CSS, не применяя никаких скриптов. Вы просто внесете изменения в существующие подсказки. Пример того что у вас может получиться можете посмотреть ниже:

    Чтобы сделать так же, вам естественно изначально нужно ссылкам прописать атрибут title. Если вы это уже сделали давно, то остается добавить лишь стили.

    Данные стили сделают всплывающие подсказки такие как в первой ссылки. Но если вы захотите, чтобы у разных ссылок были разные стили, то можно добавить классы ссылкам или если они уже есть, просто прописать им стили.Например по примеру у второй ссылки класс — tw_link, а у третей th_link.

    Далее, просто, атрибуту title нужного класса добавляете уникальные стили. Например, у нас всем title уже заданы стили, они по умолчанию зеленого цвета. имеют размер и позиционирование с анимацией появления. Нашим новым двум классам просто добавим новые цвета.

    Теперь вторая ссылка оранжевая, а третья черная. Таким же образом, можно менять размеры каждой выноске и тд. Все зависит от вашей фантазии.

    На этом все, спасибо за внимание. ��

    Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

    Лучший метод замены изображений

    Какая лучшая (как в кросс-браузере) техника для замены изображений в CSS? Я использую sprites, чтобы сделать свою навигацию, но я хочу, чтобы разметка оставалась дружественной к SEO. Учитывая следующую структуру HTML.

    Каков наилучший способ заменить текст фоновым изображением, используя только CSS?

    В настоящее время я использую это.

    Но он не работает с CSS, а изображения отключены.

    Тогда изображение будет иметь ширину 300 пикселей, а каждая вкладка будет шириной 100 пикселей.

    В 2008 году в презентации Google на мероприятии Apart было ясно, что замена действительной не будет наказываться Google. См. сообщение Mezzoblue об этом

    В принципе, до тех пор, пока изображение, которое вы заменяете текстом, имеет тот же текст в нем, он считается действительным и не пытается обмануть поисковые системы. Как они определяют, является ли изображение действительным или нет? Я понятия не имею. OCR? Обзор вручную?

    Что касается CSS on/images off, то нет идеального решения, все они требуют дополнительной не-семантической разметки. См. Ссылку css-tricks, которая выкладывается на разных методах. Я лично не беспокоюсь о очень небольшом проценте пользователей, просматривающих CSS, но без изображений.

    Ваш выбор прост. Дополнительная надбавка, или не заботятся о включении css/images.

    Я просто придумал это, похоже, работает во всех современных браузерах, я только что тестировал его (IE8/совместимость, Chrome, Safari, Moz)

    • image alt text — лучшая практика для доступности /seo
    • нет дополнительной разметки HTML, а css также очень минимален.
    • обходит проблему css on/images off, где методы «text-indent» все еще скрывают текст для пользователей с низкой пропускной способностью.

    Самый большой недостаток, который я могу придумать, — это css off/images on situation, потому что вы будете отправлять только прозрачный gif.

    Возможно, будет возможно написать небольшой javascript, чтобы помочь с этим, заменив все источники изображений своими свойствами css для фонового изображения. Но это будет работать только в том случае, если браузеры все еще привязывают свойства css к элементам, а затем игнорируют их. Я не знаю, так ли это или нет, мне придется проверить это. Вы также хотели бы разработать тест на основе javascript, чтобы узнать, применяется ли css на странице (возможно, проверьте положение некоторого тестового элемента).

    btw, я хотел бы знать, кто использует образы без таблиц стилей? какой-то мобильный телефон или что-то в этом роде?

    Основываясь на комментарии ниже. встроенные стили hrm. возможно, мне нужно просто создать вспомогательную функцию php, например , чтобы создать такой код:

    то просто прикрепите CSS в таблице стилей

    это более старый метод, который я использую, но не уверен, где я его нашел. Он работает с CSS на /images off, CSS off/images on, CSS on/images on.

    Если пользователь с отключенными/обратными CSS-окнами, они будут видеть удвоенный текст. Если паук поисковой системы посещает, они будут видеть текст и обычный текст, интеллектуальный паук может легко идентифицировать это, что это такое, метод невинных заметок изображения.

    Итак, этот метод хуже для чтения с экрана, так как читается текст, но эти пользователи должны иметь возможность перейти к следующему абзацу, поэтому я застрял

    вокруг «моего текста».

    Все остальные, у которых отключены CSS и изображения, — это какой-то бот, правда?

    Илон Маск рекомендует:  Что такое код file_exists
  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL