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

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

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

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

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

CSS-LIVE

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

Найдено 47 записей
Химия CSS-гридов

На StackOverflow один участник задал вопрос, как сверстать на CSS Grid периодическую таблицу Менделеева. Примеров периодических таблиц на гридах в Сети навалом, есть и очень симпатичные. Но чаще всего они стремятся воспроизвести лишь внешний вид таблицы, порой вручную расставляя элементы по клеткам. А я вдруг осознал, до чего же это удачный пример для изучения гридов: ведь их логика удивительно похожа на ту внутреннюю логику, по которой строится сама периодическая система. И воспользовавшись этим, мы можем не просто «нарисовать» таблицу, но и легко адаптировать ее к любой ширине и форме экрана! Химические элементы как грид-элементы Как мы помним со школьных лет, периодический закон в химии вытекает из строения электронных орбиталей, описываемых квантовыми...

Перевод статьи Components and concerns c сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита Порой мы слишком увлекаемся ложными противопоставлениями в мире веб-дизайна и веб-разработки. Недавно я подметил одно, регулярно всплывающее в области дизайн-систем и компонентов. Это насчет разделения ответственности. У веба долгая история разделения структуры, представления и поведения с помощью HTML, CSS и JavaScript. Оно исправно служит нам. Если писать код в таком порядке, добиваясь, чтобы нечто работало (в какой-то мере), прежде чем добавлять следующий слой, результат будет надежным и устойчивым к сбоям. Но в теперешнюю эру компонентов многие указывают, что есть смысл разделять вещи в соответствии с их функцией. Вот что пишет...

Перевод статьи Effective Standards Work, Part 2: Threading the Needle с сайта infrequently.org для css-live.ru, автор — Алекс Рассел Нас слишком часто не устраивает процесс стандартизации в вебе. Этот цикл статей рассматривает, какие силы в этом участвуют, как мы улучшаем ситуацию, и как можно эффективнее направлять развитие новинок. В первой части («Оперативная обстановка») речь шла о постоянных вызовах для стандартов и о силах, порождающих недоразумения. В ней также описывалась динамика экосистемы, из-за которой менять что-либо так трудно, даже если не брать в расчет изменчивых корпоративных стратегий браузерных компаний. Важнейшие ингредиенты Продвигать новые функции в такой среде чрезвычайно сложно. Однако, вооружившись четким пониманием ситуации, можно...

Перевод статьи Resilient, Declarative, Contextual с сайта keithjgrant.com для css-live.ru, автор — Кит Грант Я долго размышлял о том, из чего складывается философия CSS. Одни вроде бы «понимают» её, а другие нет. Мне всегда казалось, что если бы можно было прямо указать на это, то, возможно, CSS обрёл бы больше смысла для тех, кто «бодается» с ним. Одной из моих целей мотивации при написании книги «CSS изнутри» было постараться сформулировать некоторые из этих вещей. Сегодня я подойду с другой стороны. Я взгляну на три основных характеристики CSS, которые отличают его от обычных языков программирования: устойчивость, декларативность и контекстуальность. Полагаю, что понимание этих аспектов CSS — ключ к мастерству в нем. CSS устойчивый Если случайно удалить...

11 лучших англоязычных ресурсов для верстальщиков

Для верстальщика и уж тем более веб-мастера знание английского должно входить в список обязательных навыков. И дело даже не в том, что английский необходим для того, чтобы понимать спецификации. Если вы намерены расти в своей профессии, вам придется много учиться, то есть читать книги, сайты и форумы. И вы не продвинетесь далеко, если будете ограничиваться русскоязычными ресурсами. Потому что самые толковые тексты выходят на английском. CSS Live и онлайн-школа английского языка Skyeng объединили усилия и нашли 10 отличных ресурсов, которые помогут вам в работе – если, конечно, вы знаете английский. Учиться Tutlpus Бесценный (и бесплатный) ресурс с видеоуроками и интерактивными заданиями. Более 270 курсов на все случаи жизни, как для новичков, так и для тех,...

Состояние дел в вебе: главные стратегии оптимизации изображений

Перевод статьи State of the Web: Top Image Optimization Strategies с сайта dougsillars.com для css-live.ru, с разрешения автора — Дуга Силларса Изображения — ключевая часть веба. Красивые образы так и манят посетителя всё глубже в историю, которую пытается донести ваша страница — будь то новости, развлечения или электронная коммерция. Но при всей важности картинок, их большой размер может (потенциально) замедлить загрузку страниц, и пользователи в итоге просто уйдут с сайта. На самом деле, HTTP-архив показывает, что средний мобильный сайт на ~50% состоит из картинок (по объему в килобайтах). На протяжении нескольких лет этот процент был относительно постоянным, но тем не менее сайты увеличиваются, а значит, размер изображений — тоже. Фактически, по...

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

Подборка свежих эффектов, интересных идей и полезных наработок. «Мона Лиза» из линий Технологии: canvas, JS. Автор: Никита Дубко (@dark_mefody) Посмотреть живой пример Крестики-нолики на CSS Технологии: CSS, SVG, CSS-анимация. Автор: Jhey (@jh3y) Посмотреть живой пример Портрет Криса Койера Технологии: SVG, CSS, CSS-анимация, Vue.js, Tween max.js. Автор: Дэвид Стоут (@davidastout3) Посмотреть живой пример Переключатель в виде теннисного мяча Технологии: SVG, React.js, GSAP. Автор: Крис Ганнон (@chrisgannon) Посмотреть живой пример CSS-анимация иконок меню Технологии: CSS, CSS-трансформации. Автор: Оливия (@oliviale) Посмотреть живой пример Демонстрация работы функции crossfade() Под иллюстрацией есть ползунок для изменения значения cross-fade. Технологии...

Вчерашняя (уже третья за май 2018 г.) телеконференция Рабочей группы CSS принесла несколько сюрпризов: в функцию calc() добавили долгожданную возможность делить значения одинаковой размерности друг на друга (например, calc(500px / 100vw)), получая безразмерные коэффициенты (а в перспективе — вообще делать любые математически допустимые операции с CSS-величинами, скажем, высчитывать площади фигур в квадратных пикселях, умножая высоту на ширину, или делить расстояние на время, получая скорость анимации в пикселях в секунду). А у псевдоклассов :matches(), :not() (со списком аргументов) и :has() из модуля селекторов 4 уровня изменились правила специфичности — теперь она не будет высчитываться динамически в зависимости от того, какой аргумент из списка реально...

Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого

Перевод статьи Where Lines Break is Complicated. Here’s all the Related CSS and HTML. с сайта css-tricks.com для CSS-live.ru, автор — Крис Койер Скажем, есть действительно длинное слово в каком-то тексте, у контейнера которого недостаточно ширины для него. Типичная причина этого — длинный URL, просочившийся в текст. Что происходит? Зависит от CSS. Как этот CSS управляет раскладкой и как он этим текстом распоряжается. Вот как может выглядеть ситуация с не поместившимся текстом: Текст, вылезающий из бокса — визуальная проблема. Первое решение — overflow: hidden;, как этакий «лобовой» прием, чтобы не дать тексту (и чему угодно) высовываться. Но от этого пострадает доступность текста. В некоторых десктопных браузерах для выделения текста можно три раза кликнуть...

Перевод статьи 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...