Магия CSS #9 — Обтекание тени box-shadow вокруг нестандартной фигуры

preview_player
Показать описание
Разберем, как создать нестандартную фигуру, которая полностью обтекается тенью. Макет размещен в Adobe XD, а сверстанный пример размещен на сайте Codepen.

***

***

  1. Анна Блок
  2. html css
  3. magic css
  4. frontend
  5. верстка сайтов
  6. верстка css
Рекомендации по теме
Магия CSS #9 0:11:45

Магия CSS #9 — Обтекание тени box-shadow вокруг нестандартной фигуры...

Магия CSS #8 0:10:01

Магия CSS #8 — Обтекание текста полностью вокруг нестандартной фигуры...

Магия CSS #1 0:14:58

Магия CSS #1 — Обтекание текста вокруг нестандартных форм...

3️⃣ метод создания 0:00:43

3️⃣ метод создания треугольника на CSS 🔺

Обтекание в HTML 0:06:37

Обтекание в HTML и CSS - Выпуск 6/13

Обтекание блоков и 0:13:07

Обтекание блоков и очистка обтекания

Магия CSS #3 0:10:00

Магия CSS #3 — Методы обрезки изображений при помощи CSS и SVG...

Shape-outside обтекание картинки 0:02:53

Shape-outside обтекание картинки текстом

Урок№7. Как сделать 0:07:46

Урок№7. Как сделать обтекание картинки текстом в html.Как сделать обтекание текста в html. Тег float...

Магия CSS #4 0:13:49

Магия CSS #4 — Glitch для любого текста на сайте

Уроки по CSS3 0:06:47

Уроки по CSS3 | Обтекание элемента. Свойство float

CSS свойства: Классные 0:00:50

CSS свойства: Классные кнопки на CSS

Flat Long Box 0:03:02

Flat Long Box Shadow Using CSS & Vanilla Javascript | CSS Box Shadow Effects

Магия CSS #11➤ 0:09:17

Магия CSS #11➤ Вкладки(tabs) на #CSS

CSS. Урок 21. 0:11:10

CSS. Урок 21. Магия html и css

Amazing Box Shadow 0:04:29

Amazing Box Shadow // Only html and css

CSS3 #11 Границы 0:09:57

CSS3 #11 Границы и тени (Borders & Shadows)

9. CSS рамка 0:14:22

9. CSS рамка border, обводка outline, тени box-shadow, фильтры filter

Урок 6. CSS 0:13:45

Урок 6. CSS обтекание блоков

CSS позиционирование (CSS 0:09:59

CSS позиционирование (CSS position)

CSS Тень Внутри 0:04:08

CSS Тень Внутри PNG Картинки

Box shadow HTML 0:06:12

Box shadow HTML CSS

CSS уроки с 0:00:56

CSS уроки с нуля. Свойство box-shadow

CSS Basics: Тени, 0:14:55

CSS Basics: Тени, скругления, вес текста

Комментарии
Автор

Наконец-то логотип своего сайта в порядок приведу. Благодарочка

ДокторнаПриколе
Автор

но при таком подходе есть минус небольшой. нельзя потом поменять цвет всего .card-item так как круг тоже вынесен в картинку.

olegpelin
Автор

Полезно, давай ещё видео на такую тематику)

Андрій-тр
Автор

пример из видео сработает только если у картинки есть круг на заднем фоне, размером с .card-circle, который своей непрозрачностью закроет тень НА самом .card-circle. Если же такого нет, то загоняем изображение в див, ставим ему размеры .card-circle, фон и бордер-радиус.. Должно сработать также

lordrawl
Автор

Знаешь как.. задачку подкину.. есть представь прямоугольник с закруглёнными краями ВОВНУТРЬ.. есть фон какое нить изображение у элемента body) у самого прямоугольника есть тень и что самое главное обводка по контуру.. радиус внутренний ну допустим 40 пикселей внутрь.. если у тебя появится вдохновение, то можешь попробовать решить) сразу говорю что задачка непростая)) как раз было б интересно в видео что то такого плана увидеть) а по этому уроку молодец) продолжай в том же духе

-web
Автор

Значение border-radius: 100% вынуждает браузер делать дополнительные ненужные вычисления, для закругления элемента достаточно указать 50%

Midnightrus
Автор

Привет, а какой ты заканчивала институт? Или сама училась?

ВладиславКозаков-лн
Автор

Есть способ попроще
.card-item{
filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.1));
}

Александр-шхш
Автор

Открыл пару часов назад видео, было 9 просмотров. Обновил страницу сейчас, 9 коментов...

poniknipo