Заказать услугу
  • +38 099 227-70-70
  • +38 097 770-63-63

Фигурки с помощью 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%;
}
Посты этой рубрики посвящены инструментам и стратегиям интернет-маркетинга, призванным увеличить конверсию сайта. Статьи будут интересны и полезны нынешним и будущим владельцам онлайн-бизнеса.
Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.
В рубрике «Разбор заплывов» специалисты студии Webakula делятся не только своими опытом, наблюдениями, выводами, но и практическими советами.
Рубрика поможет разобраться с базовыми терминами интернет-маркетинга, веб-разработки и дизайна. Статьи пригодятся любознательным индивидуумам, которым не безразлична тема сайтостроения.
Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании Webakula с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)