2012-10-27 21:18:14

License: MIT License

Fork: 0

Fav: 1

View: 1727

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 0 lines
HTML 36 lines
CSS 110 lines

using only CSS. created by Azik Samarkandiy. Follow me on twitter @samarkandiy

Accordion slider

<div class="slider">
  <div class="slides">
    <p class="title"><q>Come forth into the light of things, let nature be your teacher.</q>
      <span class="author">William Wordsworth </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>Look deep into nature, and then you will understand everything better.</q>
      <span class="author">Albert Einstein </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>A bird doesn't sing because it has an answer, it sings because it has a song.</q>
      <span class="author">Lou Holtz </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>The butterfly counts not months but moments, and has time enough. </q>
      <span class="author">Rabindranath Tagore </span>
    </p>  
  </div>
  <div class="slides">
    <p class="title"><q>There are always flowers for those who want to see them.</q>
      <span class="author">Henri Matisse </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>Green is the prime color of the world, and that from which its loveliness arises.</q>
      <span class="author">Pedro Calderon</span>
    </p>
  </div>
</div>
<a class="github" href="https://github.com/html5web" target="_blank"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<h3>follow me 
  <a href="https://twitter.com/samarkandiy" target="_blank">@samarkandiy</a>
</h3>

Accordion slider

body{
  background: #ccc;
  width: 900px;
  margin: 0 auto;
  padding: 40px;
}
.slider{
  background: #222 url(http://lorempixel.com/output/nature-q-c-900-300-1.jpg);
  position: relative;
  width: 900px;
  height: 300px;
  cursor: pointer;
  overflow: hidden;
  border: solid 7px #111; 
}

.slides{
  width: 800px;
  height: 300px;
  float: left;
  position: absolute;
  transition: margin .3s linear;
}

.slides:nth-child(1){
  background: #222 url(http://lorempixel.com/output/nature-q-c-900-300-10.jpg);
  
}

.slides:nth-child(2){
  background: #333 url(http://lorempixel.com/output/nature-q-c-900-300-5.jpg);
  margin-left: 150px;
}

.slides:nth-child(3){
  background: #444 url(http://lorempixel.com/output/nature-q-c-900-300-7.jpg);
  margin-left: 300px;
}

.slides:nth-child(4){
  background: #555 url(http://lorempixel.com/output/nature-q-c-900-300-6.jpg);
  margin-left: 450px;
}

.slides:nth-child(5){
  background: #666 url(http://lorempixel.com/output/nature-q-c-900-300-2.jpg);
  margin-left: 600px;
}

.slides:nth-child(6){
  background: #777 url(http://lorempixel.com/output/nature-q-c-900-300-1.jpg);
  margin-left: 750px;
}

.slides:hover{
  margin: 0 50px 0 50px;
  position: absolute;
  z-index: 9999;
  transition: .1s linear;
}

.slides:hover .title{
  transform: translateY(-140px);
  transition: .5s linear;
}

.title{
  background: rgba(255, 255, 255, .7);
  margin: 30px;
  padding: 20px;
  border-radius: 5px;
  position: absolute;
  bottom: -150px;
}

q{
  font-size: 16px;
  font-style: italic;
}

.author{
  margin: 0 0 0 20px;
}

::selection{
  background: #222;
  color: #fff;
}

.github img{
  position: absolute; 
  top: 0; 
  right: 0; 
  border: 0;
}

h3{
  font-family: "Courier";
  color: #111;
  text-align: right;
  position: absolute;
  bottom: -10px;
  right: 10px;
}

h3 a{
  color: #111;
  text-decoration: none;
}

using only CSS. created by Azik Samarkandiy. Follow me on twitter @samarkandiy <div class="slider"> <div class="slides"> <p class="title"><q>Come forth into the light of things, let nature be your teacher.</q> <span class="author">William Wordsworth </span> </p> </div> <div class="slides"> <p class="title"><q>Look deep into nature, and then you will understand everything better.</q> <span class="author">Albert Einstein </span> </p> </div> <div class="slides"> <p class="title"><q>A bird doesn't sing because it has an answer, it sings because it has a song.</q> <span class="author">Lou Holtz </span> </p> </div> <div class="slides"> <p class="title"><q>The butterfly counts not months but moments, and has time enough. </q> <span class="author">Rabindranath Tagore </span> </p> </div> <div class="slides"> <p class="title"><q>There are always flowers for those who want to see them.</q> <span class="author">Henri Matisse </span> </p> </div> <div class="slides"> <p class="title"><q>Green is the prime color of the world, and that from which its loveliness arises.</q> <span class="author">Pedro Calderon</span> </p> </div> </div> <a class="github" href="https://github.com/html5web" target="_blank"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> <h3>follow me <a href="https://twitter.com/samarkandiy" target="_blank">@samarkandiy</a> </h3>body{ background: #ccc; width: 900px; margin: 0 auto; padding: 40px; } .slider{ background: #222 url(http://lorempixel.com/output/nature-q-c-900-300-1.jpg); position: relative; width: 900px; height: 300px; cursor: pointer; overflow: hidden; border: solid 7px #111; } .slides{ width: 800px; height: 300px; float: left; position: absolute; transition: margin .3s linear; } .slides:nth-child(1){ background: #222 url(http://lorempixel.com/output/nature-q-c-900-300-10.jpg); } .slides:nth-child(2){ background: #333 url(http://lorempixel.com/output/nature-q-c-900-300-5.jpg); margin-left: 150px; } .slides:nth-child(3){ background: #444 url(http://lorempixel.com/output/nature-q-c-900-300-7.jpg); margin-left: 300px; } .slides:nth-child(4){ background: #555 url(http://lorempixel.com/output/nature-q-c-900-300-6.jpg); margin-left: 450px; } .slides:nth-child(5){ background: #666 url(http://lorempixel.com/output/nature-q-c-900-300-2.jpg); margin-left: 600px; } .slides:nth-child(6){ background: #777 url(http://lorempixel.com/output/nature-q-c-900-300-1.jpg); margin-left: 750px; } .slides:hover{ margin: 0 50px 0 50px; position: absolute; z-index: 9999; transition: .1s linear; } .slides:hover .title{ transform: translateY(-140px); transition: .5s linear; } .title{ background: rgba(255, 255, 255, .7); margin: 30px; padding: 20px; border-radius: 5px; position: absolute; bottom: -150px; } q{ font-size: 16px; font-style: italic; } .author{ margin: 0 0 0 20px; } ::selection{ background: #222; color: #fff; } .github img{ position: absolute; top: 0; right: 0; border: 0; } h3{ font-family: "Courier"; color: #111; text-align: right; position: absolute; bottom: -10px; right: 10px; } h3 a{ color: #111; text-decoration: none; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

Azik-Samarkandiy

URL
http://iweb.uz/azik

Web designer, polyglot.

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/1X6p/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

GeckoTang

Accordion slider

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by