Итак, вы видели красивые кнопки BonBon и Super Awesome Buttons, и вы действительно хотите использовать их в своем веб-дизайне. Только, как мы все знаем, большинство людей используют Internet Explorer, что делает их рендерингом, как дерьмом.
В этом уроке я покажу, как вы можете превратить хорошо известную супер-удивительную кнопку в спрайт, который можно использовать в большинстве современных браузеров, и выглядеть так же хорошо, как в webkit. Вы можете использовать эту технику для многих вещей, таких как рамки, рамки и так далее.
Перед началом работы вам необходимо установить webkit2png и imagemagick .
Теперь давайте начнем с простой кнопки и сохраним ее как /tmp/awesome.html . Мне нравится синий:
<style> a { background: #222 url(http://www.zurb.com/images/alert-overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); cursor: pointer; font-size: 13px; font-weight: bold; line-height: 1; background-color: #ff5c00; } </style> <a href="#"> </a>
Будет отображаться так:
Давайте просто увеличим ширину этой штуки, поскольку мы собираемся сократить ее позже:
a { ... width: 240px; }
Так-то лучше:
Теперь, чтобы передать это в изображение, мы, конечно, могли бы просто сделать скриншот. Но это не сохранило бы тонкие альфа-каналы в тени. Итак, давайте разберемся с webkit2png :
webkit2png --transparent --output=./awesome.png file:///tmp/awesome.html
Обратите внимание, что вам нужно указать абсолютный путь к входному файлу в качестве второго аргумента, используя протокол file:// .
Это должно дать вам awesome.png экрана в awesome.png 800 × 600 пикселей. Давайте немного урежем это, не так ли? Для этого вам нужно установить imagemagick :
convert -trim +repage awesome.png awesome.png
Et voila — изображение теперь 260 × 26 пикселей. Но нам также нужно изображение для эффекта наведения. Так что давайте просто немного откорректируем таблицу стилей. Это должно сделать:
a { ... background-color: #f90; }
Сохраните его под новым /tmp/awesome-hover.html . Теперь повторите процесс сверху:
webkit2png --transparent --output=./awesome-hover.png file:///tmp/awesome-hover.html convert -trim +repage awesome-hover.png awesome-hover.png
Затем мы склеиваем две части вместе, чтобы создать наш спрайт. Imagemagick снова пригодится:
montage awesome.png awesome-hover.png -background transparent -tile 1x2 -geometry +0+0 combined.png
Итак, теперь у нас есть два состояния, представленные в одном спрайте. Хорошо, но нам все еще нужно создать CSS, чтобы использовать его. Давайте создадим новый документ в awesome-sprite.html :
<style> body { font-family: sans-serif; } a { background: url(combined.png) no-repeat; display: inline-block; padding: 6px 10px 6px; color: #fff; text-decoration: none; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); cursor: pointer; font-size: 13px; font-weight: bold; line-height: 1; width: 240px; } a:hover { background-position: 0 -26px; } </style> <a href="#">Awesome</a>
Обратите внимание, что я отрегулировал отступы, чтобы компенсировать границы нижней части. Таким образом, общая высота останется неизменной.
Но ждать. Это хорошо и все, но этот спрайт заблокирован на фиксированную ширину 260 пикселей. Что, если мы хотим сделать это жидким? Для этого мы можем использовать технику раздвижных дверей :
<style> body { font-family: sans-serif; } a { background: url(combined.png) no-repeat; background-position: right 0; display: inline-block; padding-right: 10px; } a span { background: url(combined.png) no-repeat; background-position: left 0; display: inline-block; padding-top: 6px; padding-bottom: 6px; padding-left: 10px; color: #fff; text-decoration: none; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); cursor: pointer; font-size: 13px; font-weight: bold; line-height: 1; } a:hover { background-position: right -26px; } a:hover span { background-position: left -26px; } </style> <a href="#"><span>Awesome</span></a>
Я переместил большую часть стиля во внутренний span и оставил некоторые отступы, чтобы освободить место для концов спрайта. Это достаточно близко, но есть проблема:
Посмотрите на стороны этой вещи!
Поскольку наш спрайт прозрачен, мы не можем просто наложить изображения таким образом. Нам нужно сделать некоторую операцию спрайтам. Сначала давайте нарежем концы во временное изображение:
convert sprite.png -gravity west -crop 250x52+0+0 +repage left.png convert sprite.png -gravity east -crop 10x52+0+0 -background transparent -extent 250x52 right.png
Это разрезает спрайт на левую и правую стороны, где непрерывный фон находится вместе с левой частью.
И наконец, давайте объединим их обратно в один спрайт:
montage left.png right.png -background transparent -tile 1x2 -geometry +0+0 sprite_final.png
В итоге мы получаем спрайт, который выглядит так:
Затем просто настройте смещения на этих фонах:
<style> body { font-family: sans-serif; } a { background: url(sprite_final.png) no-repeat; background-position: right 0; display: inline-block; padding-right: 10px; } a span { background: url(sprite_final.png) no-repeat; background-position: left 0; display: inline-block; padding-top: 6px; padding-bottom: 6px; padding-left: 10px; color: #fff; text-decoration: none; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); cursor: pointer; font-size: 13px; font-weight: bold; line-height: 1; } a:hover { background-position: right -26px; } a:hover span { background-position: left -26px; } </style> <a href="#"><span>Awesome</span></a>
И вот мы здесь. Действительно здорово.
Вы можете повторить эту формулу, вставив ее в скрипт оболочки, и у вас будет своя маленькая фабрика кнопок. На самом деле, будучи Рождеством и всем, я сделал всю работу за тебя Просто сохраните фрагмент как webkit_sprite и сделайте его исполняемым ( chmod +x webkit_sprite ), и вы можете вызвать его следующим образом:
PADDING=10 HTML_NORMAL=normal.html HTML_HOVER=hover.html ./webkit_sprite