Флаер, като сайт.
- Автор dalasweb
- Начална дата
dalasweb
Well-Known Member
нещо такова, без полето под снимката , само да си стои надписа дезайн и т.н
Sky
Well-Known Member
Нещо такова ли?
js.dearflip.com
DearFlip JS/jQuery Flipbook Plugin
Create Responsive Flipbooks from PDF with DearFlip HTML5 Flipbook jquery plugin. Easy HTML and jQuery syntaxes make the process even easier.
js.dearflip.com
dalasweb
Well-Known Member
Това е хубаво дето си го пратил.Нещо такова ли?
DearFlip JS/jQuery Flipbook Plugin
Create Responsive Flipbooks from PDF with DearFlip HTML5 Flipbook jquery plugin. Easy HTML and jQuery syntaxes make the process even easier.
Пдф е а4 като потрет не е, като книга.Ако има за това упер ще е.
Линка дето съм пратил ме устройва.
dalasweb
Well-Known Member
Най лесен вариант.
Смятам 21 страници да ги изкарам, като снимки и да се слайдват.
това също е хубаво
Намерих само снимките искам отгоре надолу да се движат и да е на цял екран независимо от устройството.
Всъшност искам да го сейфна, ноне ми дава css или съм забравил как се правеше.
Сейфнах сайта и css
.Барнах кода, но нито снимки се показват, нито мога по-голям размер на снимките да сложа.
Ама съм ...
Човекът си е дал линк към файловете, а аз от оно време навика да копирам и изтегля всичко през сайта.
www.smashingmagazine.com
Смятам 21 страници да ги изкарам, като снимки и да се слайдват.
това също е хубаво
Намерих само снимките искам отгоре надолу да се движат и да е на цял екран независимо от устройството.
Pure CSS3 Cycle Slider
A Pure CSS3 Cycling Slideshow! Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.
demo.alessioatzeni.com
Всъшност искам да го сейфна, ноне ми дава css или съм забравил как се правеше.
Сейфнах сайта и css
.Барнах кода, но нито снимки се показват, нито мога по-голям размер на снимките да сложа.
Код:
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pure CSS3 Cycle Slider</title>
<link rel="stylesheet" type="text/css" media="screen" href="images/style.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,400,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
<meta name="description" content="A Pure CSS3 Cycling Slideshow! Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.">
<meta name="keywords" content="CSS3, CSS3 Slideshow, HTML/CSS Tutorials, Smashing Magazine">
<link rel="canonical" href="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/">
</head>
<body>
<div class="content">
<h1>Pure CSS3 Cycle Slider</h1>
</div>
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="#">
<img src="images/img_1.jpg" alt="Cougar">
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="images/img_2.jpg" alt="Lions">
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="images/img_3.jpg" alt="Snowalker">
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="images/img_4.jpg" alt="Howling">
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="images/img_5.jpg" alt="Sunbathing">
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>
</body></html>
CSS:
@import url("reset.css") screen;
@import url("animation.css") screen;
/* Common */
html, body {
background:#eaeaea url(../img/bg.png) repeat;
font-size:12px;
font-family:"Open Sans", serif;
min-width:960px;
margin:0;
padding:0;
color:#aaa;
}
.content h1 {
font-size:48px;
color:#000;
text-shadow:0px 1px 1px #f4f4f4;
text-align:center;
padding:60px 0 30px;
}
/* LAYOUT */
.container {
margin:0 auto;
overflow:hidden;
width:960px;
}
/* CONTENT SLIDER */
#content-slider {
width:100%;
height:360px;
margin:10px auto 0;
}
/* SLIDER */
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:320px;
width:680px;
margin:40px auto 0;
overflow:visible;
position:relative;
}
#mask {
overflow:hidden;
height:320px;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}
#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
}
#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}Ама съм ...
Човекът си е дал линк към файловете, а аз от оно време навика да копирам и изтегля всичко през сайта.
A Pure CSS3 Cycling Slideshow — Smashing Magazine
Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.
www.smashingmagazine.com
Последно редактирано:
Krumov
Well-Known Member
С код може и да може ама нямам идея ка. Иначе с фотошопа я правиш по-едричка