Foaie cu efectul de îndoire | Colțuri îndoite - Scripturi și teme pentru ucoz

Pentru a accesa toate paginile forumului

te rugăm să te înregistrezi

[ Cereri şabloane · Ultimile postări · Membrii · Regulamentul forumului · Căutare · RSS · Photoshop ]

Pagina 1 din 1
1

Foaie cu efectul de îndoire | Colțuri îndoite

CreareWebsite

Data: Duminică, 2012-11-25, 9:30 PM | Mesaj # 1

Total mesaje: 102

Vezi premiile: 0

Unde doriți, adăugați codurile:

<div id="listeffect">
<strong>Vocea Rusiei îl instigă pe Ponta contra lui Băsescu</strong>
<p>De ceva vreme, Vocea Rusiei lucrează de zor la destabilizarea României, încercând să întreţină focul duşmăniei, al animozităţii dintre Ponta şi USL, pe de o parte, şi Băsescu, pe de altă parte. Evoluţia de după alegeri, care s-a soldat cu formarea rapidă a guvernului Ponta, pare să-i fi dezamăgit profund pe „ostaşii” frontului antiromânesc de la Moscova.</p>
</div>
<style>
#listeffect {
position: relative;
/* - Lungimea foii - */
width: 90%;
/* - Culoarea fundalului - */
background: #ddd;
/* - Rotunjimea mărginilor - */
-o-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
/* - Mărimea interiorului - */
padding: 2em 1.5em;
/* - Culoarea textului - */
color: rgba(0,0,0, .8);
/* - Umbra textului - */
-ms-text-shadow: 0 1px 0 #fff;
-o-text-shadow: 0 1px 0 #fff;
text-shadow: 0 1px 0 #fff;
/* - Distanța dintre rânduri - */
line-height: 1.5;
/* - Distanța externă (de sus și jos) - */
margin: 20px auto;
}
/* - Unghiurile - */
#listeffect:before, #listeffect:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
-o-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-ms-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);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
#listeffect:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
</style>

Rezultatul:

Apasă pentru a mări imaginea

Admin

Data: Duminică, 2012-12-30, 1:11 PM | Mesaj # 2

Total mesaje: 84

Vezi premiile: 4

Instalare: Panoul de Control - Design - Administrarea design-ului (CSS) - adăugați stilurile:

/* Foaie cu cornuri îndoite */
.tucked-corners-top {
    position: relative;
    width: 660px; min-height: 200px;
    margin: 100px auto; padding: 20px;
    background-color: #fff;
    background: linear-gradient(45deg, transparent 10px, #fff 10px),
    linear-gradient(135deg, transparent 10px, #fff 10px),
    linear-gradient(225deg, transparent 10px, #fff 10px),
    linear-gradient(315deg, transparent 10px, #fff 10px);
    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
}

[class*='tucked-corners-']::before, /* Toate cele 4 cornuri */
[class*='tucked-corners-']::after {
    content: '';
    position: absolute;
    height: 20px; width: 80px;
    box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
    box-shadow: none\9;
}

.tucked-corners-top::before,
.tucked-corners-top::after {
    top: -10px;
}

.tucked-corners-bottom::before,
.tucked-corners-bottom::after {
    bottom: -10px;
}

.tucked-corners-top::before,
.tucked-corners-bottom::before {
    left: -42px;
}

.tucked-corners-top::after,
.tucked-corners-bottom::after {
    right: -42px;
}

.tucked-corners-top::before {
    transform: rotate(-45deg);
}

.tucked-corners-top::after {
    transform: rotate(45deg);
}

.tucked-corners-bottom::before {
    transform: rotate(-135deg);
}

.tucked-corners-bottom::after {
    transform: rotate(135deg);
}

[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
    box-shadow: none\9;
}

iar în locul unde vă trebuie foaia, băgați codul:

* Mărimea foii și a cornurilor o editați din Stilul foii (CSS).

Rezultatul:

Apasă pentru a mări imaginea

În dictatură, cineva te foloseşte cum vrea el. În democraţie, ai dreptul să-l alegi pe cel care o să te folosească aşa cum vrea.

Foaie cu efectul de îndoire | Colțuri îndoite

Pagina 1 din 1
1