Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Фигуры в 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.yoksel.ru

Фигуры на 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; }

webonrails.ru

Создание идеальных адаптивных фигур с помощью единицы измерения 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

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

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

www.dejurka.ru


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



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!