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

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

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

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

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

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

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

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

Вот HTML:


<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.corners.js" type="text/javascript"></script></code>

<!-- .buttonz  {  color:#ffffff;  font-size:14px; } h1, .heading {  color:#000000;  font-size:14px; } .buttonz a,.buttonz a:href, .buttonz a:active {  color:#ffffff; } table, table td { border:solid 1px gray; }

#iconmenu {position: relative; margin: 10px auto; padding: 3px; width: 206px; height: 52px; background: url(pattern.gif);} #iconmenu li {width: 50px; height: 50px; position: absolute; top: 2px; background: url(icons.gif) 0 0 no-repeat; display: block; list-style: none;} #iconmenu a {width: 50px; height: 50px; display: block; border: solid 1px #fff;} #iconmenu a:hover {border: solid 1px #000;} #iconmenu #panel1c {left: 2px;} #iconmenu #panel2c {left: 54px; background-position: -51px 0;} #iconmenu #panel3c {left: 106px; background-position: -102px 0;} #iconmenu #panel4c {left: 158px; background-position: -153px 0;}

#iconmenu #panel1c a:hover {background: url(icons.gif) -1px -52px no-repeat;} #iconmenu #panel2c a:hover {background: url(icons.gif) -52px -52px no-repeat;} #iconmenu #panel3c a:hover {background: url(icons.gif) -103px -52px no-repeat;} #iconmenu #panel4c a:hover {background: url(icons.gif) -154px -52px no-repeat;}

-->
<h1>CSS спрайт (sprite)</h1>
<table>
<tbody>
<tr>
<td></td>
<td>
<ul id="iconmenu">
<li id="panel1c"><a href="#"></a></li>
<li id="panel2c"><a href="#"></a></li>
<li id="panel3c"><a href="#"></a></li>
<li id="panel4c"><a href="#"></a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<h1>Фиксированиый размер кнопки</h1>
<!--<asp:LinkButton OnClick="submit_Click" runat="server"">-->
<table>
<tbody>
<tr>
<td>text-align:center</td>
<td>padding</td>
<td colspan="2">text overflow</td>
</tr>
<tr>
<td>
<div style="text-align: center; float: left; width: 140px; background: url(btn_sprite.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;"><span style="padding-top: 5px;">
<!--<asp:Literal runat="server" Text="Send a tweet" />-->Send a tweet
</span></div></td>
<td>
<div style="float: left; width: 140px; background: url(btn_sprite_twit.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;">
<div style="padding-top: 5px; padding-left: 30px;"><!--<asp:Literal runat="server" Text="Send a tweet" />-->Send a tweet</div>
</div></td>
<td>
<div style="float: left; width: 140px; background: url(btn_sprite_twit.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;">
<div style="padding-top: 5px; padding-left: 30px;"><!--<asp:Literal runat="server" Text="Send a tweet" />-->Send a tweet, Send a tweet, Send a tweet</div>
</div></td>
<td>
<div style="float: left; width: 140px; background: url(btn_sprite_twit.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;">
<div style="padding-top: 5px; padding-left: 30px;"><!--<asp:Literal runat="server" Text="Send a tweet" />-->Send_a_tweet,Send_a_tweet,Send_a_tweet,Send_a_tweet,</div>
</div></td>
</tr>
</tbody>
</table>
<h1>Кнопки с изображением</h1>
<table>
<tbody>
<tr>
<td>background cut</td>
<td>relative position</td>
<td>float images</td>
<td>float right</td>
<td>float center-text</td>
</tr>
<tr>
<td></td>
<td>
<div style="float: left; width: 25px; background: url(btn_sprite_twit.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;"><img style="position: relative; top: 3px;" src="twit.png" alt="" />
<img style="position: relative; top: -3px;" src="twit.png" alt="" /></div></td>
<td>
<div style="float: left; width: 140px; background: url(btn_sprite_twit.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;"><img style="float: right;" src="twit.png" alt="" />
<img style="float: right;" src="twit.png" alt="" />
<img style="float: right;" src="twit.png" alt="" />
<img style="float: right;" src="twit.png" alt="" />
<img style="float: right;" src="twit.png" alt="" />
<img style="float: right;" src="twit.png" alt="" /></div></td>
<td>
<div style="float: left; width: 140px; background: url(btn_sprite.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;"><img style="padding-top: 5px; float: right;" src="twit.png" alt="" />
<div style="padding-top: 5px;">Send a tweet</div>
</div></td>
<td>
<div style="float: left; width: 140px; background: url(btn_sprite.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;"><img style="padding-top: 5px; float: left;" src="twit.png" alt="" />
<div style="text-align: center; width: 100%; padding-top: 5px;">Send a tweet</div>
</div></td>
</tr>
</tbody>
</table>
<h1>Тянущиеся кнопки</h1>
<table>
<tbody>
<tr>
<td>
<div style="float: left; background: url(btn_sprite_twit.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;">
<div style="padding-top: 5px; padding-left: 30px;"><!--<asp:Literal runat="server" Text="Send a tweet" />-->Send a tweet</div>
</div></td>
<td>
<div style="float: left; background: url(btn_sprite_twit.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;">
<div style="padding-top: 5px; padding-left: 30px;"><!--<asp:Literal runat="server" Text="Send a tweet" />-->Send a tweet, tweet, tweet</div>
</div></td>
<td>
<div style="float: left; color: #ff0000; background: url(btn_sprite_twit.png) no-repeat scroll 0px 0px transparent; overflow: hidden; height: 34px;">
<div style="padding-top: 5px; padding-left: 30px;"><!--<asp:Literal runat="server" Text="Send a tweet" />-->Send a tweet, tweet,tweet, tweet,tweet, tweet, tweet, ops tooooo long</div>
</div></td>
</tr>
</tbody>
</table>
<h1>Пример X-marks</h1>
<table>
<tbody>
<tr>
<td>
<p style="margin: 16px 4px; position: relative; text-align: center;"><span style="border: medium none; margin: 0pt; padding: 10px 4px 10px 24px; background: transparent url(xmarks-sprite2.png) repeat scroll -400px -6px; display: inline; cursor: pointer; color: white; font-size: 10px;" onclick="alert('clicked')">
Пример из Xmarks, тянущаяся кнопка</span><span style="margin: 0pt; padding: 10px 6px; background: transparent url(xmarks-sprite2.png) repeat scroll -620px -6px; font-size: 10px;"> </span></p>
</td>
<td>
<p style="margin: 16px 4px; position: relative; text-align: center;"><span style="border: medium none; margin: 0pt; padding: 10px 4px 10px 24px; background: transparent url(xmarks-sprite2.png) repeat scroll -400px -6px; display: inline; cursor: pointer; color: white; font-size: 10px;" onclick="alert('clicked')">
Поведение в случае
переноса</span><span style="margin: 0pt; padding: 10px 6px; background: transparent url(xmarks-sprite2.png) repeat scroll -620px -6px; font-size: 10px;"> </span></p>
</td>
</tr>
</tbody>
</table>
<h1>jQuery corners</h1>
<table>
<tbody>
<tr>
<td>round text</td>
<td>cool text and image</td>
<td>mixed (http://malsup.com/jquery/corner/)</td>
<td>bordered</td>
</tr>
<tr>
<td>
<div id="c1" style="height: 34px; background: url(btn_sprite_bg.png) repeat-x scroll 0% 0% transparent;">
<div style="padding: 5px;">Send a tweet</div>
</div></td>
<td>
<div id="c2" style="height: 34px; background: url(btn_sprite_bg.png) repeat-x scroll 0% 0% transparent;">
<div style="padding: 5px;"><img src="twit.png" alt="" />Send a tweet</div>
</div></td>
<td>
<div id="c3" style="height: 34px; background: url(btn_sprite_bg.png) repeat-x scroll 0% 0% transparent;">
<div style="padding: 5px;"><img src="twit.png" alt="" />Send a tweet</div>
</div></td>
<td>
<div style="background-color: blue;">
<div id="c4" style="height: 34px; background: url(btn_sprite_bg.png) repeat-x scroll 0% 0% transparent;">
<div style="padding: 5px;"><img src="twit.png" alt="" />Send a tweet</div>
</div>
</div></td>
<td></td>
</tr>
</tbody>
</table>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
// ------- Уголки -------
$("#c1").corner("round");
$("#c2").corner("cool 5px");
$("#c3").corner("sharp tl 5px").corner("bite tr 5px").corner("dog bl 5px").corner("slide br 5px");
$("#c4").corner("round 8px").parent().css('padding', '2px').corner("round 10px")
// ------- Уголки -------
});
// ]]></script>

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

HTML, AJAX, JS & CSS, Как? Подписатся на RSS поток

Печать

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

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

Рубрики

Архивы

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

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

Рубрики

Метки

Архивы