preview_large_17htmlcss

17 CSS/HTML эффектов с кроссбраузерными решениями

Безусловно, есть множество разных способов достигнуть эффектов, описанных ниже, но самое сложное в CSS — заставить их выглядеть одинаково во всех браузерах.

Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работает), то вы просто применяете его.

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

• Минимальная / Максимальная ширина (с поддержкой IE)
• RGBA (с поддержкой IE)
• Непрозрачность (с поддержкой IE)
• Вращение / масштабирование изображений (с поддержкой IE)
• Полноэкранный фон (с поддержкой IE)
• Фон или маркеры списка без файлов изображений
• Текстовые тени (с поддержкой IE)
• Множественные границы (с поддержкой IE)
• Тени блока (с поддержкой IE)
• Закруглённые углы
• Контент, доступный только для скринридеров
• Не используйте отрицательные значения text-indent
• Clearfix (с поддержкой IE)
• @font-face (с поддержкой IE)
• Кавычки для цитат без изображений
• CSS для iPhone4 (высокое разрешение)
• Горизонтальная / вертикальная ориентация изображений для мобильных устройств

Приступим!

Минимальная/максимальная ширина элемента (с поддержкой IE)

Многим из вас приходится устанавливать фиксированные размеры элементов, только потому что IE не поддерживает свойства min-width, max-width, min-height и max-height, не так ли? Но больше вам не нужно этого делать. IE не относится к тем браузерам, которые придерживаются общих стандартов, и иногда мы можем использовать это в свою пользу: мы можем использовать код, который смотрелся бы ужасно в стандартном CSS.

В данном случае вы можете воспользоваться некоторыми выражениями IE (в основном, JavaScript кодом), чтобы проверить текущую ширину body и подстроить ширину элемента под неё:

RGBA (с поддержкой IE)

На сей раз нам потребуется несколько IE фильтров. У вас будет стандартная разметка, разметка под IE6 и разметка под IE8.

Разметка для IE основана на фильтре градиента, там мы, фактически, указываем один и тот же цвет в начале и в конце, и получаем отличный RGBA фон.

Первые две цифры — это непрозрачность, а последние — непосредственно цвет. Неизвестно почему, но прозрачность всё равно не работает правильно… Возможно, это баг только этого конкретного кода :)

Непрозрачность (с поддержкой IE)

И снова фильтры! Но на сей раз у нас разный синтаксис для IE8 и более ранних версий. И снова убедитесь, что добавили khtml, moz и стандартные атрибуты.

Вращение/масштабирование изображений (с поддержкой IE)

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

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

Полноэкранный фон (с поддержкой IE)

Иногда возникает необходимость быстро создать полноэкранные фоны. Надеемся, вы не используете JavaScript только для этого, потому что это можно реализовать с помощью всего нескольких CSS строк.

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

Фон или маркеры списка без файлов изображений

Жаль, что IE не позволяет вам использовать кодирование base64 вместо реальных файлов. Это, по большей части, для мобильных телефонов, т.к. позволяет сократить количество http запросов, и, соответственно, сохранить драгоценное время.

В данном случае это использовано для пользовательского list-style без изображения. Мы только сгенерировали base64 с помощью Patternfy в вставили в CSS следующим образом:

Текстовые тени (с поддержкой IE)

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

Множественные границы (с поддержкой IE)

Когда вам нужно больше, чем одна граница, для большинства браузеров вы можете использовать outline или элементы :before и :after. Для IE вы опять-таки можете прибегнуть к использованию фильтров.

Тени блока (с поддержкой IE)

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

Закруглённые углы

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

Контент, доступный только для скринридеров

Иногда, когда вы хотите улучшить доступность своего сайта, вы добавляете ссылки, вроде “Перейти к содержимому” или “Перейти к навигации”. Для них вы устанавливаете “display: none” или “visibility: hidden” и надеетесь, что это работает, не правда ли? В таком случае вы ошибаетесь. Тесты показывают, что многие скринридеры просто игнорируют части кода с display:none или visibility: hidden, таким образом у вас нет никакого выигрыша в доступности сайта.

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

Не используйте отрицательные значения text-indent

Т.к. мы говорим о скрытом контенте, запомните ещё кое-что — никогда не используйте отрицательные значения text-indent для описания изображений. Это очень известная методика, но она имеет много минусов в плане SEO, т.к. в наши дни многие боты могут распознавать такой текст
Используйте атрибут alt, который намного безопаснее, чем скрытый контент.

Clearfix (с поддержкой IE)

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

@font-face (с поддержкой IE)

Если вы всё ещё используете cufon, только потому что не доверяете @font-face, то подумайте ещё раз.
Font Squirrel предоставляет удивительный сервис @font-face generator, который позволяет вам добавлять на свой сайт действительно красивые шрифты, не утруждая себя разработкой JavaScript кода.

Окончательный код выглядит примерно так:

Красивые цитаты без изображений кавычек

Это совсем не сложно, потребуется только :before и blockquote:

CSS код для владельцев iPhone4 (высокое разрешение)

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

CSS горизонтальная/портретная ориентация изображений для мобильных телефонов

Это хорошая отправная точка для определения ориентации мобильного телефона.


2 комментарий на “17 CSS/HTML эффектов с кроссбраузерными решениями

  1. Спасибо, отличная подборка.

    Выделите пжл ссылку на @font-face generator и люби будут вам благодарны.

    В свое время очень долго парился со шрифтами под IE6, пока не подсказали.

    Thumb up 0 Thumb down 0

Оставить комментарий