Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.

Create a Pretty scroller box

Mick in Tutorials on Jan 29, 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>


Tagged with: scroller html script tutorial 


Mick

Mick G

idesignsmf.com

    

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 and has a weakness for Tacos and Pizza.


0 Comments




Latest Discussions

Join the conversation

Our Most Popular Features