Наскоро прочетох – “A couple of interesting UI techniques at Flickr” от Signal vs Noise. И особенно ми хареса номера с използването на unicode за визуализирането на стрелки. Като винаги ме е дразнело това че трябва да се прибягва до картинки за елементарни неща. Напоследък гледам да избягвам колкото мога използването на каквито и да е било картинки. Малко съм улеснен от това че там където ми се налга да пиша CSS не се налага да се подържа нито едно IE, така че мога да се възползвам от неща като border-radius / box-shadow / text-shadow / gradients и други.
Но да се върна на темата. По принцип за това за което yahoo са ползвали стрелката аз ползвам този номер – “iPhone back button“. Обаче веднага след като видях това за unicode – ▲ (буквално след 5 мин) вече му намерих първото приложение. Заменяйки цели 3 картинки (normal / hover / active ) за един бутон.
Пример
Малко по късно използвах тази техника и за нещо за което си мисля от доста време. Когато се отвори папка стрелкичката с ефект да се завърти от една до друга позиция. Това сега става изключтелно лесно само чрез
.arrow {
/* цвят и размерите на бутона, както и вертикално как да се разположи */
font-size: 10px;
color: #000;
vertical-align: 2px;
/* без подчертаване и outline */
text-decoration: none;
outline: none;
/* това е важно зада може да трансформираме елемента */
display: inline-block;
/* завърти стрелката на 90 градуса */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
/*
това мисля че не се потдъжа от никой още,
но много скоро мисля че стане стандарт
*/
transform: rotate(90deg);
/* анимирай всички промени по стрелката за 0.3 секунди */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
/*
тъй като не искам да пиша в кода си unicode синволи,
е по-добре да се добави автоматично от css
*/
.arrow:after {
content: "▲";
}
/*
когато е отворена стрелката тя се завърта на 180 градуса
*/
.arrow.opened {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
За задействането на ефекта е необходимо само да се сложи или премахне клас “opened” от “.аrrow” елемент. Това ще работи при Chrome, Safari, Opera и Firefox. Като само при Firefox за ефектите ще се почака малко.
Ето и 2 примерни JavaScript кода за стрелките с Prototype и jQuery (който са “доста” подобни):
// Prototype
document.on('click', '.arrow', function(e, element){
e.preventDefault();
element.toggleClassName('opened');
});
// jQuery
$('a.arrow').live('click', function(e){
e.preventDefault();
$(this).toggleClass('opened');
});
Ето и примерен arrows.html
Заключение
Тук може да се сложат :hover , :focus, :active където примерно да се сменя цвета на бутона или сянката. И това ще става анимирано по презумция. И няма да се налага да се ходи до Photoshop, после да се генерират sprite-тове (между другото за тяхното генериране, мисля скоро ще open-source-на едно мое tool-че за работа с тях) и да се позиционират при най-малките промени.
Комбинациятата от unicode синволи и CSS3 е страшно мощна. И може да елиминира 2 от най-големите причини за “бавни” сайтове – ненужни картинки и javascript за ефекти.
Аз имам късмет че там където правя такива неща не се подържа IE и просто мога да кажа че си е цял рай. Особенно хубавото на css ефектите е че не трябва да се грижите за конфликти в анимцията и други дребни промени. Още повече в много Java Script код съм виждал излишно много писаници за ефекти, вместо да Java Script да се грижи само за логиката.
Ако някой има идей и предложение по темата ще се радвам да ги чуя, тъй като това е доста нова територия.
п.п. Ако ви трябва и за IE да работи, аз лично бих направил отделен файл ie-only.css и там бих ползвал картинки (няма как) и не бих правил ефектите. Който ползва IE едно че не е свикнал да вижда добре работещи ефекти, две че и не заслужава такива неща.
). Много полезно и абсолютно задължително за тези, които не искат цял живот само да ползват неща, които не разбират.