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

Иногда можно довольно хорошо сэкономить на рисунках используя обычный 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%; }
ПОДПИСАТЬСЯ НА РАССЫЛКУ НОВОСТЕЙ
Последнее в нашем блоге
Интернет-маркетинг
04.11.2019
Интернет-маркетинг
03.10.2019