Блог

Это то, что я видел в Grooveshark, что устраняет необходимость использования нескольких изображений для расширяемых кнопок и тому подобного.

В принципе, изображение, подобное этому

используется для создания кнопок любой ширины, меньшей, чем само изображение. Я предполагаю, что это делается путем каким-то образом обрезки середины, но я не уверен, как. Я просмотрел свойства CSS для его использования здесь, но, похоже, не могу выяснить, что сделано, кроме 15px отступов с обеих сторон.

Кто-нибудь знает, как воспроизвести тот же эффект?

Редактировать: просто для ясности, я говорю об вырезании середины одной кнопки (я понимаю, что я дал изображение спрайта для 4 стилей кнопок, поэтому может возникнуть путаница, когда я говорю «вырезание средней части изображения»). часть изображения»).

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

Например:

 .menu li {
  background: url(button-sprite.png) 0 0 no-repeat;
  padding-left: 10px;
}

.menu li a {
  background: url(button-sprite.png) 100% 0 no-repeat;
  display: block;
}
  

Элемент списка показывает левый край изображения. Заполнение позволяет показывать левый край, когда сверху накладывается другой элемент.

Элемент привязки показывает правый край изображения, и он обрезается до требуемой ширины текстового содержимого.

CSS позволяет перемещать фоновое изображение в любую позицию. Для отображения части фона вам необходимо определить CSS следующим образом:

 .button {
  background: transparent url(sprite.png) left top no-repeat;
  display: block;
  height: 40px;
  width: 160px;
}
.button:hover {
  background-position: left bottom;
}
.button:focus {
  background-position: left center;
/* or
  background-position: left -50%;
  background-position: left -40px;
*/
}
  

@Pixelatron; я знаю, что вы принимаете ответ, но проверьте, может быть, этот пример поможет вам и упростит решение http://jsfiddle.net/sandeep/CQmJz /

css:

 a{
    text-decoration:none;
    display:inline-block;
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat 0 0;
    position:relative;
    padding:8px 0 8px 10px;
    height:17px;
}
a:after{
    content:"";
    display:block;
    background:url(http://i.stack.imgur.com/gYknG.png) no-repeat -490px 0;
    position:absolute;
    height:33px;
    width:10px;
    top:0;
    right:-10px;
}


a:hover{
    background-position:0 -34px;
}
a:hover:after{
    background-position:-490px -34px;
}
  

Я не знаю способа манипулировать изображениями подобным образом в CSS,
я думаю, вы обнаружите, что они делают, чтобы верхнее изображение и нижнее изображение всегда были сверху и снизу, а остальное просто заполняли средним изображением. Это также может быть применено к каждой стороне, я добавлю код CSS3, код CSS2 должно быть легко определить.

Это будет выглядеть как (CSS3):

 .button_horizontal {
    background: url(topimage) top left no-repeat, 
                url(bottomimage) bottom left no-repeat,
                url(middleimage) top left repeat-y;

} 


.button_vertical {
    background: url(left.png) top left no-repeat, 
                url(right.png) top right no-repeat,
                url(middle.png) top left repeat-x;
}
  

Это будет выглядеть как (CSS2):

 .top {
  background: url(top.png) top left no-repeat; 
  width:100%;
  height:10px;
}

.middle {
  background: url(bottom.png) bottom left no-repeat;
  width:100%;
  height:180px;
}
.button{
  background: url(middle.png) top left repeat-y;
  width:500px;
  height:200px;
}

<div class="button">
  <div class="top">amp;nbsp;</div>
  <div class="middle"><p>stuff goes in here :D</p></div>
</div>
  

Это называется border-image .