геометрические формы для сайта
Создаем геометрические фигуры с помощью CSS
Что вам понадобится для использования данного руководства
Скачать исходные файлы
Просмотреть демонстрацию
Окружность
Квадрат
Прямоугольник
CSS
Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height :
Треугольник
Треугольник, направленный вниз
CSS
Создавая перевернутый треугольник, оперируем толщиной границы:
Треугольник, направленный влево
HTML
Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left :
CSS
Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:
Треугольник, направленный вправо
HTML
Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right :
CSS
Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:
HTML
Для создания фигуры « ромб », создаем div с ID diamond :
Трапеция
CSS
Трапеция может быть создана методом установки одинаковых значений левой и правой границы с плоской нижней границей:
Параллелограмм
HTML
Для создания фигуры « параллелограмм », создаем div с ID равным parallelogram :
CSS
Для создания параллелограмма, устанавливаем значение transform равное skew для поворота элемента на угол в 30 градусов:
Звезда
HTML
Для создания фигуры « звезда », создаем div с ID равным star :
Звезда (6ти конечная)
HTML
Для создания фигуры « шестиконечная звезда », создаем div с ID равным parallelogram :
Пятиугольник
HTML
Для создания фигуры « пятиугольник », создаем div с ID равным pentagon :
CSS
Создание пятиугольника заключается в создании двух элементов, которые затем соединяются в один. Первый элемент – форма трапеции. Затем вверху добавляем треугольную форму:
Шестиугольник
HTML
Для создания фигуры « шестиугольник », создаем div с ID равным hexagon :
CSS
Есть несколько способов создания шестиугольника. Один из них полностью идентичен созданию пятиугольника. Создаем прямоугольную форму и вверху добавляем два треугольника:
Восьмиугольник
HTML
Для создания фигуры « восьмиугольник », создаем div с ID octagon :
CSS
Восьмиугольник также интересная фигура. Сначала создаем две трапециевидные формы и по бокам располагаем два треугольника. Есть еще несколько способов, но этот самый действенный:
Сердце
HTML
Для создания фигуры « сердце », создаем div с ID heart :
CSS
Эта фигура довольно сложная в создании, но её можно сделать с помощью вращения элементов под разными углами и смены значения свойства transform-origin для смены позиции вращаемых элементов:
HTML
Для создания фигуры « яйцо », создаем div с ID egg :
Бесконечность
HTML
Для создания фигуры « бесконечность », создаем div с ID infinity:
CSS
Фигура « бесконечность » может быть создана путем аккуратной манипуляции свойством border и установки углов окружности:
Бабл для комментария
HTML
Для создания фигуры « библ », создаем div с ID comment_bubble :
Pacman
HTML
Для создания фигуры « pacman », создаем div с ID pacman :
CSS
Создание pacman – целая хитрость. Манипулируйте свойствами border и radius для создания окружности с открытой левой стороной:
Заключение
Надеюсь, вам понравилось данное руководство. В блоке комментариев вы можете приводить собственные способы создания фигур из руководства.
Вадим Дворников автор-переводчик статьи « Make Shapes with CSS: How to Create Different Shapes in CSS »
Скопирована с хаба
Добрый день.
Вы можете подсказать как нарисовать в css такой круг?
Генератор треугольников, если кому интересно:
Вот тут я подробно написал по какому принципу выполнить звезду.
Ну и нулевую высоту имеет смысл указывать только если в блоке предполагается содержимое. Если мы зададим нулевую высоту, то содержимое не будет растягивать блок.
Ну а в последнем примере вместо последних четырёх свойств можно было указать одно: border-radius: 70px. Впрочем, возможно, примеры подобраны так, чтоб показать что одни и те же свойства можно задавать иногда разными свойствами.
А как сделать параллелограмм, но так чтобы правило наклона не воздействовало на текст?
Геометрические фигуры
Используйте этот инструмент для создания геометрических фигур с помощью HTML и CSS. Он позволяет создавать необходимые вам фигуры и выбрать для них цвета.
Инструмент Геометрические фигуры дает возможность установить ширину, высоту, радиус, повернуть и сдвинуть для получения необходимой формы. Другой инструмент, Селектор цвета, поможет выбрать цвет в формате hex. Он мгновенно создает форму, основываясь на заданных значениях.
Данный инструмент обеспечивает следующие формы: прямоугольник, круг, треугольник, параллелограмм, сердце, луна, Pac-Man и Pair Point Burst.
Кроме того, W3docs имеет учебник CSS, с помощью которого вы сможете изучить свойства CSS. Узнайте больше о свойствах Width, Height, Border-radius и Color на нашем сайте.
Что такое форма?
Внешний вид (или форма) объекта, который не меняется при нормальных условиях, называется геометрической формой этого объекта. Так как параметры различаются, объекты имеют разные формы. Если объекты имеют одинаковые или похожие формы, они считаются подобными. Любое тело или любой материалистичный объект может быть представлен в геометрической форме.
Формы в веб-дизайне.
Если хотите сделать ваш сайт привлекательным, надо сфокусироваться на каждой детали дизайна. Контент веб-сайта является самой важной частью; чем интереснее контент, тем больше посетителей будет иметь сайт. Но кроме контента в веб-дизайне формы также имеют большую роль.
Каждая форма имеет значение, а также визуальное воздействие на пользователя. Ни один сайт не обходится без форм. Даже если ваш сайт содержит ничего кроме контента, вы все равно используете формы на своей странице.
Квадраты и прямоугольники имеют значение стабильности и искренности. Они имеют прямые углы и ассоциируются с математикой, порядком, рациональностью и формальностью. Квадраты и прямоугольники символизируют согласованность, спокойство, конкретность, безопасность и равенство.
Треугольники
Треугольники представляют динамическое напряжение, действие и агрессию. Они имеют энергию и силу. Они сбалансированы и могут символизировать право, науку и религию.
Эта форма может иметь значение мужественности. При разработке логотипа динамический характер треугольника больше подходит для развивающихся высокотехнологичных компаний, чем для стабильной финансовой организации.Треугольники выражают прогресс, направление и цель.
Виды форм
Существует три основных вида форм: геометрические, органические и абстрактные.
Геометрические формы
Геометрические формы включают в себя круги, квадраты, треугольники, параллелограммы и т. д. Они симметричные и вызывают чувство организованности и эффективности. Большинство геометрических форм в сети создаются с помощью CSS.
Органические формы
Органические формы имеют больше плавных линий, по сравнению с обычными геометрическими формами. Они несимметричны и представляют формы, встречающиеся в природе (цветы, листья, облака и т. д.). Органические формы обычно создаются с помощью изображений.
Абстрактные формы
Абстрактные формы имеют распознаваемую форму, но не являются реальными объектами. Это стилизованные версии органических форм, представляющие разные идеи и концепции. Как правило, абстрактные формы добавляются с помощью изображений.
Геометрические фигуры
Фигуры могут быть двухмерными и трехмерными. Для получения таких фигур мы начинаем с линии или сегмента линии, или с кривой линии. В итоге получаем разные типы форм и фигур, например, треугольник, пятиугольник или другие формы, в зависимости от количества и порядка расположения этих линий. Такие геометрические формы, как квадрат, прямоугольник и треугольник, являются двухмерными формами.
Прямоугольник
Треугольник
Классификация по углам:
Классификация по сторонам:
Инструмент Геометрические фигуры позволяет создавать форму треугольника за несколько секунд и сразу же получить HTML и CSS-код. Для создания формы необходимо задать ширину, высоту, радиус. Задайте значение в области ввода «rotate» для поворота изображения. Выберите цвет для формы в формате hex. На правой стороне страницы вы найдете вывод формы, а внизу страницы можно увидеть код.
Параллелограмм
Параллелограмм имеет следующие характеристики:
Для создания формы параллелограмма необходимо задать ширину, высоту, радиус и сдвиг изображения, чтобы указать двухмерную трансформацию по оси X и по оси Y. Выберите для формы цвет в формате hex. На правой стороне страницы вы найдете вывод формы, а внизу можно увидеть код.
Сердце
Эта форма считается геометрической, так как имеет и прямые, и кривые линии. Для создания формы сердца необходимо задать ширину, высоту, радиус, а также установить размер сердца, введя значения в области ввода «scale». Выберите для формы сердца цвет в формате hex. На правой стороне страницы вы найдете вывод формы, а внизу можно увидеть код.
Pac-Man
Pair Point Burst
Создайте свою собственную форму, введя количество углов, и мгновенно получите код. В области ввода «count», напишите любое число, и инструмент отобразит форму с указанным количеством углов.
Инструмент Геометрические фигуры создает разные формы луны. Задайте ширину, высоту, радиус и укажите место формы, указывая значения для «left» и «right». Допускается использование отрицательных значений. Получите код внизу.
Геометрия В Веб-Дизайне И Создание Абстракции В Photoshop
Геометрические формы используются в веб-дизайне в разном назначении. Их можно увидеть в навигации, визуальном акценте отдельных частей, оформлении фреймов и блоков, секций. Фигуры могут сочетаться друг с другом, создавая оригинальный визуальный эффект рисунка. Как создавать абстрактный геометрический коллаж, и как веб-мастера используют многоугольники в своей работе мы рассмотрим ниже.
Веб-дизайн, если рассматривать его как способ доставки контента пользователю, планируется и создается с особой ответственностью и важностью. Но сама работа упрощается тем, что в основе макета используются сетки, колонки и различные геометрические формы. Квадраты, прямоугольники, трапеции, ромбы, шестиугольники, треугольники, окружности – наиболее распространенные элементы для оформления дизайна, причем, в самых разных стилях. Их можно увидеть в навигации, визуальном акценте отдельных частей, оформления фреймов и блоков, секций. Более того, геометрические форы могут сочетаться друг с другом, создавая оригинальный визуальный эффект рисунка. Четкие, прямые, резкие и неокруглые линии и фигуры часто способствуют ассоциации сайта с передовыми технологиями, даже если сам контент рассказывает о… котятах, например.
В конце лета мы затрагивали немного тему многоугольников в веб-дизайне, рассматривали интересные работы веб-мастеров, упоминали об особенностях многоугольников. Сегодня мы повторно не будем подробно останавливаться на всех тонкостях геометрического веб-дизайна, но уделим внимание тому моменту, когда геометрические формы способны создавать потрясающий визуальный эффект коллажа. Поскольку такую красоту создавать несколько кропотливо, то мы разделим весь этот огромный объем информации на две части, последовательно и обстоятельно рассказывая о каждом варианте. Иными словами: практике работы в Photoshop с геометрическими формами мы посвятим два материала.
В целом, геометрические формы могут использоваться в веб-дизайне в разном назначении. В качестве фоновой текстуры, элемента навигации, но частенько такое применяют и в дизайне 360 0 или с эффектом дополненной реальности. Геометрические элементы – отличный вариант для оформления портфолио, галерей, домашних страниц. Для наглядности и вдохновения посмотрим на некоторые особо яркие примеры дизайна сайтов, которые и послужат нам основой для творения в Photoshop. Речь идет о bigbang, paseoitaigara, webey, mrsaghafi, jtcdesign, paseodegracia.
Геометрия, симметрия, абстракция в Photoshop
А если немного пофантазировать и превратить фотографию в абстрактный коллаж из геометрических фигур? Мы создадим нашу форму, а потом разрежем изображение по ней и выложим новую композицию. Немного цветооткорректируем и придадим эффектов. Ничего не напоминает? Возможно, некоторые из вас вспомнят старые ретро коллажи из фотографий, газет, рисунков, когда из изображений вырезались геометрические фигуры, а затем ими выкладывалась совершенно новая симметричная фигура.
Сложно? Не совсем. Некоторые мастера используют в дополнение к Photoshop еще и Illustrator, но мы сделаем все силами одного только фоторедактора.
Для начала нам предстоит нарисовать в новом документе фигуру «Эллипс» размером 500х500 px. Можно создать такой же по размеру Документ, а затем пропорционально увеличить размер холста до 700х700 px. Можно сразу большой и нарисовав фигуру, отредактировать размеры в окне свойств. Путей много, тут как вам удобнее.
Мы же создали новый документ 500х500 пикселей, включили направляющие через центр (Меню Просмотр – Новая направляющая и затем передвинули их в центр).
Отдельные геометрические фигуры мы будем рисовать разными цветами. Это для наглядности, для удобства выравнивания, чтобы все кружочки, уголочки визуально не сливались в черном цвете.
Затем рисуем отдельный маленький круг размером в половину большого, то есть 250х250 px и располагаем его внутри большого по центру. Поскольку мы рисуем симметричную абстракцию, то эту симметрию и придется создавать по направляющим.
Зажав кнопку Alt, инструментом Перемещение (чтобы автоматически создавались новые слои) создадим еще три копии маленького кружочка и разместим внизу, справа и слева, создав крестик. При этом сами кружочки должны пересекаться между собой и только границей соприкасаться с большим. Затем в центре тоже разместим один кружочек. И вот что должно получиться в итоге.
Поскольку мы рисуем геометрические фигуры, то одних только кругов мало. Давайте создадим треугольник, который должен будет вписаться в большой круг. Выбираем инструмент Многоугольник, устанавливаем количество сторон 3 и размер 250px. Рисуем его, а затем с помощью Трансформирования (Ctrl+T) подгоняем под размер (это чуть удобнее), так чтобы нижняя грань соприкасалась с тремя точками трех горизонтальных центральных кружочков.
А затем этот треугольник копируем и переворачиваем по вертикали. Итог ниже.
Таков наш рисунок.
Несложно, но красиво. Объединяем все слои в группу и делаем копию группы. Вот это нужно для того, чтобы затем иметь в будущем возможность отредактировать фигуру. Если бы мы использовали Illustrator, то фигура осталась бы там, и мы могли бы её там и редактировать. Но в данном случае, мы сохраним её в слоях как группу, а с копией поработаем дальше.
Выбираем группу копию и объединяем все слои. У нас получается отдельная целая фигура. Фон у нас белый, но если его отключить, то фигура будет прозрачной и с ней можно работать дальше.
Теперь:
И так каждый кусочек фигуры мы меняем. Поначалу будет казаться, что получается, откровенно говоря, «белиберда полнейшая». Но… к слою двадцатому вы заметите заметное преображение всего рисунка.
Важно: чтобы слой-кусочек ровно занял положение внутри фигуры, корректируйте его положение с помощью кнопок-стрелок на клавиатуре при активном инструменте Перемещение. Если все равно остаются нежелательные разрывы, активируйте Трансформирование (Ctrl+T) и поправьте форму кусочка. Затем соберите все их в группу.
И вот, что получилось в итоге.
А можно сделать их немного голубоватыми. При этом тонироваться будут только цветные границы. Проблема в том, что у нас кружочки в центре белые (ранее черные), а это значит, что они не затонируются с помощью параметра Цветовой тон. Наложим цветность другим способом.
Поэтому в окне «Цветовой тон/Насыщенность» меняем яркость на ноль и переходим в «Режим наложения» для данного слоя-фигуры. Здесь накладываем цвет и можно немного поиграть с «Внешним свечением», создав тем самым небольшую дымку.
Еще к оригиналу можно добавить теней немного, будто сверху рамка фигурная с линзами (рисунок-то искажен внутри) наложена и от её граней отбрасываются тени.
Мы оставим себе беленький оригинал для дальнейшего работы.
Веб-дизайн в последнее время несколько прохладно относится к коллажам в целом, но наши кусочки, размещенные несколько случайно и хаотично, образуя симметричную геометрическую фигуру, сохраняют целостность композиции и сбалансированность. Поэтому при размещении на главной странице под названием или логотипом, в качестве фона или в ином варианте (затонированым основным изображением или с уменьшением общей яркости и насыщенности) такой эффект не является устаревшим или признаком дурного тона.
Но давайте добавим немного ретро-веяния в коллаж. Мы подобрали вот такую текстуру пыли на черном фоне и добавляем её к нашему документу. Поскольку текстура черная, то режим наложения выбираем «Экран», что позволит сделать её прозрачной, светлой и скрыть, тем самым, всю черноту. Изображение обретет вид временной потертости, потеряет некоторую строгость и четкость.
Теперь над всеми слоями создаем Корректирующий слой «Кривые» (внизу панели слоев иконка есть). Отдельно меняем кривизну для Красного, Зеленого и Синего цвета, создавая тем самым ретро стиль и эффект обработанной старой пленки. Дополнительно можно охладить наше творение, добавив фотофильтр – «Глубокий синий» со средней плотностью.
Окончательный результат наших манипуляций является не чем иным, как абстрактным произведением искусства с частичками изображения, что были изначально вырезаны, а затем выложены в коллаже. Геометрические линии создают баланс произведения, в то время как дополнительное текстурирование и регулировка цветности завершает творение и превращает его в старинное изображение. При этом геометрические узоры могут быть самые разные, как и исходные изображения.
Ниже, например, мы отключили границы фигуры, придавая всей композиции больше воздушности, парения и нечто заоблачного. Таким образом, создается ощущение и ассоциация, что произведение не только представляет красоту технологического города, небоскребы которого поднялись гораздо и гораздо выше облаков, но и все многообразие этой красоты, преломляя и разбивая сцену на отдельные части, смешивая их в строгую симметрию.
Выводы
Геометрические фигуры используются не только в веб-дизайне. И причина тому – способность простых форм строить общение на динамике, движении. Они олицетворяют все это собой, а человек воспринимает геометрию, как нечто прогрессивное. Попробуйте отодвинуться от монитора и посмотреть на созданный нами коллаж издалека. Вы увидите совсем иное произведение, будто бы совсем новое. Возможно, вам покажется, что вот-вот оно закрутится или начнет распадаться на отдельные элементы.
Теперь представьте, что такую небольшую анимацию можно создать в Photoshop, или можно использовать параллакс и двигать отдельно фигуру и фон (он остался у нас целым и невредимым). Идей, в действительности, очень много.
Каждый год конструкции с геометрическими фигурами становятся популярными. В 2011 году в моде были диагонали; в 2013 – стиль METRO и квадраты с прямоугольниками; в 2016-2017 – параллакс породил безумие форм от треугольников до шестигранников. Это они только появились, а потом, в последующие годы, их старались применять практически везде. Таким образом, используя абстрактный коллаж, можно поразить и пользователей, и заказчиков необычностью и ассоциативной технологичностью.