Skip to content

Instantly share code, notes, and snippets.

@ramsesoriginal

ramsesoriginal/dabblet.css

Created April 24, 2012 07:53
Show Gist options
  • Save ramsesoriginal/2477646 to your computer and use it in GitHub Desktop.
Save ramsesoriginal/2477646 to your computer and use it in GitHub Desktop.
Download ZIP
List of horizontal scrollers
Raw
dabblet.css
/**
* List of horizontal scrollers
*/
* { box-sizing: border-box; }
#artikelliste {
width: 825px; /*6 Items * 100 px + 200px title + 25px scroll button (the other one is outside)*/
margin-left: auto;
margin-right: auto;
padding:0;
border:0;
}
#artikelliste > ul {
padding: 0;
margin:0;
list-style: none;
}
#artikelliste > ul > li {
display: block;
padding:0;
margin:0;
border:0;
}
.artikellisteLine {
height: 102px;
border-top:1px solid silver;
border-bottom:1px solid silver;
padding:0;
margin:0;
white-space: nowrap;
overflow: visible;
vertical-align:middle;
position:relative;
}
.artikellisteLine > h1,
.artikellisteLine > .scrollbutton,
.artikellisteLine > .scroller {
display: inline-block;
padding:0;
margin:0;
vertical-align:middle;
}
.artikellisteLine > h1 {
width:200px;
height: 100px;
overflow:hidden;
}
.artikellisteLine > .scrollbutton{
height:100px;
width:25px;
}
.artikellisteLine > .scrollnext { /*positioned on the rightmost edge of the box, and then moved outside of the box*/
position:absolute;
right:-25px;
}
.artikellisteLine > .scroller {
width:601px;
margin-right: -1px;
overflow:hidden;
}
.scroller {
padding: 0;
margin:0;
list-style: none;
white-space: nowrap;
}
.scroller li{
vertical-align:top;
padding: 0;
margin:0;
display: inline-block;
transition-property: all;
transition-duration: 0;
transition-delay: 999999s;
transition-timing-function: ease-in-out;
}
.scroller li article{
padding: 0;
margin:0;
border-left: 1px solid silver;
border-right: 1px solid silver;
width: 101px;
height:100px;
margin-right:-1px;
overflow: hidden;
}
a.scrollbutton:hover ~ .scroller li{
transition: all 5s;
}
a.scrollnext:hover ~ .scroller.over7 li{
transform: translate(-101px);
}
a.scrollnext:hover ~ .scroller.over8 li{
transform: translate(-202px);
}
a.scrollnext:hover ~ .scroller.over9 li{
transform: translate(-303px);
}
a.scrollnext:hover ~ .scroller.over10 li{
transform: translate(-404px);
}
a.scrollnext:hover ~ .scroller.over11 li{
transform: translate(-505px);
}
a.scrollnext:hover ~ .scroller.over12 li{
transform: translate(-606px);
}
a.scrollnext:hover ~ .scroller.over13 li{
transform: translate(-707px);
}
a.scrollnext:hover ~ .scroller.over14 li{
transform: translate(-808px);
}
a.scrollnext:hover ~ .scroller.over15 li{
transform: translate(-909px);
}
a.scrollnext:hover ~ .scroller.over16 li{
transform: translate(-1010px);
}
a.scrollnext:hover ~ .scroller.over17 li{
transform: translate(-1111px);
}
a.scrollnext:hover ~ .scroller.over18 li{
transform: translate(-1212px);
}
a.scrollnext:hover ~ .scroller.over19 li{
transform: translate(-1313px);
}
a.scrollnext:hover ~ .scroller.over20 li{
transform: translate(-1414px);
}
a.scrollprev:hover ~ .scroller li{
transform: translate(0);
transition-timing-function: linear;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h1>Demo for horizontal scrollers</h1>
<section id="artikelliste">
<h1>Artikelliste</h1>
<ul>
<li>
<section id="schubgratten" class="artikellisteLine">
<h1>
Schubkarren
</h1><a href="#" class="scrollprev scrollbutton">
◀
</a><a class="scrollnext scrollbutton" href="#">
▶
</a><ul class="scroller over8">
<li>
<article>
<h1>schubkarren 1</h1>
<figure>
<img src="schubkarren1.jpg" alt="schubkarren">
<figcaption>In <a href="#">grün</a>, <a href="#">rot</a> und <a href="#">gelb</a></figcaption>
</figure>
</article>
</li><li>
<article>
<h1>schubkarren 2</h1>
<figure>
<img src="schubkarren2.jpg" alt="schubkarren">
</figure>
</article>
</li><li>
<article>
<h1>schubkarren 3</h1>
<figure>
<img src="schubkarren3.jpg" alt="schubkarren">
<figcaption>Lorem ipsum dolor sit amet</figcaption>
</figure>
</article>
</li><li>
<article>
<h1>schubkarren 4</h1>
<figure>
<img src="schubkarren4.jpg" alt="schubkarren">
<figcaption>Cras nec cursus enim. In ligula lacus</figcaption>
</figure>
</article>
</li><li>
<article>
<h1>schubkarren 5</h1>
<figure>
<img src="schubkarren5.jpg" alt="schubkarren">
<figcaption>Pellentesque nisl nisl, sagittis id pellentesque</figcaption>
</figure>
</article>
</li><li>
<article>
<h1>schubkarren 6</h1>
<figure>
<img src="schubkarren6.jpg" alt="schubkarren">
<figcaption>Nunc adipiscing justo ante. Sed fringilla erat ac libero rutrum</figcaption>
</figure>
</article>
</li><li>
<article>
<h1>schubkarren 7</h1>
<figure>
<img src="schubkarren7.jpg" alt="schubkarren">
<figcaption>Sed vel velit nisl, ac rutrum ante</figcaption>
</figure>
</article>
</li><li>
<article>
<h1>schubkarren 8</h1>
<figure>
<img src="schubkarren8.jpg" alt="schubkarren">
</figure>
</article>
</li>
</ul>
</section>
</li>
<li>
<section id="Bohrmaschiene" class="artikellisteLine">
<h1>
Bohrmaschienen
</h1><div class="scrollprev scrollbutton">
</div><div class="scrollnext scrollbutton">
</div><ul class="scroller">
<li>
<article>
<h1>Bohrmaschiene 1</h1>
<figure>
<img src="bohrmaschiene1.jpg" alt="bm">
<figcaption> Suspendisse sit amet erat est</figcaption>
</figure>
</article>
</li><li>
<article>
<h1>Bohrmaschiene 2</h1>
<figure>
<img src="bohrmaschiene2.jpg" alt="bm">
<figcaption>Pellentesque habitant morbi tristique</figcaption>
</figure>
</article>
</li>
</ul>
</section>
</li>
</ul>
</section>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment