Фигуры в css

Css-фигуры

06/09/2013

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

Все фигуры из этого примера можно сделать на основе одного элемента.

Кольца можно сделать с помощью border или box-shadow, причем во втором случае рамка кольца не увеличивает размер фигуры, а колец может быть несколько и они могут быть смещены относительно друг друга:

Сердечки, с трансформами и без:

Инь-ян, удивительно просто, на самом деле (добавлено 3.03.2013). По-моему, на css-tricks.com/examples/ShapesOfCSS/ предлагается более изящное решение, которое, к тому же, решает проблему просвечивающего контура у фигуры с тенями.

Стрелочки:

Про стрелки подробнее читать тут

Цветок:

Про цветы из Css можно почитать тут.

Метки: рамки, тени, псевдоэлементы, Ссылки по теме: css-tricks.com/examples/ShapesOfCSS/ nicolasgallagher.com/pure-css-gui-icons/demo/— целое семейство иконок, сделанных на чистом Css Box shadow Transform Border radius Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter. → ←

Фигуры на CSS используя один DIV

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

Квадрат

/* Квадрат */ #square { width: 100px; height: 100px; background: #FF0000; }

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

/* Прямоугольник */ #rectangle { width: 200px; height: 100px; background: #FF0000; }

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

/* Параллелограмм */ #parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); -ms-transform: skew(20deg); background: #FF0000; }

Трапеция

/* Трапеция */ #parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); -ms-transform: skew(20deg); background: #FF0000; }

Круг

/* Круг */ #circle { width: 100px; height: 100px; background: #FF0000; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -khtml-border-radius: 50px; }

Овал

/* Овал */ #ellipse { width: 200px; height: 100px; background: #FF0000; border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; -khtml-border-radius: 100px / 50px; }

Треугольник верх

/* Треугольник верх */ #triangle-up { width: 0px; height: 0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #FF0000; }

Треугольник низ

/* Треугольник низ */ #triangle-down { width: 0px; height: 0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #FF0000; }

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

/* Треугольник лево */ #triangle-left { width: 0px; height: 0px; border-top: 50px solid transparent; border-right: 100px solid #FF0000; border-bottom: 50px solid transparent; }

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

/* Треугольник право */ #triangle-right { width: 0px; height: 0px; border-top: 50px solid transparent; border-left: 100px solid #FF0000; border-bottom: 50px solid transparent; }

Треугольник верхний левый угол

/* Треугольник верхний левый угол */ #triangle-topleft { width: 0px; height: 0px; border-top: 100px solid #FF0000; border-right: 100px solid transparent; }

Треугольник верхний правый угол

/* Треугольник верхний правый угол */ #triangle-topright { width: 0px; height: 0px; border-top: 100px solid #FF0000; border-left: 100px solid transparent; }

Треугольник нижний левый угол

/* Треугольник нижний левый угол */ #triangle-bottomleft { width: 0px; height: 0px; border-bottom: 100px solid #FF0000; border-right: 100px solid transparent; }

Треугольник нижний правый угол

/* Треугольник нижний правый угол */ #triangle-bottomright { width: 0px; height: 0px; border-bottom: 100px solid #FF0000; border-left: 100px solid transparent; }

Создание идеальных адаптивных фигур с помощью единицы измерения CSS vw

Так как верстка страниц становится все более сложной, разработчикам требуется доступ к большему количеству единиц измерений, чтобы воплотить дизайн в жизнь. Кроме привычных процентов, em и rem, и пикселей существуют более новые единицы измерения vw и vh, и родственные им vmin и vmax, предоставляющие более мощные способы создания адаптивного дизайна, которые нередко могут помочь отказаться от использования точек перехода @media.

Выходим за пределы использования процентов

Традиционные единицы измерения CSS создают следующие проблемы в веб-дизайне:

• Единица измерения процент не всегда работает, как ожидается. Разработчикам приходится помнить о внешних отступах, задавая размеры элементам. Не следует использовать единицу измерения процент для задания высоты элементу body. Запись font-size: 50% задает тексту размер, равный половине его стандартного размера, а не устанавливает зависимость между размером текста и размером содержащего его элемента.
• Почти невозможно создавать фигуры идеальной формы для разных размеров окна браузера. Очень сложно добиться того, чтобы элемент был идеально квадратным и в то же время адаптивным.

Единицы измерения vw и vh в значительной мере решают все эти проблемы.

Поддерживание идеальных пропорций

С помощью единиц измерения vw и vh очень легко создать идеальные фигуры на веб-страницах. Эти единицы измерения можно использовать для задания значений размеров почти всех свойств CSS. Поэтому если нужно создать элемент, который при любых размерах окна браузера занимает 20% его ширины и при этом остается квадратным, нужно задать одинаковые значения свойствам ширины и высоты, используя единицу измерения vw:

div.twentysquare { background: #999; width: 20vw; height: 20vw; }

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

Используя тот же способ, можно легко создать прямоугольник, высота которого вдвое больше его ширины при любых размерах окна браузера:

div.onetworect { width: 20vw; height: 40vw; }

Задать баннеру идеальное соотношение размеров очень просто с помощью следующего кода CSS:

div.goldenrect { width: 100vw; height: 61.8vw; background: red; }

Для оптимального масштабирования текста в адаптивном блоке, занимания всего предоставленного ему объема с разбивкой на строки, нужно всего лишь задать размер шрифта в единицах измерения vw.

Автор урока Dudley Storey

Перевод — Дежурка

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

---

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

• 
  Как в word отредактировать таблицу
• 
  Как вставить рисунок в колонтитул word
• 
  Красивые таблицы css в html
• 
  Как вставить в word фоновый рисунок
• 
  Как сделать рисунок полупрозрачным в word
• 
  Как поменять одну страницу на альбомную в word
• 
  Как рулить php на apache
• 
  Как создать html страницу
• 
  Как работать с колонтитулами в word 2010
• 
  Как в word убрать черную полосу
• 
  Как открыть html код страницы