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>



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

idesignSMF.com | SimpleMachines.org



0 Comments


rocket_launch

Awesome Support. Download our themes, you also get theme support.