Создание перекрывающихся, странно вращающихся спрайтов - PullRequest
Новая
       31

Создание перекрывающихся, странно вращающихся спрайтов

3 голосов
/ 22 июля 2011

Мой текущий проект включает в себя настройку связок боковых панелей, так что готовый дизайн выглядит следующим образом: Finished design.

Предполагается, что конверты перемещаются и перекрываются (то есть меняют z-индекс),в зависимости от того, какой значок / текст в данный момент имеет: состояние при наведении.

Я думал, что каждый будет отдельным файлом PNG, но мне дали спрайт, который выглядит следующим образом: Sprite

Есть какие-нибудь предложения, как мне этого добиться?Обычно я просто изменяю фоновое положение элементов списка, в котором находится каждый фрагмент текста, но я не думаю, что это возможно, учитывая их перекрывающуюся природу.Ему просто нужно экспортировать его по-другому?

Большое спасибо ...

Ответы [ 5 ]

4 голосов
/ 22 июля 2011

Мне кажется, что спрайт будет работать отлично. Самое левое изображение предназначено для отображения книги, второе изображение для Twitter, третье для Facebook, далее для электронной почты. Я предполагаю, что последний является просто состоянием по умолчанию. Сложно сделать эту работу с чистым css и: hover (но возможно!), Однако с javascript было бы очень легко.

Для чистого решения CSS, div со спрайтом должен быть дочерним по отношению ко всем текстовым элементам, так что вы можете изменить фон на основе: hover на родительском элементе (текст). Если это не ясно, я могу привести пример кода.

Edit:

Это не идеально, но это доказательство концепции.

JsFiddle: http://jsfiddle.net/jp6fy/

CSS: 

#side{
    position:relitive;
    height:341px;
    width:250px;
}

#link1{
    top:0;
}

.link{
    position:absolute;
    left:0;
    top:85px;
    height:85px;
    padding-left:160px;
    width:90px;
}

#image{
    position:absolute;
    top:-255px;
    left:0;
    z-index:-1;
    background:url(http://i.stack.imgur.com/I2Y4k.png) -720px 0;
    height:341px;
    width:150px;
}

#link1:hover #image{
    background-position:-540px 0;
}

#link2:hover #image{
    background-position:-360px 0;
}

#link3:hover #image{
    background-position:-180px 0;
}

#link4:hover #image{
    background-position:-0px 0;
}

HTML: 

<div id='side'>
    <div class='link' id='link1'>
        email
        <div class='link' id='link2'>
            facebook
            <div class='link' id='link3'>
                twitter
                <div class='link' id='link4'>
                    book
                    <div id='image'></div>
                </div>
            </div>
        </div>
    </div>
</div>
2 голосов
/ 22 июля 2011

Это возможно. (Но некрасиво.)

Поскольку селектор :hover может влиять только на элементы внутри (или непосредственно смежные) с триггерным элементом, решение состоит в том, чтобы вкладывать триггерные элементы: (jsFiddle) 

<style>
div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 100px;
}
#image { background: black; }
#trigger1, #trigger1:hover #image { background: red; }
#trigger2, #trigger2:hover #image { background: green; }
#trigger3, #trigger3:hover #image { background: blue; }
</style>

<div id="trigger1">
  <div id="trigger2">
    <div id="trigger3">
      <div id="image"></div>
    </div>
  </div>
</div>

Но предпочтительно, чтобы спрайты конверта экспортировались отдельно (вы, конечно, можете использовать спрайты CSS). Это должно дать вам более простой HTML и CSS, уменьшенное изображение, и вам не придется возиться с вложенными абсолютно позиционированными элементами, каждый из которых имеет свою собственную систему координат.

1 голос
/ 22 июля 2011

Я попробовал подход, который делает разметку довольно простой, с одним дополнительным несемантическим div на элемент: 

<ul>
    <li id="email">
        <div class="background"></div>
        <em>Email</em> chris
    </li>
    <li id="facebook">
        <div class="background"></div>
        <em>Facebook</em> follow us
    </li>
    <li id="twitter">
        <div class="background"></div>
        <em>Twitter</em> your life away
    </li>
    <li id="book">
        <div class="background">
        </div><em>Book</em> a project
    </li>
</ul>

Я разместил все разные копии фонового элемента div в одном месте, а затем изменил положение фона в зависимости от состояния наведения: 

/* First, just style the document and the list text in general. 
   skip on for the important bit */
body {
    background-color: black;
    color: white;
}
ul {
    width: 350px;
    margin-top: 40px;
    position: relative;
}
li {
    margin-right: 40px;
    font-family: "Century Gothic", Helvetica, sans-serif;
    text-align: right;
    margin-bottom: 0px;
    padding: 15px 4px 25px 0;
}
li em {
    text-transform: uppercase;
    display: block;
}
li:hover {
    color: red;
}

/* From here down is the important bit */

/* Set up the sprite in all the .background divs */
div.background { 
    background-image: url(http://i.stack.imgur.com/I2Y4k.png); 
    position: absolute;
    top: 0;
    left: 0;
    height: 341px;
    width: 160px;
}

/* By default, turn off the background in all the divs */
div.background {
    display: none;
}

/* Just picking an arbitrary item to show the default, non-hover background */
#email div.background  {
    display: block;
    background-position-x: -737px;
}

/* If we're hovering over the list as a whole, disable the default background,
   so it doesn't show up underneath the background we want to display */
ul:hover #email div.background {
    display: none;
}

/* For the email item, which shows our arbitrary default background, override
   to the email background on hover with more specificity than the default rule */
ul:hover #email:hover div.background {
    display: block;
    background-position-x: 0px;
}

/* For all other items, override to their background on hover */
#facebook:hover div.background {
    display: block;
    background-position-x: -375px;    
}

#twitter:hover div.background {
    display: block;
    background-position-x: -189px;

}

#book:hover div.background {
    display: block;
    background-position-x: -556px;    
}

Рабочий, хотя и слегка грубый пример, в этом jsFiddle .

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

0 голосов
/ 10 июля 2015

Мой метод с чистым HTML. 

.nav { position: relative; }

.nav li {
  margin-left: 179.8px;
  list-style-type: none;
}

.nav li:before {
  position: absolute;
  left: 0; top: 0;
  content: url(http://i.stack.imgur.com/I2Y4k.png);
  clip: rect(0 899px 341px 719.2px);
  margin-left: -719.2px;
  z-index: 1;
}

.nav li:hover:before { z-index: 2; }

.email:hover:before {
  clip: rect(0 179.8px 341px 0);
  margin-left: 0;
}

.facebook:hover:before {
  clip: rect(0 359.6px 341px 179.8px);
  margin-left: -179.8px;
}

.twitter:hover:before {
  clip: rect(0 539.4px 341px 359.6px);
  margin-left: -359.6px;
}

.book:hover:before {
  clip: rect(0 719.2px 341px 539.4px);
  margin-left: -539.4px;
}
<ul class="nav">
  <li class="email">Email</li>
  <li class="facebook">Facebook</li>
  <li class="twitter">Twitter</li>
  <li class="book">Book</li>
</ul>
0 голосов
/ 22 июля 2011

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

поисковая ссылка Google по идее

...