Create a Pretty scroller box

in Tutorials on 29 Jan 2013


Create a simple scroller box in a HTML block. Useful to list links or pure text.


The code:
<style>
.screen {
    background: #FFFFFF;
    margin: 10px auto 40px;
    overflow: hidden;
    position: relative;
    width: 300px;
    z-index: 5;
    border: 1px solid #CDCDCD;
    border-radius: 5px 5px 5px 5px;
}

h1 {
    background: #F9F9F9;
    border-bottom: 1px solid #CDCDCD;
    font-family: nunito, sans serif;
    font-size: 30px;
    color: #999;
    height: 48px;
    line-height: 3rem;
    margin-bottom: 5px;
    position: relative;
    text-align: center;
}
.scrollshadow {
    font-family: monospace;
    margin-top: -0.3rem;
    max-height: 200px;
    overflow: auto;
    padding: 1rem 0;
    position: relative;
}

.scrollshadow ul {
    list-style-type: none;
    position: static;
    margin-bottom: -1rem;
}

.scrollshadow li {
    font-family: carme, sans serif;
    font-size: 16px;
    padding-left: 1rem;
}
.scrollshadow ul li:last-child {
    background: #fff;
    z-index: 10;
}
.screen:before {
    border-radius: 60%/10px;
    box-shadow: 2px 0 10px 3px rgba(0, 0, 0, 0.8);
    content: "";
    height: 47px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.screen:after {
    border-radius: 60%/10px;
    box-shadow: -2px 0 10px 2px rgba(0, 0, 0, 0.6);
    content: "";
    height: 20px;
    left: 0;
    margin-left: 10%;
    position: absolute;
    bottom: -20px;
    width: 80%;
}
.scrollshadow ul:before {
    background: #FFFFFF;
    content: "";
    display: block;
    height: 10px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0rem;
    width: 100%;
    z-index: 8;
}
</style>


<div class="screen">
   <h1>Scroller</h1>
   <div class="scrollshadow">
<ul>
<li><a href="#">Donec viverra auctor lobortis.</a></li>
<li><a href="#">Donec viverra auctor lobortis.</a></li>
<li><a href="#">Donec viverra auctor lobortis.</a></li>
<li><a href="#">Donec viverra auctor lobortis.</a></li>
<li><a href="#">Donec viverra auctor lobortis.</a></li>
<li>Donec viverra auctor lobortis.</li>
<li>Donec viverra auctor lobortis.</li>
<li>Donec viverra auctor lobortis.</li>
<li>Donec viverra auctor lobortis.</li>
<li>Donec viverra auctor lobortis.</li>
<li>Donec viverra auctor lobortis.</li>
<li>Donec viverra auctor lobortis.</li>
<li>Donec viverra auctor lobortis.</li>
<li>Donec viverra auctor lobortis.</li>
<li>Donec viverra auctor lobortis.</li>
</ul>
  </div>
</div>



PixelfyStudio Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs PixelfyStudio.com and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded PixelfyStudio in 2009 to which he is dedicated full time.

PixelfyStudio.com | SimpleMachines.org




0 Comments


Professional & Impressive. We provide top quality free SMF themes with awesome support.