Фігурки за допомогою 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%; }
ПІДПИСАТИСЯ НА РОЗСИЛКУ НОВИН
Останнє в нашому блозі
Інтернет маркетинг
04.11.2019
Інтернет маркетинг
03.10.2019