Create a Pretty scroller box

by Mick 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>
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF 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.
    
0 Comments

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.