8 ловушек CSS и методы их обхода
Когда пишется код CSS, очень легко попасть в одну из ловушек. Чтобы их преодолеть, нужно использовать небольшие и эффективные трюки.
В данном уроке описывается несколько моментов, которые помогут при работе над CSS частью вашего проекта.
1. Задаем стили для кнопок
Начнем с классических кнопок HTML. Когда создаются кнопки, например, input type"submit"
или button
, и хочется получить точность до пикселя, нужно вспомнить о следующих командах:
/* Удаляем избыточный отступ в сторону для IE */ .button{ overflow: visible; } /* Удаляем избыточный отступ внутрь для Firefox */ .button::-moz-focus-inner{ border: 0; padding: 0; }
2. Используем псевдо-элементы
Несомненно, что вам уже известны псевдо-элементы, такие как :before
и :after,
которые помогают определять содержание, вставляемое перед (или после) основного элемента. Однако, элементы input
и img
не имеют содержания и псевдо-элементы не работают с ними. А элемент hr
позволяет использовать псевдо-элементы.
Также нужно помнить о разнице между :before
и ::before
. IE8 допускает использование только одинарного двоеточия.
3. Фоновый градиент для всего раздела body
Если вы пробовали использовать CSS3 градиент для тега body
, то наверняка заметили, что он не растягивается, а повторяется. Чтобы исправить положение используйте следующий код:
html { height: 100%; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; }
4. Отсутствие переходов для градиентов
К сожалению, ни один из браузеров не поддерживает переходы градиентов (пока).
Но можно использовать следующие трюки:
1. Использовать свойство background-position
для :hover
, чтобы создать иллюзию перехода градиента. В действительности используется сдвиг по оси Y.
a{ background: linear-gradient(orange, red) repeat-x; display: inline-block; padding: 20px; } a:hover{ background-color: red; background-position: 0 -15px; transition: background-position .1s linear; }
2. Трансформация background-color
и использование изображения градиента, которое будет иметь изменяющуюся прозрачность. Такая техника создаст иллюзию перехода градиента.
a{ background-color: orangered; background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); transition: background-color .1s linear; display: inline-block; padding: 20px; } a:hover{ background-color: red; }
5. Зазор между элементами inline-block
Допустим, вы используете inline-block
вместо float
для горизонтального списка. При этом появляется зазор между вашими элементами inline-block
. чтобы исключить его необходимо использовать "грязную" разметку.
То есть, вместо четкой структуры:
<ul> <li>один</li> <li>два</li> <li>три</li> </ul>
Нужно писать так:
<ul> <li>один</li><li>два</li><li>три</li> </ul>
6. Когда height: 100% действительно работает?
Все достаточно просто: когда вы используете height: 100%
для элемента, всегда думайте о высоте его родителя. Если высота родителя не определяется в стилях, то внутренний элемент будет иметь 100% высоты от ничего.
Вот такой широко распространенный пример разметки:
<div id="parent"> <div id="child">2</div> </div>
Стили для него:
#parent{ height: 400px; padding:10px; background:red; } #child{ height: 100%; background:green; }
Зеленый цвет элемента #child
с помощью правила height: 100%
будет растянут на все 400px
по вертикали.
7. Скругленные углы для таблиц
Трюк заключается в установке свойства таблицы border-spacing
в значение 0
. Свойство border-collapse
по умолчанию имеет значение separate
, поэтому нужно установить его в значение collapse
для IE7 и старше (для обратной совместимости кода).
table { *border-collapse: collapse; /* IE7 и старше */ border-spacing: 0; border-radius: 5px; }
8. Модель элемента ввода
Когда разрабатывается элемент поиска, например, то после установки одинаковых значений для свойств height
или width
элементов input type="submit"
и input type="text"
результат обычно расстраивает.
Причина расстройств заключается в том, что для элемента input type="submit"
используется модель определения размеров border-box
, а для элемента input type="text"
- модель content-box
(в IE и FF).
Чтобы устранить причину расстройств, нужно использовать одинаковые модели для элементов ввода. Для этого используется свойство CSS3 box-sizing
:
box-sizing: content-box | padding-box | border-box;
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/LLRAyjTR8oQ/lessons.php


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
Люди обычно тратят свою жизнь на то, чтобы свести к минимуму потери, а не на то, чтобы привести к максимуму приобретения. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp