Фигурки с помощью css2 и css3

Фигурки с помощью css2 и css3

idea

Иногда можно довольно хорошо сэкономить на рисунках используя обычный css, к примеру в навигационных элементах сайта, простой треугольник влево может подсказать пользователю в каком направлении ведет эта ссылка. А как красиво можно анимировать данные элементы переходя с одной фигуры в другую, как это обычно делают во флеше (анимация объектов). С одной стороны громоздко и много кода, с другой можно с легкостью поменять цвет, и применить различные эффекты анимации. Инструмент не пропадет в руках умелого мастера.

css 2.0

Пару примеров различных треугольников
.triangle-up {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid #DE3B25;}
.triangle-down {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid #DE3B25;}
.triangle-left {
float: left;
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-right: 100px solid #DE3B25;
 border-bottom: 50px solid transparent;}
.triangle-right {
float: left;
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-left: 100px solid #DE3B25;
 border-bottom: 50px solid transparent;}
.triangle-topleft {
float: left;
 width: 0;
 height: 0;
 border-top: 100px solid #DE3B25;
 border-right: 100px solid transparent;}
.triangle-topright {
float: left;
 width: 0;
 height: 0;
 border-top: 100px solid #DE3B25;
 border-left: 100px solid transparent;
}
.triangle-bottomleft {
float: left;
 width: 0;
 height: 0;
 border-bottom: 100px solid #DE3B25;
 border-right: 100px solid transparent;}
.triangle-bottomright {
float: left;
 width: 0;
 height: 0;
 border-bottom: 100px solid #DE3B25;
 border-left: 100px solid transparent;}

И самое интересное css 3.0

Круг и конечно же сердечко
.circle {
float: left;
 width: 100px;
 height: 100px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 box-shadow:0px 0px 3px #999;background-image: linear-gradient(bottom, #DE3B25 16%, #FF593F 58%, #FF745F 79%);background-image: -o-linear-gradient(bottom, #DE3B25 16%, #FF593F 58%, #FF745F 79%);background-image: -moz-linear-gradient(bottom, #DE3B25 16%, #FF593F 58%, #FF745F 79%);background-image: -webkit-linear-gradient(bottom, #DE3B25 16%, #FF593F 58%, #FF745F 79%);background-image: -ms-linear-gradient(bottom, #DE3B25 16%, #FF593F 58%, #FF745F 79%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.16, #DE3B25),
color-stop(0.58, #FF593F),
color-stop(0.79, #FF745F));}
.heart {
float: left;
 position: relative;
 width: 100px;
 height: 90px;}.heart:before,.heart:after {
 position: absolute;
 content: "";
 left: 50px;
 top: 0;
 width: 50px;
 height: 80px;
 background: #DE3B25;
 -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%;}
Давайте дружить!
Поставьте нравится 👍
Спасибо, я уже с вами!
Вы подписались на нашу рассылку
Спасибо!
Мы обещаем, что не будем спамить, все только самое
нужное и полезное для вашего развития.
Спасибо!
Мы свяжемся с Вами в ближайшее время
ЛОВИТЕ БОНУС
Бесплатный аудит контекстной рекламы Google Adwords.
Прокачаем ваш контекст!