CSS: перечеркнутый по диагонали текст

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

Этот способ основан на применении абсолютно спозиционированного псевдоэлемента ::before, с помощью которого на текст накладывается цветная линия. Текстовое содержимое псевдоэлемента пустое, но при этом он растянут по всей ширине родительского элемента и смещен относительно его базовой линии.Угол и направление наклона линии регулируется дополнительными стилями:В коде HTML-страницы это выглядит примерно так:Верстка абсолютно валидная, стили стандартные, поддерживаются всеми современными браузерами. В зависимости от места применения, вы можете отрегулировать цвет и толщину линии, а также угол ее наклона. Обратите внимание, что если применять этот эффект к многострочному тексту с переносами, то перечеркнутой окажется только первая строчка. Готовый пример вы можете посмотреть на демонстрационной странице.

3D текст с помощью CSS

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

Читать статью целиком »

Символ рубля без использования шрифтов

Небольшой трюк, как можно нарисовать символ рубля без использования юникода и внешних шрифтов, средствами одного только CSS. Кроме того, даже с отключенными стилями цена будет отображаться просто с буквой "Р", что тоже, в принципе, допустимо.Блок с ценой обернут в элемент DIV, а символ рубля находится внутри строчного элемента SPAN. Обратите внимание, что в тексте страницы символ записан обычной буквой "Р", а горизонтальная палочка выполнена в виде символа "узкое тире" и добавляется к нему в CSS при помощи псевдоэлемента ::before.Способ кроссбраузерный, работает как на стационарных, так и на мобильных платформах. При использовании разных размеров шрифтов скорее всего понадобятся корректировки смещений палочки по горизонтали и вертикали, это вы можете легко сделать самостоятельно. Готовый результат можно посмотреть на демонстрационной страничке.

Как отследить потерю фокуса вкладки в браузере

В современных браузерах есть очень полезный инструмент - Page Visibility API. Он позволяет узнать, когда вкладка с веб-страницей видна пользователю, а когда пользователь находится на другой странице. Через Page Visibility API можно установить обработчик для реагирования на изменение состояния видимости. Для чего это надо? Например, если сайт открыт на мобильных устройствах, то при переходе на другую вкладку есть смысл отключить ненужные сетевые запросы, всякие спецэффекты, динамическое обновление контента и прочие ресурсоемкие операции. В веб-приложениях, например, можно сделать автоматическое сохранение незаполненной формы при переходе на другую вкладку. На моем сайте при потере фокуса вкладки активируется опция "камуфляж".

Читать статью целиком »

Сервисы картинок-placeholder'ов для сайтов

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

Читать статью целиком »