Картинка блога
«
»
Окт
13

CSS Sprites, кропки с текстом и картинкой.

ff-Screenshot - 12.10.2009 , 11_41_46Про CSS спрайты уже наверно написали все, кому не лень. Так как сам я сталкиваюсь с ними все чаще, решил сделать небольшую подсказку, для себя и всех желающих.

Сама техника заключается в создании комбинированного изображения, из которого затем вырезаем нужную часть с помощью свойств background-position. Техника в первую очередь уменьшает число загрузок с сервера, так как несколько картинок находится в одном файле. А также позволяет сделать много инетересного только с помощью CSS.

Сплайн можно вставить например в тело ASP.NET LinkButton, или использовать onclientclick как это показанно в примере с X-Marks.

В примере используется несколько техник:

  • Кнопка с текстом и изображением на заднем фоне.
  • Тянущаясяя кнопка с текстом и изображениями.
  • Уголки JQuery corners. Пример >>
  • Изменение изображения кнопки в CSS на сплайнах.

Я нестал описывать прием не стандартного спрайт маппинга. Его пример можно посмотреть здесь, а почитать на английском в этой статье.

Полный архив можно скачать с Filebase.usanov.net

 

Вот HTML:





CSS спрайт (sprite)

Фиксированиый размер кнопки

text-align:center padding text overflow

Send a tweet
Send a tweet
Send a tweet, Send a tweet, Send a tweet
Send_a_tweet,Send_a_tweet,Send_a_tweet,Send_a_tweet,

Кнопки с изображением

background cut relative position float images float right float center-text






Send a tweet

Send a tweet

Тянущиеся кнопки

Send a tweet
Send a tweet, tweet, tweet
Send a tweet, tweet,tweet, tweet,tweet, tweet, tweet, ops tooooo long

Пример X-marks


Пример из Xmarks, тянущаяся кнопка


Поведение в случае
переноса

jQuery corners

round text cool text and image mixed (http://malsup.com/jquery/corner/) bordered
Send a tweet
Send a tweet
Send a tweet
Send a tweet




Спасибо за внимание :)

 

HTML, AJAX, JS & CSS, Как? Подписатся на RSS поток Печать Печать Послать другу Послать другу

Похожие статьи

    Нет похожих статей.