html — Как в CSS сверстать неровную фигуру?
Stack Overflow на русском- 0
- +0
- Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
- Мета Обсудить принципы работы и политику сайта
- О нас Узнать больше о компании Stack Overflow
- Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
- Войти Регистрация
-
текущее сообщество
- Stack Overflow на русском справка чат
- Stack Overflow на русском Meta
ru.stackoverflow.com
Рисуем различные фигуры CSS
Первым в списке будет квадрат — разметка предельно просто, потребуется всего один блок и несколько строчек css
html:
<div></div>
css:
.square {
width: 100px;
height: 100px;
background: #cc0000;
}
Меняя значения размеров и цвет фона блока рисуем квадрат нужного размера
Пример того, что должно получиться:
Как из квадрата получить прямоугольник, я думаю, объяснять нет нужды, а вот нарисовать круг, к сожалению, без свойства css3 border-radius не получится.
html:
<div></div>
css:
.circle {
width: 100px;
height: 100px;
background: #cc0000;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Пример того, что должно получиться:
Немного изменив значения css свойств можем получить из круга овал.
html:
<div></div>
css:
.ellipse {
width: 200px;
height: 100px;
background: #cc0000;
-moz-border-radius: 100px/50px;
-webkit-border-radius: 100px/50px;
border-radius: 100px/50px;
}
Пример того, что должно получиться:
К сожалению, получить круг и овал в IE 7-8 без хаков не получится. Следует так же учитывать, что чем мельче элемент, тем хуже сглаживание по краям.
Следующий подопытный в нашем списке — треугольник.
html:
<div></div>
css:
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;;
}
Пример того, что должно получиться:
Манипулируя значениями свойств css можно получить довольно причудливые формы треугольников. Обращаю внимание — цвет бордера должен задаваться для большей стороны. Ну и опять же, чем мельче элемент, тем хуже сглаживание по краям, но в отличии от круга и овала работает в ИЕ.
siteis.ru
Геометрические фигуры при помощи CSS — Артем Демо
28-08-2014, 22:06
При помощи CSS можно создавать интересные геометрические фигуры, это уже давно не только инструмент оформления. Если с практической точки зрения сложно придумать назначение для этих приемов, то с визуальной это достаточно интересно.
В любом случае стоит обратить внимание, что работа с CSS зачастую связанна с геометрическими объектами и как следствие с матиматическими вычислениями. Если кого-то это пугает, то он можно продолжить заниматься простыми оформлениями сайтов. Не то что бы я имею что-то против таких сайтов – просто на мой взгляд веб разработка это нечто большее.
Итак геометрические фигуры при помощи CSS
Круг
See the Pen CSS shapes – circle by Artem Demo (@artemdemo) on CodePen.
Шести-лучевая звезда
Пяти-лучевая звезда
See the Pen CSS shapes – star 5 points by Artem Demo (@artemdemo) on CodePen.
Сердце
See the Pen CSS shape – heart by Artem Demo (@artemdemo) on CodePen.
Инь Янь
See the Pen CSS shapes – yin-yang by Artem Demo (@artemdemo) on CodePen.
Увеличительное стекло
Зачастую наши возможности ограничиваются только нашей фантазией 🙂
Поделиться: Please enable JavaScript to view the comments powered by Disqus. comments powered byartemdemo.me
Создание идеальных адаптивных фигур с помощью единицы измерения 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