Intro Polinux

by polinux

HTML

<ul class="sexym">
    <li class="part"><a class="open" href="#accueil">About</a>
        <div id="accueil" class="cont">
            <h3>Welcome</h3>
            <p class="fnd">On CS<b style="color:#502a74;">S3XY</b><br>I Back Soon</p>
        </div>
    </li>
    <li class="part"><a class="open" href="#portfolio">Portfolio</a>
        <div id="portfolio" class="cont">
            <h3>View</h3>
            <p class="fnd">My CSS3XY Demo<br>Under construction</p>
        </div>
    </li>
    <li class="part"><a class="open" href="#contact">Contact</a>
        <div id="contact" class="cont">
            <h3>Contact</h3>
            <p class="fnd">[email protected]</p>
        </div>
    </li>
    </ul>

CSS

li{
    box-shadow: -5px 0 8px -2px rgba(0, 0, 0, 0.5) inset, -5px 0 8px -2px rgba(0, 0, 0, 0.5);
    float: left;
    font-size: 1.1em;
    height: 240px;
    list-style: none outside none;
    margin-right: 3px;
    overflow: hidden;
    position: relative;
    text-align: left;
    transition: width 1.2s ease-out 0.05s;
    width: 30px;
    z-index: 0;
}
li:last-child {
    margin-right: 0;
}
a {
    background-image: -moz-linear-gradient(left center , rgba(33, 39, 43, 0.5), rgba(70, 77, 85, 0.5)), -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    background-position: center center, center center;
    background-size: 240px 30px, 60px 60px;
    border-color: rgba(255, 255, 255, 0.05) rgba(255, 255, 255, 0.75) rgba(0, 0, 0, 0.75) rgba(0, 0, 0, 0.75);
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    bottom: -30px;
    box-shadow: -5px 0 8px -2px rgba(0, 0, 0, 0.5) inset, -5px 0 8px -2px rgba(0, 0, 0, 0.5);
    color: #ef9711;
    display: block;
    font-family: 'Rockwell',serif;
    height: 26px;
    left: 0;
    letter-spacing: 1px;
    padding-right: 31px;
    padding-top: 4px;
    position: absolute;
    text-decoration: none;
    text-indent: 10px;
    text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8);
    transform: rotate(-90deg);
    transform-origin: 0 0;
    width: 204px;
    z-index: 20;
}

ul:hover li:hover {
    font-size: 2em;
    line-height: 20px;
    width: 422px;
    z-index: 30;
}