Каталог RSS-каналов
Статистика

RSS-каналов в каталоге: 3394

Добавлено сегодня: 0

Добавлено вчера: 0

Hi-Tech / Интернет

CSS-LIVE

Жизнь во фронтенде

Найдено 38 записей

Перевод статьи eqio — A simple, tiny alternative to element/container queries с сайта medium.com для css-live.ru, автор — Мэтт Стоу Классические принципы отзывчивого дизайна больше не отвечают нашим, разработчиков дизайн-систем и библиотек компонентов для веба, потребностям. Если уж с этим согласен Итан Маркотт, основатель понятия «отзывчивый дизайн», то наверняка это правда. Когда мы делим наши компоненты на отдельные многоразовые частички с помощью React и Vue, и аналогично строим CSS-архитектуру, чтобы она подходила классам с ограниченной областью видимости или библиотекам CSS-in-JS, всё прекрасно… но лишь до поры. Когда надо использовать компонент совсем не в том контексте, для которого он создавался, или компонент регулярно меняется на какие-то...

Более доступная разметка с display:contents

Перевод статьи More accessible markup with display: contents с сайта hiddedevries.nl для css-live.ru, автор — Хидде де Врис CSS-гриды (CSS Grid Layout) позволяют превратить элемент в грид (сетку) и располагать по нему непосредственных потомков («детей») этого элемента. С учетом этого бывает соблазн использовать более «плоскую», однородную разметку, но чем менее разметка осмысленна, тем хуже обычно ее доступность. C display:contents можно размещать в гриде «внуков», благодаря чему у нас могут быть и доступная разметка, и красивая верстка. Давайте разберемся в этом подробнее! Ниже я более подробно поясню, что я имею в виду под «детьми» и «внуками», а затем покажу, как можно улучшить дело с помощью display:contents. Примечание: в браузерах это пока работает...

Перевод статьи CSS Motion Path beyond the Big Three Properties с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона . Хотя работает она только в Chromium-браузерах, а черновик ее спецификации всё еще активно разрабатывается, анимация движения по траектории (CSS Motion Path) немного повзрослела за эти три года с момента первой реализации в Chrome 46. Я уже описывал основы главного применения CSS Motion Path в виде трёх свойств — offset-path, определяющее траекторию, вдоль которой может двигаться элемент, offset-distance — для позиционирования элемента на этой траектории, и offset-rotate, которое отвечает за то, какой стороной вперед движется элемент по траектории. После того моего обзора спецификация подросла на несколько...

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

Подборка свежих эффектов, интересных идей и полезных наработок. WebGL-слайдер с искажением Технологии: CSS-анимация, Three.js, jQuery.js, Tweenmax.js. Автор: Аш Торнтон (@ashthornton) Посмотреть живой пример Анимация кнопок выравнивания Технологии: CSS, jQuery.js, Tweenmax.js. Автор: Валерий Аликин (@AlikinVV) Посмотреть живой пример Интересный дизайн галереи Технологии: CSS, CSS-трансформации, Photoswipe.js, lazysizes.js. Автор: Михал Нивитала (@mican) Посмотреть живой пример Create.js + Oreo Технологии: canvas, create.js. Автор: Себастьян ДеРосси (@derossi_s) Посмотреть живой пример Значки Мстителей Технологии: CSS, clip-path, JS. Автор: Jhey (@jh3y) Посмотреть живой пример Хронологическая лента Технологии: SVG, CSS, JS. Автор: Стив Гарднер (@steveg3003...

Перевод статьи Why is not using the CSS cascade a problem? с сайта www.quirksmode.org для css-live.ru, автор — Питер Пол Кох Когда я объявил, что собираюсь написать кое-что для JavaScript-разработчиков, не понимающих CSS, многие (включая Джереми) говорили, что крайне необходимой будет глава о каскаде и наследовании, поскольку слишком многие JS-разработчики, кажется, их не понимают. Сначала я было согласился, но потом во мне завелись сомнения, из-за которых я и пишу эту заметку. Насколько я могу видеть, проблема не в том, что JavaScript-разработчики не понимают каскада, а в том, что они не желают его использовать. Но проблема ли это? Глобальная область видимости В CSS есть только глобальная область видимости. Правило button.primary влияет на все кнопки с...

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

Подборка свежих эффектов, интересных идей и полезных наработок. Анимация про дизайнеров на CSS Технологии: CSS-анимация. Автор: Юлия Музафарова (@miocene) Посмотреть живой пример Лошадь в движении Эдварда Мейбридж Технологии: CSS-анимация, вариативный шрифт. Автор: Лоуренс Пенни (@lorp) Посмотреть живой пример Головоломка «Ханойская башня» Цель — переместить все диски с левой «башни» на правую. За один раз можно перемещать только один диск. При этом больший диск нельзя помещать на меньший. Технологии: CSS. Автор: Бенс Сабо (@finnhvman) Посмотреть живой пример Выбор любимого времени дня Внизу, под окном можно выбрать время дня. Технологии: SVG, CSS, JS. Автор: Оливия (@oliviale) Посмотреть живой пример SVG-переключалка между табами Технологии: SVG, CSS, JS...

Перевод статьи Another Collection of Interesting Facts About CSS Grid с сайта css-tricks.com для CSS-live.ru, автор — Мануэль Матузович В прошлом году я собрал коллекцию интересных фактов о CSS Grid Layout после моего мастер-класса. В этом году я работал над другим мастер-классом и узнал ещё несколько увлекательных фактов о нашей любимой спецификации раскладки. Я не жадный, поэтому ещё раз с радостью поделюсь своими знаниями и выводами с вами, с сообществом CSS-Tricks. Как работает сокращённая запись grid Читать и понимать спецификацию гридов — да, впрочем, и любую другую — порой бывает крайне сложно К примеру, я только спустя какое-то время понял, как правильно использовать сокращённую запись grid: | / [ auto-flow && dense? ] ? | [ auto-flow && dense...

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

Подборка свежих эффектов, интересных идей и полезных наработок. Ползунок в научном стиле Технологии: SVG, GSAP. Автор: Крис Ганнон (@chrisgannon) Посмотреть живой пример Адаптивная таблица с возможностью сортировки данных Технологии: CSS, JS, jQuery. Автор: Эрин Э. Салливан (@erinesullivan) Посмотреть живой пример Демонстрация контрастности текста и фона Можно менять цвет текста и фона в обоих частях. Технологии: CSS-переменные, JS. Автор: Мустафа Энес (@pavlovsk) Посмотреть живой пример Эффект наведения на кнопку Технологии: SVG, CSS, CSS-трансформации. Автор: Андреас Шторм (@andreasstorm) Посмотреть живой пример Тоннели Технологии: Three.js, GLSL. Автор: Лиам Эган (@shubniggurath) Посмотреть живой пример Графический постер на CSS-гридах Технологии...

Перевод статьи Focusing on Focus Styles с сайта css-tricks.com для CSS-live.ru, автор — Эрик Бейли Не у каждого пользователя интернета есть мышка под рукой. При чтении со смартфона это очевидно! К тому же есть и другие способы ввода, которыми люди решают свои задачи. И для них нужны стили для фокуса. Люди Люди сложно устроены. Мы не всегда последовательны, а наши решения не всегда выглядят логичными. Порой мы даже делаем что-то просто так. Нам легко надоедает возиться и ковыряться с вещами, чтобы они лучше соответствовали нашим потребностям, независимо от их первоначального предназначения. Люди также смертны. Мы можем заболеть или пораниться, случаются и обе беды сразу. Иногда это на время, а иногда — на всю жизнь. Как бы то ни было, порой привычные способы...

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

Подборка свежих эффектов, интересных идей и полезных наработок. Солнечная система на CSS Переключаться между планетами можно навигацией слева или кликом на изображение. Под описанием планеты есть рабочая кнопка «Read more» («Подробнее»). Технологии: CSS, CSS-анимация, CSS-трансформации. Автор: Джейми Коултер (@jcoulterdesign) Посмотреть живой пример Дом с растущей крышей Тяните за крышу вверх или вниз для изменения количества этажей. Технологии: CSS, CSS-гриды, JS, jQuery.js. Автор: creme (@creme) Посмотреть живой пример Трехмерная мозаика из шестиугольников Технологии: Three.js, hex-grid.js, TweenMax.js. Автор: Иван Хуарес Н. (@radixzz) Посмотреть живой пример Кнопка скрытия/отображения пароля на CSS Нажмите на кнопку-глаз. Технологии: CSS. Автор: n7best...

Перевод статьи A f*cking rant about f*cking const vs f*cking let с сайта https://jamie.build/ для css-live.ru, автор — Джеймс Кайл Не хотел я быть автором этой заметки, но Крис меня вынудил, так что этот хмырь и есть главный виновник. А я просто попал под раздачу. Но вы все изрядно перебираете с const в своем JavaScript-коде, и меня это хоть самую чуточку, но бесит. 1. const ни хрена не работает, и мы все это знаем Для начала давайте признаем, что толку от const ноль целых хрен десятых, и смысл ему мы просто выдумываем… const ЭТО_НЕ_МЕНЯЕТСЯ = { верно: "?" } ЭТО_НЕ_МЕНЯЕТСЯ.верно = "а вот фиг"; ЭТО_НЕ_МЕНЯЕТСЯ.нафиг = "живите теперь с этим"; const не предполагает какой-либо неизменности самого значения, оно лишь подразумевает неизменность привязки...

Хотя у языка CSS уже давно нет версий (т.е. «CSS3» уже никогда не будет «готов», а «CSS4» и выше вообще не будет), Рабочая группа CSS периодически выпускает «снимки» (snapshots), отражающие реальное состояние CSS на тот или иной момент. Последний такой «снимок», CSS-2017, вышел год назад, с тех пор W3C решил сделать их ежегодными — в чем-то похоже, как у спецификаций HTML5.x и ES20xx. Уже есть редакторский черновик очередного «снимка», CSS-2018. Как и раньше, основная аудитория этих «снимков» — разработчики браузеров: что уже можно реализовывать (в т.ч. без префиксов и флагов), а с чем пока лучше экспериментировать поосторожнее, а то и подождать вообще. Но раздел «Официальное определение CSS» — список технологий, которые сам W3C признал актуальными на...

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

Подборка свежих эффектов, интересных идей и полезных наработок. SVG-рисунок при прокрутке Технологии: SVG, CSS, jQuery.js, Scrollify.js. Автор: Али Клейн (@AliKlein) Посмотреть живой пример Необычный слайдер в стиле ползунка Технологии: JS, Anime.js. Автор: lmgonzalves (@lmgonzalves) Посмотреть живой пример Многоугольники Удерживая курсором, фигуры можно перемещать. Обратите внимание, что их цвет меняется в зависимости от положения относительно друг друга (красный, зеленый, синий). Технологии: canvas, JS, Pixi.js. Автор: Блейк Боуэн (@osublake) Посмотреть живой пример Анимация «Старцы» по мотивам Лавкрафта Освещение меняется в зависимости от положения курсора. Технологии: JS, Three.js, GLSL. Автор: Лиам Эган (@shubniggurath) Посмотреть живой пример Разворот...

Аддитивная анимация с помощью Web Animations API

Перевод статьи Additive Animation with the Web Animations API с сайта css-tricks.com для CSS-live.ru, автор — Дэн Уилсон Эти возможности пока что не поддерживаются ни одним стабильным браузером. Однако, всё, о чем я сейчас расскажу, уже есть в Firefox Nightly, и ключевые части есть в Chrome Canary (при включенном флаге «Экспериментальные возможности веб-платформы»), поэтому во время чтения этой статьи я рекомендую использовать один из этих браузеров, чтобы увидеть максимум возможностей в действии. Какой способ анимации в вебе вы бы ни предпочли, настанет время, когда вам потребуется анимировать одно свойство в отдельных анимациях. К примеру, у вас есть эффект по наведению, масштабирующий изображение, и событие клика, по которому вызывается сдвиг — оба они...

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

Подборка свежих эффектов, интересных идей и полезных наработок. Трехмерный городок Кликом и удерживанием курсора можно «крутить» пейзаж. Эффектнее смотрится в полностраничном режиме. Технологии: canvas, JS. Автор: Дэйв ДеСандро (@desandro) Посмотреть живой пример Перетасовка карт на Vue Кнопкой Shuffle колода перетасовывается. Кнопками Slow — Medium — Fast можно управлять скоростью. Технологии: CSS, Vue.js. Автор: Hassan Dj (@itslit) Посмотреть живой пример Анимация страницы отписки от рассылки Нажмите на кнопки для просмотра анимации. Технологии: SVG, CSS-трансформации, GSAP. Автор: agathaco (@agathaco) Посмотреть живой пример Генератор домиков Новый набор генерируется по клику в любом месте холста. Технологии: SVG, CSS, JS. Автор: smlsvnssn (@smlsvnssn...