Красивые кнопки, но прежде чем постить очередной пост о кнопках на CSS3, удивите народ, сделайте их хоть по всем правилам — clip2net.com/s/1tHso (ie7) обязательно учтите fallback для старых браузеров, понятно что там кнопки будут просто синими прямоугольниками, но кликаться вне области кнопки точно не должны.
В любом случае, надо будет дублировать стиль, и Опера будет скруглять и отенять сначала картинку, а потом еще будет те же манипуляции производить на псевдоэлемент.
Когда другие браузеры начнут поддерживать псевдоэлементы на img, свойства дублироваться будут. Надёжней с обёрткой, если спектр поддерживаемых браузеров большой, если делать только для последних версий мажорных, то можно обойтись без хаков, ибо Опера уже закруглят картинки как надо.
Дополнил свой вариант jsfiddle.net/operatino/xZkgX/30/ имеет лишние обёртки и побольше кода, но не нужно дублировать сорс картинки, использовать еще не стандартное свойство из черновиков, и не нужно выставлять фиксированные размеры.
При клике на аватарку, можно сохранить аватарку в Хроме, Сафари (на телефоне тоже), ФФ, Опере 10 (в 11.52 не работает, псевдоэлемент перекрывает картинку, ждём поддержки pointer-events).
Если нужно сделать что бы работало на неоднородном фоне, придётся увеличить внутренние рамки.
Добавление префиксов при компиляции, будет мешать разработке, т.к. нельзя будет просто по рефрешу страницы увидеть изминения, только после перезборки или доп плагинами.
Лучше делать live templates, или решать вопрос на уровне плагинов к IDE.
Загрузка шрифтов блокирует загрузку других инстанций, как js и css.
Пока не загрузился шрифт, вместо иконок будут буквы, и поисковые роботы будут читать лишние символы.
PS но дабблет нериально крут )
При клике на аватарку, можно сохранить аватарку в Хроме, Сафари (на телефоне тоже), ФФ, Опере 10 (в 11.52 не работает, псевдоэлемент перекрывает картинку, ждём поддержки pointer-events).
Если нужно сделать что бы работало на неоднородном фоне, придётся увеличить внутренние рамки.
content: ''при правом клике на аватарку, не доступны операции с картинкой (сохранить изображение, копировать URL).Посмотрел в других браузерах, всё нормально, спасибо за интересное решение.
border-radius: 50em;Лучше делать live templates, или решать вопрос на уровне плагинов к IDE.
Пока не загрузился шрифт, вместо иконок будут буквы, и поисковые роботы будут читать лишние символы.
Так же, как сказал tegger, defenition list, тут по семантике не подходит.
Я бы такую кнопки делал в 1 на css3 с мягкой деградацией, максимум в 2 тега, для большей совместимости.