Navigare rapidă

Ultimele subiecte
» Wireless ipb theme [punBB]
Scris de D1esel Vin 30 Noi - 21:51
» Ying-Yang Tutorial
Scris de Lucifer Mar 24 Apr - 11:34
» Avatar forumotion toolbar
Scris de Lucifer Mar 24 Apr - 11:33
» Salutare
Scris de Lucifer Mar 24 Apr - 11:32
Cuvinte-cheie

edit  

Efect de scoci la balizele BBCode [code][/code]


Salutare prieteni,
In minutele urmatoare am sa va arat cum puteti adauga un efect tip scoci la tagurile code. Mai jos aveti o previzualizare pentru a vedea despre ce este vorba.


Pentru realizarea acestui efect adaugati urmatorul cod in:
Panou de administrare ~> Afisare ~> Culori ~> Imagini si culori ~> Foaie de stil css
Cod:
dl.codebox{
    margin: 20px auto;
    width: 720px;
    min-height: 120px;
    padding: 10px;
    position:relative;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2) ;
}

dl.codebox:before{
    content: '';
    position:absolute;
    width: 130px;
    height: 30px;
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -webkit-transform:translate(-50px,10px)
                        skew(10deg,10deg)
                        rotate(-50deg)
}
dl.codebox:after{
    content: '';
    position:absolute;
    right:0;
    bottom:0;
    width: 130px;
    height: 30px;
    background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(50px,-20px)
                        skew(10deg,10deg)
                        rotate(-50deg)
}



Tutorial scris de Erpel & Rylled

Copyright Extrem-Tutorials.com - Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.

Comentariile utilizatorilor
Membru dedicat
avatar
la data de Sam 30 Iun - 10:26
RazvaN Membru dedicat
Conectat
Acesta era acel codebox care il vroia si DanyX. Felicitari Madalin.
Membru dedicat
avatar
la data de Sam 30 Iun - 11:16
Razvan11 Membru dedicat
Conectat
Ai pus intr-un final codul dorit de multi , insa din cate vad DaniX sa cam curatat ..
Vizitator
avatar
la data de Sam 30 Iun - 13:53
Vizitato Vizitator
Conectat
Sai dea cineva linkul baiatului, ca tot dorea codul asta de cateva luni bune
Membru ET
avatar
la data de Joi 5 Iul - 18:11
DanyX Membru ET
Conectat
multumesc mult pentru cod, dar am facut rost de el de pe forumul de suport. multumesc oricum
Membru ET
la data de Mar 28 Aug - 22:17
llg-cstrike Membru ET
Conectat
Pentru phpbb2 nu e?
Membru nou
avatar
la data de Mar 19 Feb - 10:12
Nork Membru nou
Conectat
salutare se poate sa-mi dati si mie codul acesta dar pentru punbb?
Membru ET
avatar
la data de Sam 21 Dec - 9:42
400kg Membru ET
Conectat
Nu este foarte 'stralucit' , dar oricum bravo
Membru ET
avatar
la data de Sam 8 Feb - 4:50
Cronos Membru ET
Conectat
nu merge