Показать сообщение отдельно
  #4 (permalink)  
Старый 08.07.2013, 20:43
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

вот что можно точно, ИЕ конечно же в пролете:
<style>
    .message-box {
        position: relative;
        border: 1px solid #C0CAD5;
        width: 400px;
        height: 150px;
        margin-top: 120px;
    }
    .message-box .smile-button {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 10px;
        right: 10px;
        outline: 0;
    }
    .message-box .smile-button .smile-open, .message-box .smile-button .smile-close {
        background: url('http://st0.vk.me/images/im_smile_cross.png?3') no-repeat -2px -26px;
        position: absolute;
        opacity: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);

        -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
        -moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease;
        -ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease;
        -o-transition: -o-transform 0.3s ease, opacity 0.3s ease;
        transition: transform 0.3s ease, opacity 0.3s ease;

        outline: 0;
    }
    .message-box .smile-button .smile-close {
        opacity: 0;
        background-position: -2px -2px;
    }
    .message-box .smile-button:focus .smile-close {
        z-index: 1;
        opacity: 1;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .message-box .smile-button:focus .smile-open {
        opacity: 0;
    }
    .message-box textarea {
        border: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        resize: none;
        outline: 0;
    }
    .message-box .smile-button .smile-box {
        display: none;
        position: absolute;
        opacity: 0;
        bottom: 100%;
        left: -90px;
        color: #fff;
        border-radius: 5px;
        width: 200px;
        height: 100px;
        background: #000;
        margin-bottom: 10px;
        outline: 0;
        -webkit-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        -moz-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        -ms-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        -o-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        transition: opacity 0.3s ease, margin-bottom 0.3s ease;
    }
    .message-box .smile-button .smile-box:after {
        content: ' ';
        position: absolute;
        top: 100%;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -5px;
        border-top: 5px solid #000;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 0;
    }
    .message-box:hover .smile-button .smile-box {
        display: block;
    }
    .message-box .smile-button:focus .smile-box {
        display: block;
        opacity: 0.8;
        margin-bottom: 5px;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper {
        padding: 10px;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile1,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile2,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile3,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile4,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile5 {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 3px;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile1 {
        background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile2 {
        background: url('http://javascript.ru/forum/images/smilies/blink.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile3 {
        background: url('http://javascript.ru/forum/images/smilies/laugh.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile4 {
        background: url('http://javascript.ru/forum/images/smilies/unsure.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile5 {
        background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
    }
</style>
<div class="message-box">
    <textarea></textarea>
    <div class="smile-button" tabindex="1">
        <div class="smile-box">
            <div class="smile-box-wrapper">
                <a class="smile1" href="#"></a>
                <a class="smile2" href="#"></a>
                <a class="smile3" href="#"></a>
                <a class="smile4" href="#"></a>
                <a class="smile5" href="#"></a>
            </div>
        </div>
        <div class="smile-close" tabindex="2"></div>
        <div class="smile-open"></div>
    </div>
</div>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 08.07.2013 в 22:49.
Ответить с цитированием