Внешняя тень без использования изображений

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Pr0f1x

Дата: Понедельник, 08.08.2011, 10:50 | Сообщение # 1

Администратор

Сообщений:: 841

Награды:: 2

100

Поддержка : Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

1 :

HTML:

Code

<div class="lifted">
             Ваше Содержимое
  </div>

CSS:

Code

.lifted p {
             font-size:16px;
             font-weight:bold;
  }

  .lifted {
             position:relative;
             width:40%;
             padding:1em;
             margin:2em 10px 4em;
             background:#fff;
             border-radius:4px;
         -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                 box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
             -moz-border-radius:4px;

  }

  .lifted:before,
  .lifted:after {
             content:"";
             position:absolute;
             z-index:-2;
             bottom:15px;
             left:10px;
             width:50%;
             height:20%;
             max-width:300px;
         -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                 box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
         -webkit-transform:rotate(-3deg);
            -moz-transform:rotate(-3deg);
             -ms-transform:rotate(-3deg);
              -o-transform:rotate(-3deg);
                 transform:rotate(-3deg);
  }

  .lifted:after {
         right:10px;
         left:auto;
         -webkit-transform:rotate(3deg);
            -moz-transform:rotate(3deg);
             -ms-transform:rotate(3deg);
              -o-transform:rotate(3deg);
                 transform:rotate(3deg);
  }

2 :

HTML:

Code

<div class="curled">
             Ваше Содержимое
  </div>

CSS:

Code

.curled {
         position:relative;
         width:40%;
         padding:1em;
         margin:2em 10px 4em;
         background:#fff;
         -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                 box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
         border:1px solid #efefef;
         -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
              border-radius:0 0 120px 120px / 0 0 6px 6px;
  }

  .curled:before,
  .curled:after {
         content:"";
         position:absolute;
         z-index:-2;
         bottom:12px;
         left:10px;
         width:50%;
         height:55%;
         max-width:200px;
         -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
            -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
                 box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
          -webkit-transform:skew(-8deg) rotate(-3deg);
             -moz-transform:skew(-8deg) rotate(-3deg);
              -ms-transform:skew(-8deg) rotate(-3deg);
               -o-transform:skew(-8deg) rotate(-3deg);
                  transform:skew(-8deg) rotate(-3deg);
  }

  .curled:after {
         right:10px;
         left:auto;
         -webkit-transform:skew(8deg) rotate(3deg);
            -moz-transform:skew(8deg) rotate(3deg);
             -ms-transform:skew(8deg) rotate(3deg);
              -o-transform:skew(8deg) rotate(3deg);
                 transform:skew(8deg) rotate(3deg);
             }
  .curled p {
         font-size:16px;
         font-weight:bold;
  }

3 :

HTML:

Code

<div class="perspective">
          Ваше Содержимое
  </div>

CSS:

Code

.perspective {
       position:relative;
       width:40%;
       padding:1em;
       margin:2em 10px 4em;
       background:#fff;
       -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
          -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  }

  .perspective:before,
  .perspective:after {
       content:"";
       position:absolute;
       z-index:-2;
  }

  .perspective:before {
       left:80px;
       bottom:5px;
       width:50%;
       height:35%;
       max-width:200px;
       -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
          -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
               box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
       -webkit-transform:skew(50deg);
          -moz-transform:skew(50deg);
           -ms-transform:skew(50deg);
            -o-transform:skew(50deg);
               transform:skew(50deg);
       -webkit-transform-origin:0 100%;
          -moz-transform-origin:0 100%;
           -ms-transform-origin:0 100%;
            -o-transform-origin:0 100%;
               transform-origin:0 100%;
  }

  .perspective:after {
       display:none;
  }

  .perspective p {
       font-size:16px;
       font-weight:bold;
  }

Внешняя тень без использования изображений

Страница 1 из 1
1