Фигурки с помощью 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%;
}

Последнее в нашем блоге

Хорошо и дешево — работает ли это в SEO?

Интернет-маркетинг

04.11.2019

Как продвигать ваш бизнес — SEO, SMM или реклама?

Интернет-маркетинг

03.10.2019