CSS3

Пример слайдера, управляемого только с помощью CSS3

Дмитрий Сахань

Стремительное развитие программного обеспечения, а параллельно с ним ещё более резвый рост производительности компьютерного оборудования, растворяют в себе злободневность полемики об эффективном коде. И вот уже в очередном проекте 2-3-страничного сайта нам проще использовать нечто типа jQuery('.spoiler').show(), чтобы оживить статичный сайт. Ведь за мощью компьютера совсем не заметно расточительство ресурсов, вызванное цепочкой внутри библиотечных действий от такой команды, и только ради организации простейшей бизнес-логики на клиентской стороне.

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

Любителям сначала поразгадывать ребус — как же мне удалось запрограммировать такой интерфейс на CSS — следуйте на страницу примера. Если не отгадаете, загляните за подсказкой в исходный код примера. Там всё прокомментировано и разложено по секциям. Остальным рекомендую читать дальше, где изложена суть этого механизма.

Колонки одинаковой высоты через CSS3

Влад Мержевич

Существует несколько методов создания колонок равной высоты. Один из самых популярных и простых заключается в имитации колонок с помощью фонового рисунка. Код HTML при этом остаётся исходным, а в стилях добавляется только свойство background. Естественно, колонки будут иметь разную высоту, которая зависит от их содержимого, но за счёт одного фона создаётся иллюзия одинаковых по высоте колонок.

У этого метода есть следующие недостатки.

  • Сложно быстро поменять цвет колонок, поскольку это делается не через код, а в графическом редакторе.
  • Рисунок создаёт дополнительный запрос к серверу и увеличивает время загрузки страницы.
  • Метод имеет сложности в макетах с резиновыми колонками, особенно, когда их больше двух.

В целом, минусы не очень существенны и многие разработчики готовы с ними мириться. Но есть решение изящнее — использовать CSS3, в частности, градиенты. Хотя никаких градиентов в данном случае не видно, они подходят как нельзя лучше из-за того, что позволяют делать не только плавные, но и резкие переходы цветов.

Простая CSS3 анимация с Animate.css

Крейг Баклер

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

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

Ссылка как кнопка

Сделайте ссылку, которая при наведении на неё курсора мыши меняла свой вид, как показано на рис. 1.

Рис. 1

Рис. 1

Как изменить размер фоновой картинки через CSS3

Крейг Баклер

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Новые варианты повторения фоновой картинки в CSS3

Крейг Баклер

В CSS 2.1 свойство background-repeat имеет четыре значения: no-repeat, repeat, repeat-x и repeat-y. Хотя они, безусловно, полезны, но не позволяют полностью управлять процессом повторения и картинки будут обрезаны, если они не помещаются в контейнер точное число раз.

CSS3 вводит два новых варианта: space и round.

Как применить трансформацию CSS3 к фоновым картинкам

Крейг Баклер

Масштабирование, наклон и поворот любого элемента возможен с помощью свойства CSS3 transform. Оно поддерживается всеми современными браузерами (с префиксами) и допускает изящную деградацию, к примеру:

#myelement {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

Хорошая штука. Однако вращается элемент целиком — его содержимое, границы и фоновая картинка. Что делать, если вы желаете повернуть только фоновое изображение? Или чтобы фон остался на месте, а элемент поворачивался?

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

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

Близится судный день: Opera внедрила префиксы Webkit

Крейг Баклер

В феврале 2012 года мы выложили протокол заседания W3C, на котором Mozilla, Opera и Microsoft обсуждали внедрение префиксов -webkit в не-Webkit-браузеры. Причина: часть разработчиков использует только префиксы webkit — их сайты хорошо выглядят в некоторых браузерах, но рушатся в других, даже если они предлагают такой же уровень поддержки CSS3. Проблема особенно распространена в мобильных браузерах и многие разработчики не в состоянии выйти за рамки своих высокотехничных устройств Apple или Android.

Опера анонсировала поддержку 14 CSS3-свойств Webkit в своём Mobile Emulator. Реализация в конечном итоге дойдёт до всех выпусков настольных и мобильных браузеров. Если вы считаете, что «Opera это малая доля рынка», подумайте еще раз: это наиболее используемый мобильный браузер в мире.

Возможно, я чрезмерно драматизирую, но на ум приходит известная фраза Чарлтона Хестона: «Они действительно это сделали. Вы маньяки. Вы взорвали это!».

Два новых предложения по преодолению кризиса с вендорными префиксами

Крейг Баклер

Веб-разработчики начали беспокоиться по поводу кризиса с вендорными префиксами с февраля 2012 года. Подводя итог, вот что должно случиться в идеальном мире.

  1. Производители браузеров внедряют экспериментальные свойства CSS3 с помощью собственных префиксов, например: -webkit-transform, -moz-transform, -ms-transform, -o-transform.
  2. Разработчики могут использовать современные технологии без нарушения кроссбраузерности. Чтобы свойства работали везде, они могут перечисляться с префиксами или без них.
  3. После того как свойство входит в рекомендацию W3C, все производители браузеров могут обеспечить стабильное свойство без префикса, например, transform.
  4. При необходимости разработчики могут удалить свойства с префиксами из своих стилей. Однако это не является строго обязательным, если свойство без префикса определяется последним в правилах CSS.

Близится катастрофа с вендорными префиксами

Крейг Баклер

Разработчики с любовью и ненавистью относятся к вендорным префиксам CSS, которые позволяют быть на острие прогресса за счёт многословных объявлений:

background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -ms-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

Это хорошо работает в теории, но вот что происходит в реальности.

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

Как сделать загнутые уголки на CSS3 без картинок

Крейг Баклер

В моих предыдущих статьях мы изучили как делать словесные пузыри и ленты без дополнительных HTML-элементов или картинок. Это было достигнуто с использованием эффектов CSS3 применяемых к псевдоэлементам :before и :after. В этой статье мы задействуем похожий приём для создания эффекта загнутых уголков бумаги.

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

Как сделать ленты на CSS3 без картинок

Крейг Баклер

В моей прошлой статье Как сделать словесный пузырь на CSS3 без картинок мы видели, как псевдоэлементы :before и :after используются для создания различных эффектов. В этой статье мы воспользуемся подобными техниками для создания разнообразных лент.

Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега <h2>.

Как сделать словесный пузырь на CSS3 без картинок

Крейг Баклер

Я помню как делал первый свой словесный пузырь без картинок много лет назад. Для этого потребовалась многострочная функция JavaScript для введения элементов в DOM и ужасный CSS, который выглядел довольно страшно и не так хорошо работал в IE5.

CSS3 начинает менять нашу жизнь к лучшему. Теперь можно создать симпатичный словесный пузырь, который работает во всех браузерах, использует единственный элемент HTML, несколько строк кода CSS3, без картинок и без всякого JavaScript.

Хлебные крошки

Создайте страницу как показано на рисунке ниже. Документ должен корректно отображаться во всех современных браузерах, в IE8 и ниже — градиент, тени и скругления можно не выводить.

Хлебные крошки

Рис. 1. Хлебные крошки

Страницы