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

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

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

Коридор

Анимированный коридор на JS.
Автор: Рили Шо (@rileyjshaw)

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


(далее…)

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

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

Нейросеть

Анимированная связь между узлами нейронов, в canvas.
Автор: Матэй Копот (@MateiCopot)

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


(далее…)

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

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

Зимний лес

Интерактивная сцена с зимним лесом, на JS.
Автор: cjgammon (@cjgammon)

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


(далее…)

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

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

Спидер Рей

Анимированный мотоцикл из Star Wars, на CSS.
Автор: Кевин Дженнис (@kevinjannis)

Спидер РейПосмотреть живой пример


(далее…)

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

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

Космический шум

Большое количество точек перемещаются и создают подобие магнитных волн, в WebGL.
Автор: Итан Шульман (@EthanShulman)

Космический шумПосмотреть живой пример


(далее…)

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

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

Сфера из кристалов

Анимированная сфера, в WebGL.
Автор: Еити Кобаяши (@ykob0123)

Сфера из кристаловПосмотреть живой пример


(далее…)

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

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

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


(далее…)