informāciju saturošs pelēks lauks

Lappuse 1 no 1
1

uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » CMS, CSS, HTML, JAVASCRIPT, PHP, XML » Pamācības » informāciju saturošs pelēks lauks (CSS3)

Korijs

Svētdiena, 20.11.2011, 4:11:25 | Ieraksts #1

FORUMA DIKTATORS

Foruma ieraksti: 5047

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis

Jaunākie apbalvojumi:

@Korijs raksta .. :

@ Customize design - CSS

v1:

Code

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

    .lifted {
     position:relative;
     width:350px;
     padding:1em;
     margin:2em 10px 4em;
     background:#F0F0F0;
     color: #777;
     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);
    }

Code

<div class="lifted">
     uCozwebmeistars.ucoz.lv
    </div>

uCozwebmeistars.ucoz.lv

v2:

Code

.curled {
    position:relative;
    width:350px;
    padding:1em;
    margin:2em 10px 4em;
    background:#F0F0F0;
    color: #777;
    -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:300px;
    -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:18px;
    font-weight:bold;
   }

Code

<div class="curled">
    uCozwebmeistars.ucoz.lv
   </div>

uCozwebmeistars.ucoz.lv

Proti uzvesties, pateikt paldies un paaugstināt reputāciju tiem, kuri ir to nopelnījuši, palīdzēt tiem, kuriem ir nepieciešama palīdzība, papildināt forumu ar lietderīgām tēmām, līdz ar ko Tu šeit būsi respektabls biedrs! Pretēji tam, ja izteikts stulbums, nekaunība un neadekvāta uzvedība spraucas pāri katrai smadzeņu rievai, ja tāda ir - lūgtum, tiksi nahrenizēts! - Biedrs mācās no biedra / UWM