Значок технологии, Дизайн иконок, Рисунок, Символ, Альбом для рисования, Спрайты CSS, Текст, Линия, угол, Черное и белое, CSS спрайты png
Значок технологии, Дизайн иконок, Рисунок, Символ, Альбом для рисования, Спрайты CSS, Текст, Линия, угол, Черное и белое, CSS спрайты pngтеги
- угол,
- Черное и белое,
- CSS спрайты,
- Рисование,
- дизайн иконок,
- линия,
- логотип,
- число,
- этюдник,
- условное обозначение,
- технология,
- текст,
- треугольник,
- png,
- прозрачный,
- бесплатная загрузка
Об этом PNG
- Размер изображения
- 512x512px
- Размер файла
- 45.11KB
- MIME тип
- Image/png
изменить размер PNG
ширина(px) высота(px)Лицензия
Некоммерческое использование, DMCA Contact Us
68KB
88KB
org/ImageObject»> Значок графического дизайна, Дизайн иконок, Линия, Площадь, Символ, Треугольник, угол, площадь, дизайн иконок png
512x512px
7.96KB
org/ImageObject»> Значок круга, Слияние, Дизайн иконок, Git, Символ, Текст, Линия, Площадь, угол, площадь, круг png
1600x1600px
24.56KB
11KB
7MB
24KB
77KBcontain ⚡️ HTML и CSS с примерами кода
Свойство contain указывает, что элемент и его содержимое, насколько это возможно, независимы от остальной части дерева документа.
Сдерживание позволяет изолировать подраздел DOM, обеспечивая преимущества производительности за счет ограничения вычислений макета, стиля, цвета, размера или любой комбинации поддеревом DOM, а не всей страницей. Сдерживание также можно использовать для ограничения CSS-счетчиков и кавычек.
Демо
Существует четыре типа изоляции CSS: размер, макет, стиль и отрисовка, которые задаются для контейнера. Свойство представляет собой разделенный пробелами список подмножества пяти стандартных значений или одного из двух сокращенных значений. Изменения содержащихся в контейнере свойств не распространяются за пределы содержащегося элемента на остальную часть страницы. Основное преимущество сдерживания заключается в том, что браузеру не нужно так часто повторно отображать DOM или макет страницы, что приводит к небольшому повышению производительности при отображении статических страниц и большему повышению производительности в более динамичных приложениях.
Использование свойства contain полезно на страницах с группами элементов, которые должны быть независимыми, так как оно может предотвратить побочные эффекты внутренних элементов элемента за пределами его ограничивающей рамки.
Использование значений layout, paint, strict или content для этого свойства создает:
- Новый блок содержимого (для потомков, чье свойство
positionявляетсяabsoluteилиfixed).
- Новый контекст стека.
- Новый контекст форматирования блока.
- image-orientation
- image-rendering
- image-resolution
- object-fit
- object-position
- linear-gradient()
- radial-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- conic-gradient()
- repeating-conic-gradient()
- url()
- element()
- image()
- cross-fade()
- backdrop-filter
- filter
- background-blend-mode
- isolation
- mix-blend-mode
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- @container
- content-visibility
Синтаксис
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /* Keyword values */ contain: none; contain: strict; contain: content; contain: size; contain: inline-size; contain: layout; contain: style; contain: paint; /* Multiple keywords */ contain: size paint; contain: size layout paint; contain: inline-size layout; /* Global values */ contain: inherit; contain: initial; contain: revert; contain: revert-layer; contain: unset; |
Значения
Свойство contain может иметь любое из следующих значений:
- Ключевое слово
noneили - Одно или несколько ключевых слов, разделенных пробелами:
size(илиinline-size),layout,styleилиpaintв любом порядке или - Одно из сокращенных значений
strictилиcontent
Ключевые слова имеют следующие значения:
none- Элемент отображается как обычно, без применения изоляции.
strict- К элементу применяются все правила изоляции. Это эквивалентно
contain: size layout paint style. content- К элементу применяются все правила изоляции, кроме
size. Это эквивалентноcontain: layout paint style. size- Ограничение размера применяется к элементу как в линейном, так и в блочном направлении. Размер элемента можно вычислить изолированно, игнорируя дочерние элементы. Это значение нельзя комбинировать с
inline-size. inline-size- К элементу применяется ограничение встроенного размера. Встроенный размер элемента можно вычислить изолированно, игнорируя дочерние элементы. Это значение нельзя сочетать с
size. layout- Внутренняя компоновка элемента изолирована от остальной части страницы. Это означает, что ничто за пределами элемента не влияет на его внутреннее расположение, и наоборот.
style- Для свойств, которые могут влиять не только на элемент и его потомков, эффекты не выходят за пределы содержащего его элемента. Счетчики и кавычки привязаны к элементу и его содержимому.
paint- Потомки элемента не отображаются за его пределами. Если содержащий блок находится за пределами экрана, браузеру не нужно рисовать содержащиеся в нем элементы — они также должны быть за пределами экрана, поскольку они полностью содержатся в этом блоке. Если потомок выходит за границы содержащего элемента, то этот потомок будет обрезан до границы содержащего элемента.
Спецификация
- CSS Containment Module Level 2
Более 50 потрясающих примеров рисования CSS для #100DaysOfCode Inspiration
Рисование CSS — это искусство создания творческого объекта или рисунка только с использованием кодов CSS. Это забавная задача, которая показывает нам, чего разработчики интерфейса могут достичь с помощью чистого CSS.
Иногда к рисунку css добавляется анимация, чтобы сделать его более интересным.
Когда я впервые увидел рисунки CSS, я не поверил, что CSS можно использовать для создания таких рисунков. Я думал, что это было разработано некоторыми дизайнерскими приложениями, такими как Adobe Illustrator или CorelDraw, пока не увидел коды, подтверждающие, что это чистый CSS.
В большинстве стилей рисунка используется комбинация градиентов, псевдоклассов (:after и :before) и анимации css3.
Недавно я увидел в Твиттере #100DaysOfCode, что многие разработчики демонстрируют свои рисунки CSS. Там проделывали потрясающую работу, но я видел, что некоторым из них не хватает дизайнерского вдохновения.
Так как я тоже front-end разработчик, я могу понять, что иногда мы не имеем никакого представления о том, что мы должны делать, особенно когда речь идет о дизайне или рисовании.
Я помню, что когда-либо видел много потрясающих рисунков CSS, демонстрируемых в Codepen.
Затем я прихожу к мысли, что выбор и сбор лучших из них будет полезен для вдохновения других разработчиков, особенно новичков.
Итак, в этом посте я составляю список лучших рисунков CSS, которые вы можете использовать в качестве вдохновения. Давайте посмотрим!
Содержание
Лучшие примеры рисования CSS
1. У стены | Чистый CSS-рисунок Атанаса Атанасова
2. Король и муха, Альваро Монторо
3. Tron Skyline, Джорди Рю
4. Просмотр улиц и автомобильная анимация, Мохаммед Алозаиби
5. Codevember, день 23: рисование на чистом CSS, жизнь программиста! Nooray Yemon
6. Мальчик и его дрон Tucker Massad
7. CSS Lighthouse (Pure CSS Drawing/Animation) Tucker Massad
8. The Flying Robot (Pure CSS Drawing/Animation) Tucker Massad
9. Kitty and The Submarine (Pure Рисунок/анимация CSS) от Tucker Massad
10. CodePen Home Night Train Рисунок CSS + анимация Эйны О
11. Pure CSS Responsive French Press Дарио Корси
12.
Tank All The Things Хьюго Жироделя13. Pure CSS Mini Thor Матеуса Феррейры
14. Электрическое пианино Джоша Фрая
15. Иллюстрация CSS – контроллер Xbox от Элли
16. Часы Pure CSS от Элли
17. Цифровое радио от Элли
18. Город | Чистый CSS-рисунок от Serg
19. Спасите и полюбите свой дом, Ахмад Шадид
20. Для Беатрикс, Паоло Дузиони
21. Логотип Coderbits на чистом CSS, Алекс
22. Наше счастливое место, Паоло Дузиони,
23. Контроллер SNES, автор Time Pietrusky
Что можно сделать с одним Div
В этом разделе вы увидите список рисунков CSS, которые не только используют чистый CSS, но и используют только один тег div.
24. Single Div CSS Tesla Cybertruck Линн Фишер
25. Single Div CSS Book Search Линн Фишер
26. Pure CSS Single Div Up House, Патрисия Масигла
27. Single Div Accordion, анимация Дэна Уилсона
28. Pure CSS Wall-E, Питер Батчер
29.
K2SO, Джон Кантнер30. Single Div CSS – Camera от Laura Louise
31. Single Div Challenge от yuanchuan
32. The Eye от Мелиссы Кабрал
33. Single Div Violin от Tricia Katz
34. Single Div Grace Hopper от Tricia Katz 90 023
35. Чайная чашка Single Div от Tricia Katz
36. Отдельные иконки div от Chris Ota
37. Codevember 2016: Sunset от Smokie Lee
Подходит для начинающих
38. Чистые смайлики CSS от Abou Bakr Magdy
39. Avocados pure CSS by Julie Park
40. Pure CSS Drawing Dexter by Chi Ho Liu
41. Sleeping Cat Анастасия Гудвин
42. A Slice of Cake by Paolo Duzioni
43. Hijabi Girl by Norhan_ms
9002 2 44. Apeach (Kakao Friends) от zinee45. CSS-рисунок Penguin Александра Д. Кардосси
46. Pure CSS Cactus от Kara Luton
47. Pure CSS Gamerica Logo от Hugo Giraudel
48. CSS Sagwa от Jasmine Wright
49.
Full CSS Penguin от fanchou50 , Cheshire Николаса Слатинера
51. Бонус: Коллекция проектов рисования CSS с одним разделом Линн Фишер
Вот и все. Если вы знаете другие примеры, которых здесь нет, не стесняйтесь предлагать их в комментариях ниже!
100 дней CSS-иллюстраций
В качестве личного веселого проекта я поставил перед собой задачу сделать 100 рисунков CSS за 100 дней. Я опубликовал серию из 10 постов по 10 изображений в каждом. В этой статье есть все изображения в одном посте, а также ссылки на видео о том, как они были нарисованы.
Некоторые изображения являются оригинальными, а некоторые другие вдохновлены или основаны на работах разных художников (предоставляя ссылку на оригинал в описании для этих случаев)… что привело к интересному сочетанию дизайнов и стилей, в то время как я пытался найти свой собственный.
Вот 100 иллюстраций/рисунков, которые я сделал за последние 100 дней. Нажмите на изображение, чтобы увидеть полную иллюстрацию с кодом , и нажмите здесь, чтобы увидеть коллекцию CodePen со всеми рисунками плюс некоторые варианты.
День 1: Акула
Этот рисунок был сделан с нуля как часть CSS-игры, которую я делал на прошлой неделе, и именно он вызвал идею всего проекта по рисованию.
День 2: Человек думает
Этот, как и некоторые другие из списка, вдохновлен/основан на иллюстрации из Dribbble. В частности, этот вдохновлен Faces Ольги Семкло.
День 3: Колибри
Еще один от Dribbble. Это было вдохновлено колибри Ивана Боброва на Dribbble (это и это). А в качестве челленджа я использовал только полукруги (хотя я обманул а, немного их растянув.)
День 4: Лицо
Этот мультфильм с нуля и мне очень нравится, как он получился, со снисходительным взглядом и ухмылкой.
День 5: Монстр с воздушным шаром
Еще один с нуля. Этот основан на серии мультфильмов, которые я делал для своей дочери 5-6 лет назад.
День 6: Карикатура на Эйса Вентуру
И еще один с нуля.
Этого я начал рисовать без четкой цели, потом появилась идея сделать карикатуру на Эйса Вентуру, но я не смог получить хорошее выражение лица.
День 7: Минималистская собака
На основе Coffee Dog Ахсана Кана на Dribbble. Я добавил несколько ушей, но результат мне не понравился, поэтому я их спрятал позже.
День 8: Гарри Поттер
Я сделал две версии этого мультика с нуля. Тот, что ниже, и еще один, в котором Гарри немного стройнее, поскольку моя дочь утверждала, что это не совсем похоже на Гарри Поттера.
День 9: Кардинал
Основано на «Кардинале» Йорда Риквеля на Dribbble. Позже я сделал версии с цветами, пытаясь превратить их в Blue Jay, но ни одна из них не была такой крутой, как оригинал.
День 10: Профиль
Этот мне тоже очень нравится… даже если он не делает чести оригиналу, на котором он основан: Swiss Beatz by Rogie (который в 1000 раз выразительнее и приятнее моего).
День 11: Мастер кодирования
Этот мультфильм был сделан с нуля. Немного иронии, код на заднем фоне такой же, как и на рисунке, так что персонаж сам себя кодирует. Он использует переменные CSS, поэтому его можно легко настроить.
День 12: Любовь/Любовь
Мне нравится кубистская/минималистская анимация Денниса Хугстада. И я сделал версию Love, которая трансформируется в слово Amor при наведении (без анимации).
День 13: персонаж манги
Еще один мультик с нуля. Мне это нравится, хотя я не большой поклонник того, как волосы в итоге выглядят. Этот персонаж манги также можно настроить с помощью переменных CSS (см. строку кода 42).
День 14: Плавающая башня
Мне нужно многое узнать о перспективе и тенях. Что интересно в этом трехмерном замке, так это то, что он был разработан с использованием одного HTML-элемента и с использованием clip-paths и box-shadow.
День 15: Пушистый монстр с табличкой.
Это вдохновлено моим собственным дизайном на Dribbble и является частью той же серии, что и другой мультфильм в этом задании (на самом деле я повторно использовал некоторые части и обманул, используя SVG для фильтров).
День 16: Винерская собака
Этот мультфильм был вдохновлен этим мультфильмом, найденным в Интернете (я не знаю автора, чтобы указать :S) … хотя моя версия приняла симпсоновский оборот.
День 17: Хаэн, Испания
Это иллюстрация замка Святой Екатерины в Хаэне, Испания, городе, где я вырос. Для рисования (особенно области дерева) я использовал clip-path и фильтр drop-shadow , поэтому он может быть виден не во всех браузерах.
День 18: Удивленный мем Пикачу
Версия популярного мема «Удивленный Пикачу», созданная с помощью HTML и CSS. Цитаты меняются каждые 7 секунд, и некоторые из них, вероятно, должны быть вместо Неустроенного Тома.
.. -5 баллов за неправильное использование мема!
День 19: Жираф
Этот мультфильм жирафа основан на другом, который я сделал для своей дочери около 5 лет назад.
День 20: 3D-пейзаж
На основе пейзажа Пархама Маранди на Dribbble. Он использует 3D-преобразования и немного интерактивен: вы можете перемещать мышь по экрану, чтобы увидеть, как ландшафт вращается.
День 21: Ангел и Демон
Первая версия этих персонажей была выпущена в 2010 году, когда я начал разрабатывать библейскую викторину (которая так и не увидела свет). Оригинальные более гладкие и изогнутые, а также имеют ручки: P
День 22: Пукка
Пукка — популярный персонаж, созданный VOOZ. Первоначально это был онлайн-сервис электронных открыток, но вскоре он расширился до веб-анимации, игр, телешоу… Я почти пропустил этот день, поэтому в итоге я выбрал что-то простое .
День 23: Собака из писем
Я пытался сделать что-то подобное тому, что я сделал с этой совой, но у меня ничего не вышло.
Иногда у вас есть дни, чтобы рисовать и любить это, а иногда вы ненавидите результат. Это был один из последних… может быть, я попробую повторить в другой день.
День 24: Мультипликационный персонаж
Еще один настраиваемый мультфильм (измените переменные CSS в строке 33) в стиле манги. Вы можете увидеть, как я закодировал это на этом видео
День 25: Бендер Бендинг Родригес
«Футурама» — это (/было/есть?) потрясающее телешоу, которое дало нам одного из самых знаковых анимационных персонажей всех времен: Бендера! К сожалению, я использовал drop-shadow и немного transform , из-за чего мультфильм выглядит ужасно в некоторых браузерах.
День 26: Привет… наверное…
Еще один мультфильм, который был сделан в спешке… так что он не так уж и хорош, плюс он использует drop-shadow , поэтому он не будет работать во всех браузерах. 😬😰
День 27: Мужское лицо
Это изображение я тоже нарисовал в спешке, но общий результат мне нравится намного больше, чем предыдущее изображение.
Глаза не на 100% проданы, но и не так уж плохо.
День 28: Прорастание растений
Векторный рисунок горшка с растущим внутри растением. Почва имеет небольшую текстуру, и были использованы некоторые фильтры, чтобы добавить размытости.
День 29: Волшебный замок
Еще один замок — последний на какое-то время, обещаю. На этот раз он основан на Disney World/Замке Золушки Дмитрия Штольца на Dribbble… и его кодирование потребовало больше усилий, чем я ожидал изначально.
День 30: Лео Месси
На основе Лео Месси Марка Иддона на Dribble. Эта иллюстрация, на которой Лео Месси празднует гол в ворота «Реала», была сделана только с использованием клипов и фона.
День 31: Радар Дракона
Попытка сделать что-то более «реалистичное». Этот драконий радар (из Dragon Ball) был сделан с использованием разных теней, а кнопка немного анимируется при нажатии.
День 32: Лайн Хаус
На основе коллекции домов Line by Boyko на Dribbble.
Мне понравилась простота и элегантность оригинала.
День 33: Сон
Мультфильм с нуля, который не знал, куда пойдет. По мере того, как он рос, я подумал о том, чтобы добавить книгу и вьющиеся волосы… но он стал слишком сложным, поэтому я уменьшил его, и волосы отошли на задний план.
День 34: Радужный кот
Эта анимированная (и отчасти гипнотизирующая, жуткая и таинственная) иллюстрация основана на «Радужном коте» Райана Ферера на Dribbble.
День 35: Кофе
Просто чашка кофе, нарисованная буквами слова «кофе», и с небольшим режимом наложения для кофейной поверхности.
День 36: Слон
Линейные рисунки в 1000 раз проще с использованием SVG (с путями), чем просто с помощью CSS, и результат всегда более плавный, поскольку соединения идеальны (потому что соединений нет, все это одна линия.)
День 37: Петух Барселуша
Петух Барселуша — один из традиционных символов Португалии.
Это часть легенды, в которой мертвый петух чудесным образом спасает человеку жизнь. Все точки были помещены вручную в единый блок-тень.
День 38: Воин
На основе Warrier — иллюстрация Бойко на Dribbble. Мне понравилась простота оригинала, которая на самом деле превратилась в простоту и в HTML (всего 6 элементов).
День 39: Диппер Пайнс
CSS-адаптация персонажа Диппера Пайнса (из Гравити Фолз). Однажды я сделаю полную версию, а не только верхнюю часть тела.
День 40: Снова в школу
Еще один мультик с нуля. На этот раз, чтобы отпраздновать, что дети вернулись в школу… может быть, мне стоит сделать выпуск 2020 года с ребенком в маске: P
День 41: Выкройка Pacman
Это простой шаблон в CSS: темный фон с белыми кругами вокруг. Давайте добавим box-shadow и второе фоновое изображение (с коническим и радиальным градиентом) и добавим немного движения, чтобы создать анимацию в стиле Pacman.
.. без использования «любого» HTML-тега . Читайте здесь, как это было сделано.
День 42: Бутылка с водой
Пустая бутылка из-под воды.
День 43: Лицо/Толстовка
Я попытался сделать что-то более сложное, чем раньше, и поиграть с тенями. Результат не изумительный, но рисовать мне понравилось. Нажмите на флажок, чтобы добавить/удалить толстовку. И настроить рисунок, изменив переменные в первых строках CSS.
День 44: Навеселе
По результатам дегустации вин — заключение Motionblurstudios на Dribbble.
День 45: Женщина
Вдохновленный «женщиной в черной рубашке с круглым вырезом» Айони Хауст на Unsplash. Этот мультфильм сделан только с помощью clip-paths.
День 46: Эль Чапулин Колорадо
Минималистская версия Чапулина Колорадо, любимого телевизионного персонажа, который пародировал сериалы о супергероях 70-х годов.
День 47: Цветочный горшок
Сегодня я участвовал в хакатоне и почти ничего не успел сделать.
Я стремился к чему-то милому и простому, но результат получился немного примитивным. Я хотел бы повторить это позже.
День 48: Гризер
Мультяшный гризер (например, Дэнни Зуко в Grease или The Fonz <-- пожалуйста, дайте мне знать, что у вас есть эти ссылки, иначе я буду чувствовать себя старым :P).
День 49: Кит
Мне очень понравилось как закончился этот мультик. Это действительно просто — в нем всего 3 цвета и 6 div — но выглядит чисто и красиво.
День 50: Кихот
Дон Кихот — персонаж романа 1605 года (который считается первым современным романом): Гениальный джентльмен Дон Кихот Ламанчский Мигеля де Сервантеса.
День 51: Йети
Версия Йети, которую я нарисовал для игры давным-давно и которую так и не опубликовал.
День 52: Демон
Я собирался набрать 666 подписчиков на Codepen, поэтому original-me решил сделать мультфильм с изображением демона.
День 53: Щенок
Когда я начал рисовать этот мультфильм с нуля, он вскоре стал похож на Ежика Соника… так что я немного изменил его и превратил в собаку. Вот видео как это было сделано.
День 54: Человек в HTML-футболке
Я опубликовал это за день до этого, и у меня было мало времени. Тем не менее результат достойный. Я тоже записал этот процесс и выложил его на Youtube.
День 55: Рыба кои
Этот мультфильм основан на этом рисунке на странице Pinterest Urban Threads. Мне очень понравилась простота рисунка, и мне нравятся эти разноцветные рыбки.
День 56: Питер Гриффин
Минималистская версия Питера Гриффина, персонажа телешоу Гриффины.
День 57: Велосипед
На основе «M is for Motion» Эндрю Понса для Big Vision на Dribble. Поскольку в этой иллюстрации используется конический градиент, в Firefox он не будет таким же.
День 58: CSS Мафальда
Куино был одним из самых ярких и вдохновляющих карикатуристов на испанском языке.
Ушел из жизни 30.09.2020. Мафальда — один из его самых любимых персонажей.
День 59: Супермен/Кларк Кент
Наведите указатель мыши на Супермена, чтобы рисунок изменил цвета и формы и превратился в Кларка Кента. Я записал, как он разрабатывался, и его можно посмотреть на Youtube.
День 60: Пропавшее лето
Давно хотел сделать пейзаж. Это немного просто (всего 6 div s) и включает в себя успокаивающую анимацию волны.
День 61: Не впечатлен
Этот мультфильм был нарисован с нуля с лицом невпечатленного человека. Как это было сделано, вы можете посмотреть в этом видео.
День 62: Молодая женщина с табличкой.
Еще один мультик с нуля. На этот раз это молодая женщина с табличкой с французским лозунгом May’68.
День 63: Парень с V-образным вырезом
И еще один мультик с нуля… и в другом стиле, чем предыдущие два. На ютубе есть видео как делался этот мультик.
День 64: Голосуй!
Это была попытка сделать простой логотип/баннер с помощью HTML и CSS. До президентских выборов в США оставалось 27 дней, и основными кандидатами были Трамп (известный своей прической) и Байден (носящий солнцезащитные очки-авиаторы).
День 65: Мышь
Вдохновленный «Day 6 — Rodent» Криса на Dribbble (который намного лучше с текстурами и формами). Так же есть видео как это было сделано.
День 66: Девушка держит воздушный шарик.
Вдохновленный иллюстрацией суперталантливой Аны Марии. Как и в предыдущем мультфильме, оригиналы в 1000 раз лучше, чем мой перевод на HTML+CSS. Видео как рисовали.
День 67: Лодка
Это интересно. В Firefox это выглядит нормально, в Chrome иногда мерцает фон (почему?), а в Safari тени коробок странно ведут себя с формой лодки… В будущем мне нужно быть более осторожным с этим: S
День 68: Маленькая смерть
Предхэллоуинский мультфильм, созданный с нуля.
Мне очень нравится результат этого. У Chrome, похоже, есть проблемы с тенями блоков, закругленными границами и относительными единицами измерения, влияющими на то, как коса рисуется (или даже отображается!)
День 69: Монстр Франкенштейна
Еще одна иллюстрация на тему Хэллоуина с нуля. На полпути к этому я почувствовал искушение просто сыграть Халка, но не изменил направление. Вот видео как это было сделано.
День 70: Пудель Эллипса
Эта собака была нарисована с использованием только эллипсов и полукругов. Это было весело, хотя результат не слишком впечатляет… Он больше похож на козу, чем на пуделя :S
День 71: Дракула
Этот анимированный Дракула будет следовать за мышью по экрану (без JS) благодаря сетке элементов. Вы можете посмотреть видео о том, как это было разработано здесь.
День 72: Силуэт
Этот силуэт интересен тем, что нарисован только кругами. Посмотрите видео, как это было нарисовано (включая два варианта).
День 73: Гном
Грустный гном.
День 74: Ботаник
Я начал делать мультяшный мальчик, но когда я начал с тела, я решил добавить сообщение «Голосуй за Педро»… но это больше, чем карикатура на Наполеона Динамита, это будет мальчик, одетый как Наполеон Динамит. Посетите мой канал на Youtube, чтобы посмотреть видео о том, как это было закодировано.
День 75: Шутка
(Неоригинальная) ужасная шутка про папу, играющая со значением слова «соя» на испанском и английском языках. Я сделал другую начальную версию, но эта мне больше нравится… и видео того, как она была закодирована.
День 76: Хорошее яйцо
На основе персонажа Джори Джона и Пита Освальда «Хорошее яйцо». Одна из любимых книг моей дочери на данный момент.
День 77: Футбол
Новый мультфильм с нуля. Мне нравится динамизм этого с бегущим ребенком… и вот видео того, как это было сделано.
День 78: Мультфильм
Мультфильм, немного напоминающий Аниманьяков (но не настолько). На сегодняшний мультик времени не хватило и я устал, а результат явно не очень… опять же, завтра будет лучше.
День 79: Жуткий
Эта иллюстрация с одним элементом была вдохновлена »Spooky» Джека Морана на Dribbble.
День 80: Монахиня
Еще один мультик с нуля. Я буквально не знала, что рисовать в этот день, просто захотелось, чтобы это было что-то с большими глазами после просмотра одного из LOL-мультиков… И запись о том, как это было сделано.
День 81: Кофе на снегу
Вдохновленный «Зимними нарядами — векторная иллюстрация» Хади Курниа на Dribbble… Мне понравилась идея сделать что-то подобное, а затем построить с нуля, вдохновленный этой иллюстрацией… и видео того, как это было сделано.
День 82: Маленький монстр
Новый хеллоуинский мультфильм, созданный с нуля.
Вот видео того, как рисовали иллюстрацию.
День 83: Мужское лицо
Еще один рисунок, сделанный с нуля. Вот так была нарисована иллюстрация.
День 84: Женщина и лист
Вдохновленный неиспользованным предложением Bujar Ljubovci на Dribbble, эта иллюстрация состоит всего из 3 div (и может быть легко уменьшена до 2). Залил на ютуб видео как это делается.
День 85: Мультипликационный персонаж (v3)
Еще один мультипликационный персонаж с нуля. У этого есть стиль, который смутно напоминает мне Арчи (старого)… хотя и не специально… и еще одна иллюстрация с «закулисным» видео.
День 86: Кодирование человека (v2)
Сначала я думал сделать рисунок по мотивам Pacifica Northwest, но потом понял, что у меня мало времени и поторопился с чем-то «немного» грубоватым по краям… И видео, как это было сделано
День 87: Бабочка
Эта иллюстрация началась как комментарий на Youtube, но я должен сказать, что мне очень понравилось рисовать эту бабочку.
..
, и я создал еще одно видео о том, как она была закодирована.
День 88: Ведьма CSS
Сегодня ночь Хэллоуина, поэтому я решил сделать еще один мультфильм в стиле Хэллоуина: злую ведьму. На этот мультфильм ушло немного больше времени, поэтому у меня есть две видеоверсии: длинная и короткая.
День 89: Ла Муэрте
После того, как я сделал несколько иллюстраций к Хэллоуину, мне захотелось сделать и Día de Los Muertos. Эта версия La Muerte была вдохновлена одной из фильма «Книга жизни». Как и в случае с другими изображениями, есть видео о том, как это было сделано.
День 90: Кролик в шляпе
Я должен признать, что сегодняшняя анимация/рисование немного упрощены, но сегодня (и, возможно, завтра) у меня будет не так много времени, поэтому они будут довольно простыми. Еще тут есть видео как это делалось
День 91: Кофейная кружка без тлеющих углей
Слегка анимированная кофейная кружка, нарисованная с помощью CSS.
.. и без HTML? Вдохновлен вызовом @jh4yy #nodivember. Это началось как рисунок из одного элемента, затем я попытался превратить его из кофейной кружки в кофейную чашку. Наконец, вернемся к кофейной кружке и сделаем из нее иллюстрацию «без элементов»… и видео процесса.
День 92: Бобр
Вдохновленный Бивером от Алиссы ван де Богерд на Dribbble. Как и в случае со многими другими иллюстрациями, я загрузил замедленную съемку того, как это было сделано, на Youtube.
День 93: Мечты
Иллюстрация с нуля. Мне очень нравится выражение лица и простота рисунка… Кроме того, это первый рисунок, который я не записал за долгое время, и он показался мне немного странным.
День 94: Футбольное поле
Эта иллюстрация футбольного поля может показаться не такой уж большой, но в ней есть кое-что интересное: она также является частью nodivember и не имеет никакого HTML-тега (кроме ). Я постараюсь анимировать его позже, чтобы точка/игроки двигались.
.. и видео того, как это было сделано
День 95: Красная Шапочка
Последние несколько дней были довольно «занятыми», и CSS-иллюстрации были сделаны в спешке, и это пример тому. Тем не менее, я выполнил его вовремя и записал процесс.
День 96: Лицо
Еще одна иллюстрация с нуля. Пробуем играть с цветами и смешивать округлые/овальные формы, чтобы получился непрерывный элемент… И видео, как это было сделано.
День 97: Работающий человек
Я видел разные рисунки на Dribble с использованием этой очень простой техники с тонкими линиями и плоскими тенями и захотел попробовать что-то подобное. Timelapse того, как это было нарисовано.
День 98: Изюминка
Панчлайн — новый суперзлодей, созданный Джеймсом Тайнионом IV во вселенной Бэтмена… Я хотел нарисовать Эрику Слотер из «Что-то убивает детей», но это оказалось сложнее, чем я ожидал в HTML и CSS.
День 99: Мужчина
простая иллюстрация мужчины.
Я постарался добавить больше деталей, чем обычно, и из-за этого рисунок тоже занял немного больше времени… И видео того, как это было сделано.
День 100: Панк
…И напоследок… еще один мультик с нуля! Этот персонаж панк-музыки может быть не таким причудливым, как другие рисунки, которые я делал, но мне он очень нравится. Наверное, один из моих фаворитов в 100. И видео того, как его рисовали.
…И некоторые дополнения
Письмо Сова
Вчера у меня было немного времени, чтобы пошалить перед сном, и я нарисовал сову с помощью HTML и CSS, взяв за основу слово «сова». Процесс можно посмотреть в этом видео:
Амбиграмма
Попытка сделать амбиграмму с моим именем (Альваро). Это грубо по краям, но вроде работает: если вы повернете изображение на 180 градусов, оно все равно будет читать слово Альваро:
Конец!
Да, это конец! Конец 100 Days of CSS Illustrations Challenge.