Фігурки за допомогою 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 00;
    -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