Показать сообщение отдельно
  #13 (permalink)  
Старый 03.07.2014, 00:58
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,138

Это не картинка а сверстанные дивы честное пионерское =) и их тоже можно забить контентом.
Столбики сверстаны одним блоком а значит на порядо проще найти свойство которое отвечает за границу или тень + можно легко навесить вау ховер эффекты.

Это не косяки с тенью это художественный ход и изящные штрихи
<style>
    .cont {
        width: 450px;
        background: rgb(73, 133, 189);
        overflow: hidden;
        height: 273px;
        opacity: 1;
        font-family: aria, sans-serif;
        font-size: 14pt;
        color: #B9AFAF;
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    }
    .cont > div {
        position:relative;
        cursor:pointer;
        float: left;
        border: 3px solid rgb(73, 133, 189);
        border-top-right-radius: 100px 90%;
        border-bottom-right-radius: 30px 30%;
        margin-left: -50px;
        width: 117px;
        height: 320px;
        background:linear-gradient(to bottom, #86F9B9 0%,#2ef7cf 38%,#2742D1 39%,#2786D1 55%,#1E1E5F 55%,#3F3C93 71%,#2F61CA 71%,#3B27D1 100%);
        box-shadow: 3px 5px 14px 5px rgba(50, 50, 50, 0.5);
    }
    .cont > div > div{
        position: absolute;
        top: 128px;
        left: 50px;
    }
    .cont > div:hover {
        box-shadow: 3px 5px 14px 5px rgba(252, 238, 0, 0.4),inset 3px 5px 14px 10px rgba(252, 238, 0, 0.5);
        border-right-color: rgb(245, 255, 0);
        color: #FFFFFF;
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
        transition: box-shadow 2s ease,border 1s ease;
    }
    .cont > div:before {
        content: "";
        display: block;
        background: rgb(73, 133, 189);
    }
    .st_001{ z-index: 45;} .st_001:before{height: 25px;}
    .st_002{ z-index: 44;} .st_002:before{height: 30px;}
    .st_003{ z-index: 43;} .st_003:before{height: 45px;}
    .st_004{ z-index: 42;} .st_004:before{height: 65px;}
    .st_005{ z-index: 41;} .st_005:before{height: 100px;}
    .st_006{ z-index: 40;} .st_006:before{height: 120px;}
</style>
<div class="cont">
    <div class="st_001"></div>
    <div class="st_002">
        <div>
            <b>text 1</b><br>
            <i>text 2</i>
        </div>
    </div>
    <div class="st_003">
        <div>
            <b>text 1</b><br>
            <i>text 2</i>
        </div>
    </div>
    <div class="st_004">
        <div>
            <b>text 1</b><br>
            <i>text 2</i>
        </div>
    </div>
    <div class="st_005">
        <div>
            <b>text 1</b><br>
            <i>text 2</i>
        </div>
    </div>
    <div class="st_006">
        <div>
            <b>text 1</b><br>
            <i>text 2</i>
        </div>
    </div>
</div>

Последний раз редактировалось MallSerg, 03.07.2014 в 08:46.
Ответить с цитированием