Создание чистого CSS-дока - PullRequest
Новая
       21

Создание чистого CSS-дока

6 голосов
/ 22 октября 2011

После игры с CSS 3 у меня возникла безумная идея сделать док-станку в стиле OS X (контейнер DIV с элементами внутри него, который, используя подкласс CSS: hover, увеличивается при наведении курсора мыши). Тем не менее, я сталкиваюсь с некоторыми странными эффектами при его реализации. Пока что это то, что я пробовал:

код 

<html>
<head>
<style>
body{
    margin:0;
}
.dockHolder{
    width:100%;
    position:absolute;
    text-align:center;
    display:block;
    bottom:0;
}
.dock{
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    text-align:center;
}
.dockItem{
    height:50%;
    display:inline-block;
    position:relative;
    bottom:0;
    vertical-align:bottom;
    text-align:center;

    transition-property:width, height;
    -o-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:linear;
    -o-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
    -webkit-transition-timing-function:linear;
}
.dockItem:hover{
    height:100%;
    width:auto;
}
</style>
</head>
<body>
<div class="dockHolder" style="height:64px;max-height:64px;border:1px solid black;">
    <div class="dock" style="background-color:lightgray;">
        <center>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="pony.png" /></div>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="bhs256.png" /></div>
        </center>
    </div>
</div>
</body>
</html>

Моя тестовая страница на http://s.supuhstar.operaunite.com/s/content/testAnims.htm(died с Opera Unite), если вы хотите посмотреть, что у меня есть.

Отсутствует функциональность

Неожиданные эффекты включают в себя:

  • Невозможность разместить элемент dock внизу элемента dockHolder
  • dockItem элемент не расширяется по ширине вместе со своим дочерним изображением
  • dockItem и dock не будут центрироваться внутри контейнера dockHolder с CSS (пробовал margin:auto;, box-pack:center;, box-align:center; и т. Д.); работает только тег <center> HTML
  • В Opera и Firefox (я отказался от IE), dockItem очень широки

Предполагаемые эффекты , которые отсутствуют:

  • dockItem s остаются в элементе dock до изменения размера, когда они увеличиваются пропорционально размеру элемента dockHolder, но элемент dock остается того же размера
  • Элемент dock постоянно достаточно широкий, чтобы в нем содержались все dockItem с, и никогда не шире, не короче, чем общая ширина всех dockItem с и их полей.

Вопрос

У кого-нибудь есть решение, которое исправит неожиданные эффекты или реализует отсутствующие предполагаемые эффекты?

Окончательная реализация

Ниже приведен код моего окончательного решения: 

<!DOCTYPE html><html>
<head>
<style type='text/css'>
body{
    margin:0;
}
.dockHolder {
    position: fixed;
    text-align: center;
    bottom: 0; 
    left: 0;
    right: 0;
    height: 128px;
    line-height: 128px;
}

.dock {
    background:#CCCCCC;
    background:
        -o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    border: 1px solid gray;
    max-width:100%;
    vertical-align: bottom;
    line-height: 1em;
    padding: 0 8px;
    border-radius: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dockItem {
    display: inline;
    height: 50%;
    vertical-align: bottom;

    transition-property:width, height;
    -o-transition-property:width, height;
    -ms-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -ms-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:ease-in-out;
    -o-transition-timing-function:ease-in-out;
    -ms-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
    -webkit-transition-timing-function:ease-in-out;
}
.dockItem:hover {
    height: 100%;
}
.dockItem:active {
    vertical-align:top;
    height:95%
}
</style>
</head>
<body>
    <div class="dockHolder" style="height:128px;line-height:128px;">
        <span class="dock">
            <img class="dockItem" src="pony.png"/>
            <img class="dockItem" src="bhs256.png"/>
            <img class="dockItem" src="mcgrass.png"/>
        </span>
    </div>

</body>
</html>

Рабочий пример (может устареть): http://admin.s.supuhstar.operaunite.com/s/content/testDock.html (умер с Opera Unite)

Ответы [ 3 ]

6 голосов
/ 22 октября 2011

Как это?

HTML: 

<div class="dockbg"></div>
<div class="dock">
    <img src="foo.png">
    <img src="bar.png">
</div>

CSS: 

.dockbg {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
    background: #bbb;
}

.dock {
    position: fixed;
    text-align: center;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 100px;
    line-height: 100px;
}

.dock img {
    display: inline-block;
    vertical-align: bottom;
    height: 50%;
    padding: 0 5px;
    /* + your animation properties */
}


.dock img:hover {
    height: 100%;
}

Демо: http://jsfiddle.net/simevidas/QM7M7/3/show/

0 голосов
/ 22 октября 2011

Используйте javascript и css, чтобы сделать значки до и после наведенного значка немного больше для более плавной анимации;)

0 голосов
/ 22 октября 2011
  • Для меня проблема в том, что вы не указываете фиксированный размер ширины.Моя идея - отменить класс dockItem, он вам не нужен.Играйте прямо с CSS-классом img.
  • Для центрирования вашего элемента используйте «margin: auto 0px auto 0px;».
  • Прежде всего, используйте сброс, это поможет вам сделать это правильно: http://html5doctor.com/html-5-reset-stylesheet/#comment-18168
  • у вас должен отображаться блок;и плавать: слева;чем на дисплее: inline-block;
  • Вы должны использовать элементы <ul> и <li>, чтобы помочь вам.
...