Слайдер с помощью CSS и jQuery - 1000 р.
Добрый день. Кто может скопировать слайдер с этого Сайта http://www.netdreams.co.uk/ и вставить мне на сайт ? (Есть урок как его сделать, но придётся и в Фотошопе полазить...)
Нужно установить точно такой же слайдер ко мне на сайт, так же на на шапку... Или аналогичный, чтоб смотрелся так же круто=)) В общем что требуется: 1. Установка готового (Если найдёте), создание нового с уже приготовленным уроком по его созданию без исходников. 2. Подгонка под шапку, знание фотошопа (рисовки любой) + не много вёрстки. 3. После вставки, исправить чучуть дизайн под этот слайдер. Это рисунок кнопки пуск и верхняя панель сайта Это 20 минут от силы, там всё легко. |
Крутость заключается в медленно набирающемся названии?)
|
Цитата:
|
Цитата:
|
Цитата:
|
Ну блин что нет знатоков по слайдерам ? От силы 3 часа работы кто шарит что куда...
|
Цитата:
|
Цитата:
|
Цитата:
|
пять минут и дизайн:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.slider {
position: relative;
background-color: #000;
border: 1px solid #666;
width: 860px;
height: 278px;
}
.slider .images {
overflow: hidden;
width: 100%;
height: 100%;
}
.slider .images div {
width: 100%;
height: 100%;
}
.slider .helper {
position: absolute;
bottom: 0;
width: 100%;
}
.slider .helper .fill {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
.slider .helper .texts {
position: relative;
float: left;
}
.slider .helper .texts p {
display: inline-block;
margin: 15px 0 0 20px;
padding-left: 20px;
font: normal normal 400 10px/16px Tahoma;
color: #fff;
border-left: 1px solid #666;
text-transform: uppercase;
}
.slider .helper .texts p:first-child {
border-left: 0;
padding-left: 0;
}
.slider .helper .buttons {
position: relative;
float: right;
padding: 8px 10px 4px 0px;
}
.slider .helper .buttons b {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 100%;
background-color: #000;
border: 0;
border-left: 1px solid #343434;
border-bottom: 1px solid #343434;
margin: 6px;
}
.slider .helper .buttons b.active {
border: 0;
border-left: 1px solid #51959D;
border-top: 1px solid #51959D;
background-color: #02B1D7;
background-image: linear-gradient(to bottom, #59DBEA, #024F7B);
}
</style>
</head>
<body>
<div class="slider">
<div class="images">
<div style="background-image: url('http://www.netdreams.co.uk/wp-content/themes/netdreams/headers/dynamic/EUNAVFOR.jpg')"></div>
<div style="background-image: url('http://www.netdreams.co.uk/wp-content/themes/netdreams/headers/dynamic/Perfect_pint.jpg')"></div>
</div>
<div class="helper">
<div class="fill"></div>
<div class="texts">
<p><b>CLIENT</b>: Perfect Pint</p>
<p>What Real Ales are serving near me? Perfect Pint will show you.</p>
</div>
<div class="buttons">
<b></b><b class="active"></b><b></b><b></b><b></b>
</div>
</div>
</div>
</body>
</html>
А дальше прикручивание скриптов для анимации |
| Часовой пояс GMT +3, время: 00:39. |