Neko

Nincs más dolgod, mint beilleszteni ezt a szövegdobozt oda, ahol szeretnéd használni.
A doboz színeit a CSS-ben át tudod írni :)

Kód

<div class="css3droppanel">
    <input id="paneltoggle" type="checkbox" />
    <div class="content">
        <p>
            CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet. -Wikipedia</p>
    </div>
</div>
<style type="text/css">
div.css3droppanel {
        position: relative;
        margin: 0;
        margin-bottom: 1em;}


div.css3droppanel > div {
        height: 10px;
        padding: 5px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        background: #b5e5e0;
        position: relative;
        opacity: 0;
    -moz-transition: all 0.2s ease-in-out 0.1s;
    -o-transition: all 0.2s ease-in-out 0.1s;
    -webkit-transition: all 0.2s ease-in-out 0.1s;
    transition: all 0.2s ease-in-out 0.1s;}

div.css3droppanel:after {
        content: '';
        display: block;
        bottom: 0;
        position: absolute;
        width: 100%;
        height: 10px;
        box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;
        background: #5a1619;
        background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));
        background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
        background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
        background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
        background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
        }


div.css3droppanel input[type="checkbox"] {
        position: absolute;
        right: 50px;
        width: 60px;
        height: 42px;
        bottom: -34px;
        z-index: 10;
        cursor: pointer;
        opacity: 0;}

div.css3droppanel input[type="checkbox"]:checked ~ div {
        height: 250px;
        opacity: 1;
        overflow: auto;}

div.css3droppanel label {
        position: absolute;
        right: 50px;
        width: 60px;
        height: 42px;
        bottom: -34px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        cursor: pointer;
        z-index: 5;
        background: #5a1619;
        background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72)));
        background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
        background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
        background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
        background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
        box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset;}

div.css3droppanel label:hover {
        box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset;}

div.css3droppanel label:after {
        content: '';
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border: 12px solid transparent;
        border-color: white transparent transparent transparent;
        top: 18px;
        left: 18px;
        box-shadow: 0 0 7px gray inset;
        }</style>
<!--[if lte IE 8]>

<style>

/* Hide panel from IE8 and below */

div.css3droppanel {
        display: none;
        }

</style>

<![endif]-->