• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Библиотека книг дизайн страницы

Разработка Библиотека книг дизайн страницы

Нет прав для скачивания
Библиотека книг дизайн страницы.
Пишем HTML код:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jabas - Library</title>
    <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="content">
        <ul class="library"></ul>
        <div class="overlay-page"></div>
        <div class="overlay-summary"></div>
    </div>
</body>
</html>
Стиль для страницы:
CSS:
body {
    width: 960px;
    margin: 0 auto;
    font-family: 'pt sans', sans-serif;
}

.content {
    position: relative; top: 0; left: 0;
    z-index: 1;
}

/*-----------------------------------------------------------------------------*/
/* LIBRARY LIST */
/*-----------------------------------------------------------------------------*/
ul.library {
    margin: 0;
    padding: 0 0 10px 0;
    list-style-type: none;
    overflow: hidden;
}

li.book {
    position: relative; top: 0; left: 0;
    margin: 0;
    padding: 10px;
    float: left;
    width: 140px; height: 224px;
    cursor: pointer;
}
li.book.selected{ z-index: 4;} /* moves selection over page overlay */

/* hover & active */
.book:hover { background-color: #E5E5E5; }
.book:active { background-color: #D9D9D9; }
.book.selected:hover, li.book.selected:active { background-color: transparent;} /* disables user feedback when selected */

/*-----------------------------------------------------------------------------*/
/* BOOK COVERS */
/*-----------------------------------------------------------------------------*/
.book .cover {
    cursor: pointer;
    width: 140px; height:224px;
    box-shadow: 3px 3px 5px rgba(0,0,0,.3);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    zoom: 1;
}

.book .cover img {
    background-color: #e5e5e5;
    width: 140px; height: 224px;
    border-width: 0px; /* border to be later leveraged by animation */
    border-style: solid;
    border-color: #FFFFFF;
}

/* animation start points determined by book position */
.book.selected .cover { position: absolute; top: 10px; }

.book.selected.left-side.first .cover, .book.selected.right-side .cover { left: 10px; right: auto;}
.book.selected.right-side.last .cover , .book.selected.left-side .cover { left: auto; right: 10px;}

/*-----------------------------------------------------------------------------*/
/* SUMMMARY ABSTRACTS */
/*-----------------------------------------------------------------------------*/
li.book .summary {
    display: none;
    cursor: default;
    position: absolute; top: 10px;
    z-index: 4;
    padding: 10px;
    width: 450px; height: 0px;
    overflow: hidden;
}

.summary h1, .summary h2, .summary p { cursor: text;}

.summary h1 {
    font-size: 36px;
    line-height: 42px;
    margin: 0 0 4px 0; padding: 0;
}

.summary h2 {
    font-weight: normal;
    font-style: italic;
    font-size: 24px;
    margin: 0 0 12px 0;
    padding: 0 0 12px 0;
    border-bottom: 2px dotted #999999;
}

.summary p {
    font-size: 18px;
    line-height: 24px;
    margin: 0; padding: 0;
}

/* vertical placement of summary determined by book position*/
.left-side .summary { left: 160px; border-right: 10px solid #D9D9D9; }
.left-side.first .summary { left: 320px; }

.right-side .summary { left: -480px; border-left: 10px solid #D9D9D9; }
.right-side.last .summary { left: -640px; }

/*-----------------------------------------------------------------------------*/
/* PAGE OVERLAYS */
/*-----------------------------------------------------------------------------*/
.overlay-page {
    display: none;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #FFFFFF;
    opacity: .7;
    filter: alpha(opacity = 70);
    z-index: 2;
}

.overlay-summary {
    display: none;
    position: absolute; top: 0; left: 0; height: 0px; width: 480px;
    background-color: #E5E5E5;
    opacity: .9;
    filter: alpha(opacity = 90);
    z-index: 3;
}
Jquery код пропустим он весьма большой и перейдем сразу к результату:
03е8d73.gif
Симпатии: Понравилось 25517
Автор
baltun
Скачиваний
0
Первый выпуск
Обновление
Рейтинг
0.00 звезд Оценок: 0

Еще ресурсы от baltun

Поделиться этим ресурсом

Вверх Снизу