Скошенная кнопка — css

Скошенная кнопка — css

Как сделать скошенную кнопку с помощью css легко и просто без использования картинок? Оказывается - очень просто. Давайте разберемся с этим.

Читать полностью »

21.06.17
Убрать подсветку области клика на iphone — css

Убрать подсветку области клика на iphone — css

При верстке макетов под мобильные устройства нужно помнить о некоторых особенностях мобильных браузеров. Особенно это касается safari в ios. Вот уж где может всплыть полно сюрпризов при тестировании макетов. Например, когда пользователь нажимает на активный элемент или ссылку, safari подсветит область этого элемента. Иногда это очень полезно, а иногда не нужно. Сегодня мы научимся отключать подсветку элементов, на которые нажимает пользователь в safari на ios или изменять ее цвет.

Читать полностью »

26.03.17
Стилизовать input[type=search] для mac — css

Стилизовать input[type=search] для mac — css

Совсем недавно, разрабатывая систему тестирования кандидатов, столкнулся с неожиданной проблемой - к полю ввода не применялись стили. Причем воспроизводился этот дефект только на компьютерах под управлением Mac OS. При рассмотрении проблемы выяснилось, что у поля ввода input стоит не просто type=text, а вовсе type=search. Как сделать, чтобы и к такому полю применялись написанные стили? Давайте разберемся!

Читать полностью »

26.03.17
Зафиксировать ширину столбцов таблицы css

Зафиксировать ширину столбцов таблицы css

Таблицы в HTML существуют очень давно. И так сложилось, что они выполняли, и наверное еще выполняют, не только функции хранения табличных данных... Часто их использовали для создания сетки сайта или вертикального выравнивания содержимого. Но время идет, технологии не стоят на месте, а активно развиваются и таблицы используют в основном только для хранения табличных данных... Это конечно правильно!

Есть у таблиц одна интересная особенность - распределять ширину колонок по своему усмотрению... Ей нипочем ни width, ни max-width, она сделает так, как ей хочется... Автоматически распределяет свободное пространство между колонками в зависимости от содержимого. Поэтому, две двухколоночные таблицы на странице могут выглядеть по-разному! В большинстве случаев это никуда не годится... Как же сделать поведение таблиц прогнозируемым и более послушным? Оказывается, можно!

Читать полностью »

26.03.17
Отменить увеличение текста на мобильном

Отменить увеличение текста на мобильном

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

Бывают такие ситуации, когда мобильный браузер (в частности Chrome на Android) самопроизвольно увеличивает размер текста какого-то блока. Причем это может быть даже не весь текст на сайте и даже один из двух совершенно одинаковых блоков. Его логика лично мне до сих пор непонятна... Если вы сталкивались с таким эффектом, то эта статья для вас. Как избавиться от этого эффекта читайте ниже...

Читать полностью »

26.03.17
Для просмотра сайта обновите браузер.