Архив тегов: CSS

Оформление незагруженных изображений

Перевод статьи Styling Broken Images с сайта bitsofco.de, опубликовано на css-live.ru с разрешения автора — Ире Адеринокун.

Незагруженные изображения уродливы

Эта картинка не загрузилась. Безобразие, правда?

Но им необязательно всегда быть такими. Можно воспользоваться CSS для оформления элемента <img>, чтобы впечатление от них было лучше, чем по умолчанию.

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #28

Подборка свежих эффектов, интересных идей и полезных наработок.

Водопад

Сцена с водопадом сделана в WebGL.
Автор: CJ Gammon (@cjgammon)

ВодопадПосмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #27

Подборка свежих эффектов, интересных идей и полезных наработок.

Космос

Анимированные точки создают холст в виде космоса в canvas. Автор: Aitor (@AzazelN28)

КосмосПосмотреть живой пример

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #26

Подборка свежих эффектов, интересных идей и полезных наработок.

Тоннель

Анимированный тоннель состоящий из точек в canvas.
Автор: Ник Шефилд (@nicksheffield)

ТунельПосмотреть живой пример


(далее…)

Свойство background-clip и его применения

Перевод статьи The `background-clip` Property and its Use Cases с сайта css-tricks.com, переведено для css-live.ru с разрешения автора — Аны Тюдор.

background-clip — одно из тех свойств, о которых я давно знала, но почти не использовала. Может, лишь пару раз в ответах на Stack Overflow. До прошлого года, когда я начала создавать эту огромную коллекцию ползунковых регуляторов (слайдеров). Некоторые дизайны, что я решила воспроизвести, были довольно-таки сложны, а мне на каждый ползунок отводился один-единственный элемент, и им как назло оказался input, к которому даже псевдоэлементов толком не добавить. Хоть в некоторых браузерах такое и работает, то, что оно работает — на самом деле баг, и мне не хотелось на это полагаться. Так что в итоге мне пришлось использовать фоны, рамки и тени в изобилии. И я многому научилась при этом, и в этой статье делюсь некоторыми их тех уроков.

Первым делом давайте посмотрим, что такое background-clip и что оно делает.

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #25

Подборка свежих эффектов, интересных идей и полезных наработок.

3D-самолёт

Анимированный самолёт на CSS.
Автор: bodiche (@bodiche)

3D-самолётПосмотреть живой пример


(далее…)

Мысли вслух о подсетках в CSS Grid Layout

Перевод статьи Subgrids thinking out loud с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

Итоги наших размышлений о функции подсеток из спецификации CSS Grid Layout.

За последние недели подсетки стали острой темой, в основном из-за статьи «Подсетки в Grid Layout жизненно важны» Эрика Мэйера (кстати, первод есть у нас на сайте — прим. перев.), в которой он привёл несколько примеров того, где подсетки могут оказаться весьма кстати. Эти примеры так или иначе связаны с предыдущей статьёй fantasai на эту же тему. К тому же Рэйчел Эндрю рассказывала про подсетки в своём блоге и в своей последней электронной книге про Grid Layout (что вполне достаточно, чтобы получить представление о синтаксисе и основных функциях грида).

Возможно вы в курсе, что последнее время Igalia работает над реализацией CSS Grid Layout в Chromium/Blink и Safari/WebKit. Как разработчики, мы решили, что неплохо будет поделиться нашим откликом на эту тему, так что на этой неделе команда, работающая над Grid Layout (Серхио, Хави и я) договорились о встрече для рассмотрения функции подсеток. Вот наши первые соображения об этом и первое черновое предложение насчет возможной реализации.

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #24

Подборка свежих эффектов, интересных идей и полезных наработок.

Гипнокуб

Анимированные шестиугольники на CSS.
Автор: Грегор Адамс (@GregorAdams)

ГипнокубПосмотреть живой пример


(далее…)

Еще раз о плавающей метке на CSS

Перевод статьи Revisiting the Float Label pattern with CSS с сайта thatemil.com, опубликовано на css-live.ru с разрешения автора — Эмиля Бьёрклунда (твиттер — @ThatEmil).

Паттерн с «плавающей» меткой — нехитрый паттерн, полюбившийся разработчиками. Не скажу, что сам влюблён в него на 100%, но не смог удержаться и не состряпать быструю демо-реализацию. В этой версии используются несколько приятных трюков для стилизации формы, повстречавшихся мне в последнее время, в частности селектор :placeholder-shown.

Первым делом: это ни в коем случае не готовое практическое решение. Она работает в последних версиях некоторых браузеров — прежде всего в Chrome/Opera и Safari/WebKit. А вот в Firefox с треском проваливается. И учтите, что я не тестировал его как следует.

(далее…)

Подробно о размещении элементов в грид-раскладке (CSS Grid Layout)

Перевод статьи Deep Dive into Grid Layout Placement с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

Полный обзор разных методов позиционирования элементов, предлагаемых спецификацией CSS Grid Layout.

В последние месяцы в рамках моей работы в Igalia я сосредоточенно доделывал те новые/пропущенные места в реализации CSS Grid Layout в движке Blink, что относились к размещению элементов. Вкратце, работа в основном велась по 2 направлениям:

  • Поддержка неявного грида перед явным. Так, чтобы к гриду можно было добавлять полосы не только в направлении заполнения (обычно справа/снизу), но и с противоположной стороны.
  • Правильная интерпретация неизвестных именованных грид-линий. Это случай, когда элемент привязывается к линии под названием «foo», но нигде в гриде нет линий с таким именем.

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

Теперь, когда я всё это доделал, самое время объяснить, как им пользоваться. Хотя мой коллега Серхио уже писал об этом в 2014-м, спецификация с тех пор поменялась, так что, думаю, лучше попытаться объяснить всё целиком с нуля. Эта статья — что-то вроде выжимки с примерами из раздела «Размещение грид-элементов» спецификации CSS Grid Layout.

(далее…)

Display: contents и его новые друзья спешат на помощь

Будни фронтенд-разработки то и дело подбрасывают нам задачки с взаимоисключающими условиями, а ограничения HTML и CSS делают их решение и вовсе невозможным (впрочем, за радость от преодоления этой «невозможности» многие из нас и любят эту работу).

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

Так вот: теперь освободить элементы из-под этого «DOMашнего ареста» можно. Правда, пока только в одном браузере — Firefox (добавлено 25.05.2017: уже не только, в Chrome 58+ примеры тоже работают, но нужно включить флаг «Экспериментальные функции веб-платформы» в chrome://flags). Так что желательно открыть его, чтобы увидеть примеры в действии.

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #21

Подборка свежих эффектов, интересных идей и полезных наработок.

Икосаэдр

Анимированный икосаэдр в canvas.
Автор: Bali Balo (@BaliBaloPG)

ИкосаэдрПосмотреть живой пример


(далее…)

Подсетки в Grid Layout жизненно важны

Перевод статьи Subgrids Considered Essential с сайта meyerweb.com для css-live.ru. Автор — Эрик Мейер.

Модуль Grid layout — невероятно фантастическая штука. Я познакомился с ним подробно во время написания главы про грид-раскладку в четвёртом издании своей книги «CSS: полное руководство», и он позволяет вытворять с раскладками такое, что нам даже не снилось. И, кажется, я понял одну недостающую деталь — мощь и необходимость подсеток.

В подтверждение моих слов, рассмотрим пример, который можно наблюдать в различных формах на этой тестовой странице. Я практически целиком содрал этот пример у Fantasai, но разберу его немного иначе. За основу возьмём форму с разными полями и метками, находящимися в неупорядоченном списке, чтобы позаботиться о доступности и, в принципе, для чтения и удобства, если вдруг CSS не отобразится. Разметка выглядит так:

(далее…)

Первый CSS-модуль 4 уровня в статусе кандидата в рекомендации

На днях рабочая группа CSS в W3C решила напомнить нам, что будущее уже здесь, и без лишнего шума опубликовала CSS-модуль каскада и наследования 4 уровня в статусе кандидата в рекомендации. Это не опечатка. Модуль с «магической» цифрой 4 в названии — мы бы с радостью обозвали его звучным «CSS4», если бы в этом было хоть сколько-нибудь смысла — в статусе, означающем полную теоретическую готовность спецификации. Добро пожаловать в 2016-й!

(далее…)

Заблуждения разработчиков

Перевод статьи Developer Fallacies с сайта heydonworks.com, опубликовано на css-live.ru с разрешения автора — Хейдона Пикеринга.

Время от времени веб-разработчики (и вообще программисты) находят неудачные аргументы в защиту своего выбора технологий, рабочих процессов или организационных схем, а также для принижения чужого выбора. Я видел такое не раз, да и сам порой не удерживался от крепкого словца по такому поводу. Мы особенно уязвимы для неудачных аргументов, поскольку привыкли считать себя логичными. Как же сильно мы порой заблуждаемся.

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

(далее…)