Как нарисовать треугольник на CSS. Css рисование


Как рисование на чистом CSS помогло мне понять React-компоненты — CSS-LIVE

Перевод статьи How Pure CSS Images Helped Me Understand React Components с сайта medium.com для CSS-live.ru, автор — Майкл Манджаларди

В начале 2016-го я так устал от попыток выучить React, что едва не бросил разработку. Я стал жертвой синдрома самозванца. Теперь я работаю React-разработчиком на полную ставку и успел написать книгу «Изучение React.js для визуалов»

Как же я преодолел синдром самозванца и наконец освоил React? Причин несколько, но важнее всего оказалось то, что я научился делать рисунки на чистом CSS.

В трясине синдрома самозванца

В декабре 2015-го я получил диплом по компьютерным наукам и еще не знал толком, что бы такое выбрать для себя из мира разработки. Наслушавшись деловых подкастов, я был зачарован свежим ароматом стартапов, доходы которых буквально рекой лились за счет создания веб-приложений. Вот почему я в итоге поставил себе цель стать веб-разработчиком.

Исследуя современную веб-разработку, я понял, что она в корне отличается от того, чему меня учили в вузе. В моих ограниченных знаниях HTML, CSS, JavaScript и PHP не было ничего похожего на все эти JavaScript-фреймворки, о которых все кругом говорили. Я видел много шума вокруг React и решил попробовать его.

Вот воображаемая беседа со мной самим, точно отражающая те проблемы, с которыми я столкнулся в этой гонке:

Онлайн-ресурсы: Реакт — то, на чем вам стоит сосредоточиться для создания интерфейсов современных веб-приложений.

Я: Звучит круто! Что мне нужно, чтобы начать новый проект на Реакте?

Онлайн-ресурсы: Ага. Мы можем инициализировать наш проект с помощью npm. Потом нам надо поставить и настроить Webpack и Babel, чтобы можно было писать на ES6, а не на ES5. Теперь ставим React и ReactDOM, и можно начинать кодить на Реакте.

Я: Хм. Что за ES6? Почему нам нужны и Webpack, и Babel? И еще, React и ReactDOM, чтобы пользоваться Реактом? Это что, опечатка?

Онлайн-ресурсы: ES6 — это более новая версия ECMAScript. Она не очень хорошо реализована в браузерах, но в ней есть для нас крутые фичи. Babel обрабатывает ES6-код и делает его совместимым с браузерами, поддерживающими ES5. Webpack можно использовать, чтобы собрать бандл из нашего кода и применить Babel. React — это одна библиотека, но нужно подключить еще и библиотеку ReactDOM, чтобы всё заработало.

Я: ECMAScript? Я думал, мы говорим про JavaScript. И еще понять бы, что значит «собрать бандл». Знаете… похоже, надо проделать немалую работу, чтобы просто начать. В чем же тогда прок от Реакта?

Онлайн-ресурсы: Можно собирать интерфейсы из компонентов, инкапсулирующих JSX и данные. Он по-настоящему модульный.

Я: JSX?

Онлайн-ресурсы: Ага, это просто JavaScript-синтаксис для определения того, в виде чего ваш компонент в конце концов отобразится. Почти как HTML… только надо писать className вместо class.

Я: Это логично, вроде как. Ну что ж, продолжим.

Онлайн-ресурсы: Чудненько. Давайте-ка для начала я покажу вам код для компонента «Hello World».

Я: На первый взгляд жутковато, но эти компоненты кажутся крутой штукой. В смысле, этот компонент «Hello World» весьма неплох.

Онлайн-ресурсы: Здорово! Вижу, вас немного смутило создание нового Реакт-проекта. Не волнуйтесь. На Гитхабе есть великолепный набор для начинающих, в котором уже есть и Webpack, и Babel, и сервер разработки для Webpack. Клонируйте его себе, смелее.

Я: Ух. Понятия не имею, что делает половина этого кода. Но вот эти компоненты выглядят знакомыми. С базовыми компонентами понятно, но почему в них вложены свои компоненты, а в те — еще какие-то?

Онлайн-ресурсы: О! Это лишь потому, что представление интерфейса можно разбить на родительские и дочерние компоненты. Тогда можно передавать данные от одних к другим.

Я: Но далеко не просто родитель и ребенок! Там, похоже, пра-пра-прадеды с пра-пра-правнуками и всеми промежуточными поколениями. Что там творится?

Я: Знаете что… не надо на это отвечать. Реакт так популярен, значит, он должен быть простым. Видимо, я просто тупой, раз задаю столько вопросов. Точно, не гожусь я в разработчики. Нечего мне и пытаться выучить современную веб-разработку.

Смысл этой воображаемой беседы — подчеркнуть препятствия, через которые доводится пробиваться новичку в Реакте. В частности, одна из главных трудностей — вникнуть в понятие компонентов. К сожалению, есть от чего устать еще до того, как вы до них доберетесь. В этот момент очень нужно предельно практичное объяснение, а не очередная порция модных словечек.

Я глубоко уверен, что случайно открыл замечательный способ объяснять React-компоненты, повозившись с рисованием на чистом CSS.

Это просто отличная история. Сходите за любимым напитком, если желаете.

Как я открыл рисунки на чистом CSS

Пока я пытался освоить Реакт, я устроился на работу специалистом IT-поддержки. С первого же дня, когда мне пришлось вкручивать лампочки на третьем этаже, я с трудом мог высидеть до конца рабочего дня.

Однажды мне нужно было сделать объявление о сломанном принтере, или о сломанной двери (знаете, ведь «айтишник» и завхоз — это же одно и то же). Я наткнулся на векторный редактор под названием Inkscape, в котором и нарисовал объявление. Я прежде не имел дела с векторной графикой, но мне очень понравилось создавать фигуры, манипулировать ими и раскрашивать, чтобы получить итоговый рисунок.

Чтобы сбросить накопившееся раздражение от суровых будней «айтишника», я решил часок поиграть с Inkscape в обед. Со временем я открыл для себя Dribbble (способ показать и рассказать для дизайнеров) и Affinity Designer (как Inkscape, только намного лучше), которые подстегнули меня еще плотнее заняться векторной графикой.

Чем больше я практиковался в векторной графике, тем больше я осознавал, что ключ к успеху — посмотреть на итоговый рисунок, разбить его на меньшие фигуры, создать эти фигуры и раскрасить в удачные цвета.

У меня стало действительно хорошо получаться. С этой новообретенной уверенностью я решился на еще один подход к веб-разработке.

Еще до того, как влипнуть в Реакт, я наткнулся на Codepen и полюбил его, поскольку он был как Dribble для фронтендеров. Я по-прежнему заглядывал на его главную страницу ради всех тех крутых штук, что люди там создавали. В числе таких штук мое внимание привлекли картинки на чистом CSS. Я подумал: «Ух! Это же как моя векторная графика, но вместо Affinity Designer у них CSS!»

В конце концов я научился делать картинки на чистом CSS и здорово набил руку в этом.

Сцена из игры Zelda: A Link to the Past на чистом CSS

Процесс работы был точно таким же, как и с векторной графикой.

  1. Либо рассматриваю существующий рисунок, который хочу воссоздать, либо представляю себе итоговый рисунок в уме, используя Dribble для вдохновения.
  2. Разбиваю этот рисунок на небольшие компоненты, которые нужно создать.
  3. Создаю эти компоненты с помощью CSS и помещаю в нужные места.
  4. Подбираю цвета с помощью Dribbble, Coolors и/или Colorzilla

Шаг 2 из этого списка оказался самым трудным. По мере того, как я брался за всё более сложные рисунки, я всё больше понимал, что мне нужно лучшее определение для компонентов, которое объясняло бы их иерархию.

Понимание иерархии компонентов

Что я имел в виду под объяснением иерархии компонентов в чисто CSSном рисунке? Что ж, посмотрим на пример.

Взгляните на мой векторный рисунок с коалой:

Если я теперь спрошу у вас, из каких компонентов состоит этот коала, я предполагаю, что вы дадите один из двух ответов.

С одной стороны, можно сказать, что компоненты коалы — это уши, глаза, нос, голова и шерсть.

С другой стороны, можно еще сильнее углубиться в детали и сказать, что компоненты коалы — 3 светло-серых кружка, 2 тёмно-серых кружка, 2 белых кружка, 2 тёмно-синих кружка, коричневый скругленный прямоугольник и два светло-серых треугольника.

Оба ответа нельзя назвать неправильными. Первое объяснение более широкое и обобщенное, второе же очень точное и конкретное.

Этот пример был призван показать, что в описании компонентов рисунков на чистом CSS присутствует иерархия.

В более сложном CSS-рисунке, типа показанного ниже подземелья из «Зельды», в иерархии компонентов будет еще больше уровней.

Хотя CSS-рисунки могут казаться невероятно трудными, это можно изрядно облегчить, если рассмотреть картинку, которую вы хотите создать, и разбить ее вплоть до наименьших элементов, а затем выстроить из них иерархию компонентов.

Если взять предыдущего коалу как пример, можно разбить его на отдельные фигуры, а затем объединить некоторые из этих фигур в более сложные части его тела (в нашем случае, глаз и ухо).

Отдельные фигуры — самый нижний уровень иерархии компонентов, а следующий уровень — части тела коалы, некоторые из которых содержат несколько фигур. Если собрать части тела вместе, у вас получится итоговая картинка с коалой.

Короче говоря, способность выделять из желаемой итоговой картинки упорядоченную иерархию компонентов здорово упрощает процесс. Я могу начать с нижнего уровня иерархии компонентов и выстраивать работу снизу вверх. Можно будет собирать итоговую картинку элемент за элементом.

Когда после этого я снова взялся учить Реакт, преимущества компонентности Реакта стали абсолютно логичными. Но объяснения иерархии/структуры компонентов показались мне крайне непрактичными (хотя я уже и понимал, к чему они пытаются подвести).

Поэтому я придумал способ объяснения иерархии Реакт-компонентов, который я называю «проектирование поселка на Реакте»

Проектирование поселка на Реакте

Я буду сравнивать иерархию компонентов в Реакт-приложении с иерархией поселка/городка.

В иерархии поселка 4 главных уровня иерархии (от общего к частному):

  1. Поселок
  2. Районы
  3. Кварталы
  4. Жилые Дома

Поселок

Начнем с поселка, как с самого очевидного.

Поселок — это эквивалент целого представления, например, главной страницы

Это самая общая часть иерархии поселка. А что, если я сейчас спрошу вас, из каких компонентов поселок состоит?

Как и в случае с нашим коалой, описать это можно разными способами.

Дома

Начнем с самого конкретного уровня (нижнего уровня в иерархии). На самом базовом уровне можно сказать, что поселок — это коллекция домов. Дома — это строительные блоки поселка.

Подобным образом можно описывать строительные блоки представления с помощью «домов». Дальше дробить их невозможно.

В нашем примере с коалой, тёмно-серый кружок — это «дом».

В примере с главной страницей Airtable внизу заголовок, абзац, кнопка подписки — примеры «домов», в сумме составляющих представление.

Кварталы

На следующем уровне иерархии поселка у нас кварталы.

Кварталы — это коллекции домов. Так что в широком смысле можно сказать, что поселок — это коллекция кварталов.

В примере с коалой можно сказать, что глаза — это пример «кварталов»:

«Квартал» глаза

Глаза — следующий уровень над «домами», он включает белый кружок и темно-синий кружок. Хотя мы можем отнести глаза к «кварталам», сами по себе они не образуют итоговой картинки.

«Кварталы» в интерфейсе — это коллекции «домов», которые вместе составляют определенную функциональность или вместе служат определенной цели в представлении. Однако, как и глаза у коала, они не действуют самостоятельно.

Например, следующие заголовок, абзац, форма ввода и кнопка на главной странице Airtable вместе служат для того, чтобы пользователь мог подписаться.

По этой причине их можно назвать «кварталом», состоящим из отдельных «домов». Или разделом подписки, состоящим из заголовка, абзаца, формы ввода и кнопки. Аналогично, самостоятельным представлением он выступать не может.

Районы

Можно подняться еще на уровень в нашей иерархии поселка и описать его как коллекцию районов.

Район — это коллекция кварталов. В терминах интерфейса, я предпочитаю думать о «районах» как о разделах интерфейса.

Например, вот «шапка» главной страницы Airtable, представляющая собой «район»:

Район «шапки» — коллекция из трех «кварталов». Сверху в ней панель навигации. Затем идет видео и узор вокруг него, образующие еще один «квартал» слева. А справа «квартал» подписки, который мы только что описали. Эти «кварталы» составляют раздел шапки, или, повторюсь, район «шапки». Все «кварталы» в этом «районе» можно разбить дальше на отдельные «дома» (скажем, кнопку «Подписаться»).

Давайте пройдемся по сайту Airtable от самого верха и выделим разные районы.

Наверху у нас район Шапка:

Дальше у нас район с разделом контента. Назовем его Раздел контента А:

«Район» раздела контента А

Есть еще один район с разделом контента, который можно назвать Раздел контента Б:

«Район» раздела контента Б

Дальше у нас район для отзывов, который можно назвать Раздел контента В:

«Район» раздела контента В

За ним идет еще один район, который можно назвать Раздел контента Г:

Раздел контента Г

Примечание: я подсветил рисунок вверху зеленым, чтобы было видно, что это раздел, хотя в нем всего один «квартал», который мы описали ранее как «квартал» подписки.

И наконец, район Подвал:

«Район» подвала

Если собрать все эти районы вместе, получится поселок (или, в нашем случае, представление).

Как только вы разбили интерфейс на составляющие, можно создавать Реакт-компоненты по одному. Как я обнаружил в случае CSS-рисунков, это здорово упрощает то, что кажется слишком уж сложным, если смотреть на всю картину с высоты.

Немного мыслей в заключение

Я признаю, что «Проектирование поселка на Реакте» не всегда бывает идеальной аналогией. Но я думаю, что это помогает донести идею, что с помощью Реакта можно создавать интерфейсы, состоящие из представлений с иерархией компонентов. Как в рисунках на чистом CSS, крайне важно уметь творить большое по частям. И с этим Реакт справляется блестяще.

Надеюсь, вы станете лучше понимать Реакт-компоненты и пользу от них.

Как я намекнул раньше, есть множество причин, почему Реакт может с трудом даваться новичку. Если вам понравилась эта заметка, вам наверняка понравится и моя электронная книга под названием «Изучение React.js для визуалов».

Изучение React.js для визуалов

В этой книге я объясняю самые основы React.js через принципы разработки, наглядные примеры и сверхпрактичные методологии обучения вроде той, что я применил в этой заметке.

Можете читать ее бесплатно или поддержать меня материально, чтобы я мог создавать больше контента.

С наилучшими пожеланиями,

Майк Манджаларди,

основатель сайта Coding Artist

P.S. Это тоже может быть интересно:

css-live.ru

Создание различных геометрических фигур при помощи CSS

 

Одной из интереснейших функций CSS3 является то, что CSS3 позволяет уменьшить использование изображений в веб-дизайне и создавать различные геометричекие фигуры при помощи CSS. Простейшие формы, которые раньше рисовали в Photoshop или Illustrator сейчас можно сделать при помощи CSS3.

Итак, давайте попробуем создать простой набор наиболее распространенных форм, которые можно сделать с помощью CSS3.

Круг

HTML

Чтобы создать круг в CSS, нам нужен всего лишь один DIV. В нашем примере мы еще указали для него ID, чтобы определить для него стили.

<div></div>

CSS

CSS очень простой, указываем ширину и высоту, а затем задаем ему border-radius равный половине ширины и высоты.

#circle {    width: 120px;    height: 120px;    background: #7fee1d;    -moz-border-radius: 60px;    -webkit-border-radius: 60px;    border-radius: 60px;}

Квадрат

HTML

Чтобы создать квадрат в CSS, нам так же, как и для круга, нужен один DIV с идентификатором.

<div> </div>

CSS

CSS в данном случае еще проще, просто указываем равную ширину и высоту.

#square {    width: 120px;    height: 120px;    background: #f447ff;}

Прямоугольник

HTML

Чтобы создать прямоугольную форму CSS, всё делаем почти также как при создании квадрата. Это самые простые фигуры и ни у кого не должно возникнуть сложностей.

<div> </div>

CSS

В CSS указываем ширину больше высоты.

#rectangle {    width: 220px;    height: 120px;    background: #4da1f7;}

Овал

HTML

Чтобы создать овал в CSS, создайте DIV с идентификатором, например, oval.

 

<div> </div>

CSS

Овал создается почти аналогично как и форма круга. Однако, овал имеет продолговатую форму, поэтому необходимо указать ширину больше чем высоту и радиус, равный половине высоты и ширины.

#oval {    width: 200px;    height: 100px;    background: #e9337c;    -webkit-border-radius: 100px / 50px;    -moz-border-radius: 100px / 50px;    border-radius: 100px / 50px;}

Треугольник

HTML

Для того чтобы создать треугольник в CSS, опять достаточно одного DIV-а.

CSS

Чтобы создать треугольник будем изменять ширину границы блока. Изменение ширины границы позволит Вам создавать различные углы наклона.

#triangle {    width: 0;    height: 0;    border-bottom: 140px solid #fcf921;    border-left: 70px solid transparent;    border-right: 70px solid transparent;}

Треугольник острием вниз

HTML

Чтобы создать форму перевернутого треугольника с помощью CSS, создать опять DIV с идентификатором triangle_down.

<div> </div>

CSS

Чтобы создать перевернутый треугольник, мы должны указать верхнюю, левую и правую границы блока.

#triangle_down {    width: 0;    height: 0;    border-top: 140px solid #20a3bf;    border-left: 70px solid transparent;    border-right: 70px solid transparent;}

Треугольник острием лево

HTML

Чтобы создать форму треугольника, которая обращена влево, создадим DIV с идентификатором triangle_left.

<div> </div>

CSS

Для создания треугольника, который "смотрит" влево, определим границы с правой стороны, сверху и снизу.

 #triangle_left {    width: 0;    height: 0;    border-top: 70px solid transparent;    border-right: 140px solid #6bbf20;    border-bottom: 70px solid transparent;}

Треугольник острием вправо

HTML

Код такой же, как и для предыдущих примеров, только со своим идентификатором.

<div> </div>

CSS

Теперь определим границы с левой стороны, сверху и снизу.

#triangle_right {    width: 0;    height: 0;    border-top: 70px solid transparent;    border-left: 140px solid #ff5a00;    border-bottom: 70px solid transparent;}

Ромб

HTML

Всё тот же простой HTML-код.

 

<div> </div>

CSS

Создать ромб можно различными способами. Использование свойства transform с определенным значением rotate, позволит отобразить два треугольника рядом друг с другом.

#diamond {    width: 120px;    height: 120px;    background: #1eff00;/* Rotate */    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    transform: rotate(-45deg);/* Rotate Origin */    -webkit-transform-origin: 0 100%;    -moz-transform-origin: 0 100%;    -ms-transform-origin: 0 100%;    -o-transform-origin: 0 100%;    transform-origin: 0 100%;    margin: 60px 0 10px 310px;}

Трапеция

HTML

Для того чтобы создать форму трапеции используя CSS, снова создайте DIV с идентификатором.

<div> </div>

CSS

Трапеция создается похожим образом, как и треугольних.

#trapezium {    height: 0;    width: 120px;    border-bottom: 120px solid #ec3504;    border-left: 60px solid transparent;    border-right: 60px solid transparent;}

Параллелограмм

HTML

Опять создадим пустой DIV.

<div> </div>

CSS

Чтобы создать форму параллелограмма, нам необходимо настроить значение skew для свойства transform, чтобы повернуть элемент на 30 градусов.

#parallelogram {    width: 160px;    height: 100px;    background: #8734f7;    -webkit-transform: skew(30deg);    -moz-transform: skew(30deg);    -o-transform: skew(30deg);    transform: skew(30deg);}

Звезда

HTML

Для того чтобы создать форму звезды с помощью CSS понадобится также один DIV.

<div> </div>

CSS

Создание звездочки - это также манипуляция с границами блока и с использованием значения rotate свойства transform. См. код ниже.

#star {    width: 0;    height: 0;    margin: 50px 0;    color: #fc2e5a;    position: relative;    display: block;    border-right: 100px solid transparent;    border-bottom: 70px solid #fc2e5a;    border-left: 100px solid transparent;    -moz-transform: rotate(35deg);    -webkit-transform: rotate(35deg);    -ms-transform: rotate(35deg);    -o-transform: rotate(35deg);}#star:before {    height: 0;    width: 0;    position: absolute;    display: block;    top: -45px;    left: -65px;    border-bottom: 80px solid #fc2e5a;    border-left: 30px solid transparent;    border-right: 30px solid transparent;    content: '';    -webkit-transform: rotate(-35deg);    -moz-transform: rotate(-35deg);    -ms-transform: rotate(-35deg);    -o-transform: rotate(-35deg);}#star:after {    content: '';    width: 0;    height: 0;    position: absolute;    display: block;    top: 3px;    left: -105px;    color: #fc2e5a;    border-right: 100px solid transparent;    border-bottom: 70px solid #fc2e5a;    border-left: 100px solid transparent;    -webkit-transform: rotate(-70deg);    -moz-transform: rotate(-70deg);    -ms-transform: rotate(-70deg);    -o-transform: rotate(-70deg);}

Шестиугольная звезда

HTML

Разметка для шестиугольной звезды ничем не отличается от предыдущих примеров, только укажем свой идентификатор.

<div> </div>

CSS

В отличие от обычной звезды с пятью углами, мы создадм два набора форм, а затем объединим их в одну.

#star_six_points {    width: 0;    height: 0;    display: block;    position: absolute;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid #de34f7;    margin: 10px auto;}#star_six_points:after {    content: "";    width: 0;    height: 0;    position: absolute;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 100px solid #de34f7;    margin: 30px 0 0 -50px;}

Пятиугольник

HTML

HTML-код всё тот же.

<div> </div>

CSS

Пятиугольник будем состоять у нас из двух элементов. Сначала создадим форму трапеции, а затем добавим форму треугольника на вершину.

#pentagon {    width: 54px;    position: relative;    border-width: 50px 18px 0;    border-style: solid;    border-color: #277bab transparent;}#pentagon:before {    content: "";    height: 0;    width: 0;    position: absolute;    top: -85px;    left: -18px;    border-width: 0 45px 35px;    border-style: solid;    border-color: transparent transparent #277bab;}

Шестиугольник

HTML

Создаем еще один DIV с идентификатором.

<div> </div>

CSS

Существуют различные способы создания шестиугольника. Один из способов практически идентичен созданию пятиугольника. Сначала создайте прямоугольную форму, а затем добавьте два треугольника сверху и снизу.

#hexagon {    width: 100px;    height: 55px;    background: #fc5e5e;    position: relative;    margin: 10px auto;}#hexagon:before {    content: "";    width: 0;    height: 0;    position: absolute;    top: -25px;    left: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 25px solid #fc5e5e;}#hexagon:after {    content: "";    width: 0;    height: 0;    position: absolute;    bottom: -25px;    left: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 25px solid #fc5e5e;}

Восьмиугольник

HTML

Создание восьмиугольника потребует также одного DIV-а.

<div> </div>

CSS

Восьмиугольник создадим следющим способом. Сначала создадим две одинаковых трапеции, а затем добавим два треугольника с каждой стороны. Хотя есть и некоторые другие способы сделать восьмиугольник - это самый простой способ.

#octagon {    width: 100px;    height: 100px;    background: #ac60ec;    position: relative;}#octagon:before {    content: "";    width: 42px;    height: 0;    position: absolute;    top: 0;    left: 0;    border-bottom: 29px solid #ac60ec;    border-left: 29px solid #f4f4f4;    border-right: 29px solid #f4f4f4;}#octagon:after {    content: "";    width: 42px;    height: 0;    position: absolute;    bottom: 0;    left: 0;    border-top: 29px solid #ac60ec;    border-left: 29px solid #f4f4f4;    border-right: 29px solid #f4f4f4;}  

Сердце

HTML

Для создания формы в виде сердца создадим DIV.

<div> </div>

CSS

Форму сердца сделать не легко, но это может быть реализовано путем вращения элементов под разными углами и изменения свойства transform-origin для того, чтобы изменить расположение трансформированных элементов.

#heart {    position: relative;}#heart:before,#heart:after {    content: "";    width: 70px;    height: 115px;    position: absolute;    background: red;    left: 70px;    top: 0;    -webkit-border-radius: 50px 50px 0 0;    -moz-border-radius: 50px 50px 0 0;    border-radius: 50px 50px 0 0;    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    transform: rotate(-45deg);    -webkit-transform-origin: 0 100%;    -moz-transform-origin: 0 100%;    -ms-transform-origin: 0 100%;    -o-transform-origin: 0 100%;    transform-origin: 0 100%;}#heart:after {    left: 0;    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);    -webkit-transform-origin: 100% 100%;    -moz-transform-origin: 100% 100%;    -ms-transform-origin: 100% 100%;    -o-transform-origin: 100% 100%;    transform-origin: 100% 100%;}

Яйцо

HTML

Для того, чтобы создать фигуру в виде яйца нам также понадобиться один DIV.

<div> </div>

CSS

Яйцевидная форма практически совпадает с овальной формой, за исключением того, что высота немного выше, чем ширина и радиус необходимо тщательно подобрать, чтобы получить хороший результат.

#egg {    width: 136px;    height: 190px;    background: #ffc000;    display: block;    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}

Символ бесконечности

HTML

Создаем снова пустой DIV.

<div> </div>

CSS

Форма бесконечности может быть создана путем тщательного манипулирования размерами границы и установки углов круга.

#infinity {    width: 220px;    height: 100px;    position: relative;}#infinity:before,#infinity:after {    content: "";    width: 60px;    height: 60px;    position: absolute;    top: 0;    left: 0;    border: 20px solid #06c999;    -moz-border-radius: 50px 50px 0;    border-radius: 50px 50px 0 50px;    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    transform: rotate(-45deg);}#infinity:after {    left: auto;    right: 0;    -moz-border-radius: 50px 50px 50px 0;    border-radius: 50px 50px 50px 0;    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);}

Облачко с комментарием

HTML

Создаем DIV с ID comment_bubble.

<div> </div>

CSS

Облако с комментарием может быть создано путем создания прямоугольника с закругленными углами, и затем добавления треугольной формы с левой стороны.

#comment_bubble {    width: 140px;    height: 100px;    background: #088cb7;    position: relative;    -moz-border-radius: 12px;    -webkit-border-radius: 12px;    border-radius: 12px;}#comment_bubble:before {    content: "";    width: 0;    height: 0;    right: 100%;    top: 38px;    position: absolute;    border-top: 13px solid transparent;    border-right: 26px solid #088cb7;    border-bottom: 13px solid transparent;}

Pacman

HTML

Чтобы создать форму в виде Пакмана из известной игры, создадим также один DIV.

<div> </div>

CSS

Для создания Pacman-а будем манипулировать границей и радиусом, чтобы создать пустое пространство на левой стороне окружности.

#pacman {    width: 0;    height: 0;    border-right: 70px solid transparent;    border-top: 70px solid #ffde00;    border-left: 70px solid #ffde00;    border-bottom: 70px solid #ffde00;    border-top-left-radius: 70px;    border-top-right-radius: 70px;    border-bottom-left-radius: 70px;    border-bottom-right-radius: 70px;}

Демонстрация примеров

Также для создания форм вы можете использовать следующие онлайн-генераторы:

Надеюсь, вам понравился этот урок и он будет вам полезен.

Перевод с http://www.1stwebdesigner.com/

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии:

Добавить комментарий

www.webmasters.by

Как нарисовать треугольник на CSS

Вы здесь: Главная - CSS - CSS Основы - Как нарисовать треугольник на CSS

Одной из очень частых задач, которая встаёт перед верстальщиком, это рисование треугольников на CSS. Например, они могут быть на сворачивающихся и разворачивающихся блоках, на выпадающих меню, на каких-то других элементах интерфейса. И в этой статье я покажу самые оптимальные варианты рисования треугольника на CSS.

1-й способ

Создание простого изображения со стрелкой (например, вырезка из дизайна). Этот способ я сам постоянно использую, и знаю, что он является самым-самым популярным, и в некоторых случаях единственным. Но здесь есть большой минус, если делать прозрачные места у треугольника, то надо использовать PNG, который IE6 не поддерживает. А если брать JPG, то в зависимости от фона нужно брать то или иное изображение. В итоге, может быть 100 одинаковых стрелок, у которых разный фон, в итоге, будет 100 изображений.

2-й способ

Этот способ уже использует чистый CSS, он очень простой, но красивые уголки (например, с тенями, градиентами, с какими-нибудь сложными рисунками) на нём не сделаешь:

.triangle {   border-color: #000 #fff #fff #fff;   border-style: solid;   border-width: 10px 5px 0 5px;   height: 0;   width: 0; }

Далее к обычному блоку div можно применить класс triangle, в результате данный блок станет стрелкой чёрного цвета (#000). Размеры можно регулировать через свойство border-width. Вот об этом способе многие из Вас даже не слышали, поэтому если стрелка простенькая, то это наилучший способ.

Другие способы

Время от времени я с ними сталкиваюсь, но сам не использую их, поскольку ни один из них не является кроссбраузерным. Все они используют CSS3 и/или HTML5, которые, увы, ещё очень плохо поддерживаются даже современными браузерами, а про старые и говорить не приходится. Поэтому рекомендую Вам использовать на данный момент пока только первые 2 способа.

  • Создано 15.10.2012 08:41:58
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка: <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru//images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:<a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи): [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

myrusakov.ru

Создание картинок на CSS делает верстальщика лучше, или Чем себя занять долгими зимними вечерами

Те, кто интересуется версткой, frontend разработкой и веб-дизайном, вероятно заметили, что в последние несколько месяцев в сети все чаще стали появляться анимированные картинки, сделанные с помощью HTML и CSS. В этой статье я постараюсь рассказать откуда это веяние появилось, в чем фишка и почему это стало так популярно среди верстальщиков (а возможно кто-то еще не слышал, может быть интересно познакомиться с таким видом деятельности).

Как все начиналось?

В июне 2016 года мне написала Stela Seldano с предложением принять участие в своеобразном квесте. Идея была в том, что участники с помощью HTML и CSS должны сделать картинку пингвина и выложить ее на всеобщее обозрение, был рейтинг в виде морковок (что-то вроде лайков, только морковки), а после окончания квеста исходники открывались и можно было посмотреть кто как подошел к решению задачи. До этого момента подобные квесты мне не встречались, к тому же было много свободного времени и я решил попробовать. Процес оказался очень увлекательным. Если раньше я просто верстал более-менее одинаковые макеты сайтов, то тут все было иначе. Нужно было практически нарисовать этого пингвина используя различные возможности CSS. Он получился довольно неказистым, но привлек определенное внимание других разработчиков, они стали соревноваться — кто сделает лучше. Опыта создания таких картинок не было ни у кого, но дело сдвинулось. Потом были мыши, костры и даже танцующие кактусы.

Костер на CodePen

Поскольку участники квеста были активными пользователями codepen и twitter, они привлекли к теме создания картинок еще больше людей. Так появился квест Daily CSS Images, который на сегодняшний день набрал определеную популярность.

Почему мы это делаем?

Это, вероятно, самый часто задаваемый вопрос. Многие говорят, что это же проще сделать с помощью SVG в том же Adobe Illustrator, а потом анимировать на JavaScript. И самый популярный ответ на этот вопрос — мы делаем это, потому что можем. Это соревнование. Это игра. Это разминка для мозга. Это своеобразная форма искусства, которая не только приносит удовольствие в процессе работы, но и дает возможность развиваться, постоянно узнавать что-то новое.

Узнаем что-то новое о CSS

Вы когда-нибудь видели список всех свойств CSS? Их много. А какой процент из них вы используете в повседневной жизни/работе? А насколько вы пробовали их применять при работе над сложными (в плане дизайна, анимаций) интерфейсами? Если посмотреть на вопросы, которые задаются на тостере или StackOverflow, то можно заметить, что многие верстальщики имеют не такие уж и глубокие знания CSS. И это легко объяснить: в повседневной жизни большинство из нас просто не стремится узнать что-то новое — ведь все задачи решаются старыми и проверенными способами. Рисование с помощью CSS — это замечательная возможность познакомиться с теми областями языка, которые в повседневной жизни практически не востребованы, и в будущем, когда они вдруг понадобятся — у вас уже будет опыт их использования.

Франк-Энштейн на CodePen

Стоит отметить и скорость работы. Вы реже обращаетесь к документации, чтобы вспомнить какое-то редкое свойство, учитесь использовать сокращенные варианты записи различных свойств, а также собираете коллекцию готовых решений для каких-то сложных задач, которые часто отнимают много времени при верстке.

Упрощаем разметку

Вы не ослышались. Один из занятных моментов, связанных с данным видом деятельности, это создание чего-либо из одного элемента. Берется один div и на его основе делается сложная фигура. Наглядный пример — Yin-Yang:

Yin-Yang на CodePen

Чем больше верстальщик узнает о CSS, тем мешьше необходимость в многочисленных контейнерах для элементов. Структура HTML в наших проектах становится проще, его легче читать и поддерживать.

Делимся опытом

Codepen предоставляет прекрасную возможность поделиться тем, что вы делаете, с окружающими. Это не только возможность смотреть, но и возможность учиться. Начинающий разработчик может посмотреть на код более опытного и перенять опыт использования чего-то необычного для него или просто посмотреть на пример использования тех или иных свойств CSS.

Монстр на CodePen

К сожалению, в русскоязычном интернете такой подход пока не очень популярен, люди склонны читать книжки или смотреть видео, но стоит обратить внимание и на такой вариант обучения. Часто можно услышать мнение, что для изучения CSS нужно брать большой проект и разбираться в нем. Но это не всегда работает — большой проект -> много кода -> сложная система сборки, не очень дружелюбная к начинающим. В результате тратится слишком много усилий на то, чтобы понять устройство сложных инструментов, вместо того, чтобы изучать основы языка. Здесь получается иная ситуация — есть немного HTML, немного CSS, и понять, что за что отвечает, достаточно просто.

Кому это может быть полезно?

Начинающие верстальщики — Для начинающих верстальщиков создание картинок на CSS — это возможность в игровой форме изучать редкие (и не только редкие) свойства CSS.

Не очень начинающие — почему бы не размять мозги, и не оторваться на пару часов от повседневных задач?

HR — вам не надоели все эти стандартные тестовые задания (сверстайте todo-лист, сверстайте чат, сверстайте макет, который все уже ретвитили тысячу раз..)? Включите воображение — пусть ваш дизайнер нарисует какую-нибудь зверушку, а кандидат ее сверстает! Это проверит не только знания CSS, но и способность нестандартно мыслить. Да и в случае, если он вам не подойдет, у него останется интересная работа, которую не стыдно и в другом месте показать.

Бобер на CodePen

Что посмотреть?

→ CSS Quests — с этого все началось, сейчас там затишье, но многие надеются, что конкурсы вернутся → Daily CSS Images → Sasha на CodePen → Она же снимает видео о том, как она делает эти картинки (для любителей смотреть видео). Это не уроки, но кому-то может быть интересно.

habrahabr.ru


Смотрите также