css


[CSS] Сглаживание шрифтов в Firefox (OS X)

Для принудительного включения сглаживания шрифтов в Firefox (на OS X) достаточно прописать в стиль следующее свойство: body { -moz-osx-font-smoothing: grayscale; }body { -moz-osx-font-smoothing: grayscale; } Данное свойство поддерживается Firefox начиная с версии 25. Без данного свойства шрифт в Firefox на OS X рендерится так, что он кажется более толстым. Пример текста без использования сглаживания и с включенным глаживанием:

[Решение] Как убрать иконку "Отсутствует изображение" в браузере

По умолчанию браузер, если не может загрузить изображение в теге <img>, показывает соответствующую иконку (изображение иконки зависит от используемого браузера): Чтобы не показывать данную иконку, нужно для тега <img> прописать следующее: onerror=»this.style.visibility = ‘hidden'»

[Chrome] Тормоза при использовании "-webkit-filter: blur"

Решили на одном из сайтом заблюрить фон, однако заметили, что в браузере Google Chrome это вызывает определенные тормоза при прокрутке страницы. Как и предполагали, проблема в аппаратном ускорении. Для Chrome, оказывается, лучше всего явно задавать свойство для использования аппаратного ускорения (через GPU), что сразу же позволит увеличить FPS: -webkit-transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);

[Bootstrap] Выпадающие меню при наведении курсора

В фреймворке Bootstrap третьей версии выпадающее меню (dropdown menu) по умолчанию раскрывается / закрывается только по клику на соответствующий пункт меню. Чтобы меню раскрывалось при наведении курсора, необходимо в стили добавить следующее: .dropdown:hover .dropdown-menu { display: block; }.dropdown:hover .dropdown-menu { display: block; }

Как сделать сайт черно-белым?

Сделать сайт полностью черно-белым довольно легко, для этого нужно воспользоваться CSS Filter Effects: filter: gray; filter: gray; filter: url(«data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter></svg>#grayscale»); -webkit-filter: grayscale(100%);

Обход запрета выделения текста на странице

На некоторых сайтах можно встретить ситуацию, когда выделение текста прямо запрещено – при попытке выделить стандартным способом с зажатой левой кнопкой, ничего не происходит. Делают это, обычно, для того, чтобы напакостить любителям копипаста. В других же случаях это просто необходимо (формы Drag&Drop, выделение текста кнопок и пр.) Чтобы запретить выделение текста, можно воспользоваться вендорными свойствами CSS. Пример для браузеров […]

[Chrome] Проблемы со сглаживанием шрифтов

Для разрабатываемого нами приложения мы решили использовать шрифт с разным начертание по толщине (или как еще говорят, по насыщенности). Минимальная толщина шрифта, которую мы используем, это 300 (font-weight: 300). Шрифт подключаем через @font-face с указанием на хост, от куда его нужно брать и при этом используем два формата шрифтов — WOFF и TTF. Все это должно помочь […]

[CSS] Декларация !important

Чтобы переопределить стилевой параметр с наивысшим приоритетом, необходимо добавить декларацию !important.

Прозрачный фон для Twitter-виджета

Чтобы установить прозрачный фон для Twitter-виджета (который выводит ленту твитов), необходимо указать background: ‘none’: theme: { shell: { background: ‘none’, color: ‘#ffffff’ }, tweets: { background: ‘none’, color: ‘#ffffff’, links: ‘#ff0088’ }theme: { shell: { background: ‘none’, color: ‘#ffffff’ }, tweets: { background: ‘none’, color: ‘#ffffff’, links: ‘#ff0088’ }

Таблицы совместимости веб-технологий с браузерами

Довольно таки интересный сайт, который представляет собой сводные таблицы совместимости браузеров для различных технологий (HTML5, CSS3, SVG и т.п.).  Так к примеру, введя для поиска «shadow», можно узнать, что IE вплоть до девятой версии не поддерживает CSS3 Text-shadow (а очень жаль, хотя, конечно, можно использовать решения в виде костылей). Полный список поддерживаемых браузеров выглядит следующим образом: […]