Bine ai venit pe DesignART !
-Forumul DesignART ofera servicii gratuite in domeniile Graphic Design si Coding !
-Pentru a beneficia de aceste servicii trebuie doar sa va INREGISTRATI si/sau sa va CONECTATI
-Innainte de a incepe sa postati,va sfatuim sa cititi REGULAMENTUL forumului !


Alăturați-vă forumului, este rapid și ușor

Bine ai venit pe DesignART !
-Forumul DesignART ofera servicii gratuite in domeniile Graphic Design si Coding !
-Pentru a beneficia de aceste servicii trebuie doar sa va INREGISTRATI si/sau sa va CONECTATI
-Innainte de a incepe sa postati,va sfatuim sa cititi REGULAMENTUL forumului !
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Tutorial - DesignART Elegant Boxes

+13
Clik
m0Ney *
Mr.Pagnel
The Godfather
Dystroy
Andrey
pxp.n0limit
Kidutz
BODO
BaCk
[x]sTyL[e]
Aleku
Zeus
17 participanți

 :: DesignART - Resurse :: Tutoriale :: Tutoriale Css, Html si JavaScript

In jos

Tutorial - DesignART Elegant Boxes Empty Tutorial - DesignART Elegant Boxes

Mesaj Scris de Zeus Dum Mai 22, 2011 1:40 am

DesignART Elegant Boxes


Salutare tuturor ! In acest tutorial va voi arata cum puteti crea 3 chenare pentru mesajele de pe pagina de start si nu numai !

Previzualizare LIVE:[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Pentru a simplifica inserarea acestor chenare pe forumurile voastre o sa le introducem pe pagina de start.

1.Introduceti unul sau toate codurile de mai jos in:
PA => Afisare => Pagina de Start => Generalitati => Mesaj pe pagina de start

Warning-Box
Cod:

<div class="box warning"><div class="box-content">
<h3>ANUNT !</h3>
Continutul tau aici !
<br>
Continutul tau aici !
</div></div>
Info-Box
Cod:

<div class="box info"><div class="box-content">
<h3>IMPORTANT !</h3>
Continutul tau aici !
<br>
Continutul tau aici !
</div></div>
Download-Box
Cod:

<div class="box download"><div class="box-content">
<h3>DOWNLOAD !</h3>
Continutul tau aici !
<br>
Continutul tau aici !
</div></div>

2.Introduceti urmatorul cod in:
PA => Afisare => Imagini si Culori => Culori => Foaie de stil CSS => CSS
Cod:

/*-------------BOX-------------*/

.box {
            border-radius: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            margin: 0px 0px 10px; }

.box-content {
            border-radius: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            font-size: 13px;
            font-style: italic;
            font-family: Trebuchet MS;
            text-shadow: 1px 1px 1px #ffffff;
            padding: 10px 20px 8px 90px;
            min-height:25px;
}



.box-content h3 {
            border-bottom: 1px solid #ccc;
            margin-top: 5px;
            font-family: Tahoma;
            font-weight: bold;
            font-style: normal;
            font-size: 13px;
}

/*-------------WARNING-BOX-------------*/

.warning {
          background: url(http://i67.servimg.com/u/f67/16/17/34/47/1231010.png);
          border: 1px dashed #ccc;
}

.warning .box-content {
          color: #666;
          background: transparent url(http://i27.servimg.com/u/f27/16/17/34/47/warnin11.png) no-repeat 10px 10px;
          border: 1px solid #ffffea;
}

.warning .box-content h3 {
          color: #666;
          text-shadow: 1px 1px 1px #ffffff;
}

/*-------------INFO-BOX-------------*/

.info {
          background: url(http://i27.servimg.com/u/f27/16/17/34/47/body-b11.png);
          border: 1px dashed #ccc;
}

.info .box-content {
          color: #666;
          background: transparent url(http://i27.servimg.com/u/f27/16/17/34/47/info10.png) no-repeat 10px 10px;
          border: 1px solid #ffffea;
}

.info .box-content h3 {
          color: #666;
          text-shadow: 1px 1px 1px #ffffff;
}

/*-------------DOWNLOAD-BOX-------------*/

.download {
          background-image: url(http://i27.servimg.com/u/f27/16/17/34/47/body-b12.png);
          border: 1px dashed #ccc;
}

.download .box-content {
          color: #666;
          background: transparent url(http://i27.servimg.com/u/f27/16/17/34/47/downlo10.png) no-repeat 10px 10px;
          border: 1px solid #ffffea;
}

.download .box-content h3 {
          color: #666;
          text-shadow: 1px 1px 1px #ffffff;
}

Cam asta a fost tot ! Sper ca va placut acest tutorial !

Multumiri site-ului [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

- Pentru orice nelamurire legata de acest tutorial va rugam sa postati
in sectiunea [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Tutorial realizat de BODO | DesignART

***Important !
Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !
Atașamente
Tutorial - DesignART Elegant Boxes Attachment
skin.zip Icon-urile pentru tabeleNu aveti permisiunea sa descarcati atasamente aici.(26 KB) Descarcat de 0 ori


Ultima editare efectuata de catre BODO in Mar Iun 07, 2011 4:00 am, editata de 3 ori
Zeus
Zeus
Administrator
Administrator

Mesaje Mesaje : 610
Credite Credite : 817
Reputatie : 6
Varsta Varsta : 29

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Aleku Dum Mai 22, 2011 4:10 am

Oho, super Bodo, mulţumim.
Aleku
Aleku
Gold Member
Gold Member

Mesaje Mesaje : 325
Credite Credite : 304
Reputatie : 0
Varsta Varsta : 30

http://edtutorials.forumz.ro/

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de [x]sTyL[e] Mar Mai 24, 2011 9:29 am

foarte frumoase, felicitari. Imi place ca i-ai postat sursa ( adica multumirile )
[x]sTyL[e]
[x]sTyL[e]
Administrator
Administrator

Mesaje Mesaje : 504
Credite Credite : 560
Reputatie : 0
Localizare Localizare : Suceava

http://www.epicart.forumhit.ro

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Vizitato Mar Mai 24, 2011 12:37 pm

Deci tu ce ai facut doar ai schimbat niste culori + asta nu ar merge la tutoriale ci la coduri mai exact Very Happy
Anonymous
Vizitato
Vizitator


Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de BaCk Mar Mai 24, 2011 10:28 pm

Macar cineva se mai oboseste sa faca alte tabele inafara de cele ale lui AlexandruMiron, felicitari.
BaCk
BaCk
Membru Onorific
Membru Onorific

Mesaje Mesaje : 90
Credite Credite : 90
Reputatie : 0
Varsta Varsta : 30

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de BODO Mier Mai 25, 2011 2:21 am

Sincer nu imi plac acele tabele create de Alexandru Miron, dar acestea sunt dragute si cred ca le voi utiliza pe forumul meu.
BODO
BODO
Membru Onorific
Membru Onorific

Mesaje Mesaje : 327
Credite Credite : 406
Reputatie : 0

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Zeus Sam Mai 28, 2011 1:03 am

BaCk , daca tot esti purtatorul de cuvant al lui Motanel si tot vorbesti de originalitate si inspiratie haide sa iti arat ceva:

[Trebuie sa fiti inscris si conectat pentru a vedea acest link]


Acum astept comentariile tale !
Zeus
Zeus
Administrator
Administrator

Mesaje Mesaje : 610
Credite Credite : 817
Reputatie : 6
Varsta Varsta : 29

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Kidutz Sam Iun 04, 2011 9:04 am

razvan a scris:Deci tu ce ai facut doar ai schimbat niste culori + asta nu ar merge la tutoriale ci la coduri mai exact Very Happy
Astea nu sunt nici pentru tutoriale nici pentru coduri, sunt pentru mai mult pentru anunturi.
Foarte frumoase, imi plac creatiile tale Smile
Kidutz
Kidutz
Gold Member
Gold Member

Mesaje Mesaje : 111
Credite Credite : 137
Reputatie : 0
Varsta Varsta : 28
Localizare Localizare : Constanta

http://www.counterzone.forum.st

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Vizitato Lun Iun 06, 2011 12:44 pm

Eu am zis de sectiune Kidutz in fine :-J
Anonymous
Vizitato
Vizitator


Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de pxp.n0limit Mar Iun 14, 2011 12:13 am

sunt gen alea ale lui motanel
pxp.n0limit
pxp.n0limit
Membru Nou
Membru Nou

Mesaje Mesaje : 4
Credite Credite : 4
Reputatie : 0
Varsta Varsta : 33

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Zeus Mar Iun 14, 2011 7:12 am

pxp.n0limit , daca citeai toate comentarii acestui subiect nu mai postai si tu inca unul la fel de penibil !
Zeus
Zeus
Administrator
Administrator

Mesaje Mesaje : 610
Credite Credite : 817
Reputatie : 6
Varsta Varsta : 29

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Andrey Mier Iun 15, 2011 4:41 am

dar nu merge
Andrey
Andrey
Membru DesignART
Membru DesignART

Mesaje Mesaje : 13
Credite Credite : 20
Reputatie : 0
Varsta Varsta : 41

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Dystroy Joi Iun 30, 2011 9:33 am

BODO !Iti multumesc personal,pentru acest tutorial mia fost de mare ajutor !Felicitari
Dystroy
Dystroy
Membru DesignART
Membru DesignART

Mesaje Mesaje : 51
Credite Credite : 67
Reputatie : 0
Varsta Varsta : 29
Localizare Localizare : Pe glob

https://designart.catsboard.com

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de The Godfather Mier Iul 20, 2011 12:46 pm

Foarte bun.
Chiar mă întrebam cum făceați așa ?
avatar
The Godfather
Gold Member
Gold Member

Mesaje Mesaje : 143
Credite Credite : 169
Reputatie : 6
Varsta Varsta : 28
Localizare Localizare : Constanța

https://designart.catsboard.com/

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Mr.Pagnel Lun Iul 25, 2011 4:42 am

Chiar ma intrebam cum se fac acele casute.
Mr.Pagnel
Mr.Pagnel
Moderator
Moderator

Mesaje Mesaje : 345
Credite Credite : 432
Reputatie : 3
Varsta Varsta : 34
Localizare Localizare : Rm. Valcea

https://designart.catsboard.com

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de m0Ney * Dum Iul 31, 2011 11:33 pm

Este foarte frumoasă previzualizarea.
Nu știu ceilalți, dar mie, mi se pare bestial !
m0Ney *
m0Ney *
Membru DesignART
Membru DesignART

Mesaje Mesaje : 25
Credite Credite : 30
Reputatie : 3
Varsta Varsta : 27

https://designart.catsboard.com/

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Clik Vin Aug 12, 2011 2:40 am

Din cate am observat la versiunile phbb2 nu merge(nu se intelege scrisul),dar daca ii schimbi background la Info-Box si la Download-Box cu cel de la Warning-Box se vede super !
Bravo !
Clik
Clik
Membru DesignART
Membru DesignART

Mesaje Mesaje : 38
Credite Credite : 50
Reputatie : 0
Varsta Varsta : 27
Localizare Localizare : Oradea

http://www.gamez-muzica.forumz.ro

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Paul Vin Aug 12, 2011 2:45 am

bravo frumoase casute..
Paul
Paul
Moderator
Moderator

Mesaje Mesaje : 231
Credite Credite : 245
Reputatie : 3
Varsta Varsta : 31
Localizare Localizare : Paris

https://designart.catsboard.com/

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Mr.Pagnel Dum Aug 28, 2011 7:43 am

In curand o sa scot si eu 3 casute din acestea, sper sa va placa.
Mr.Pagnel
Mr.Pagnel
Moderator
Moderator

Mesaje Mesaje : 345
Credite Credite : 432
Reputatie : 3
Varsta Varsta : 34
Localizare Localizare : Rm. Valcea

https://designart.catsboard.com

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de dynamiccs Joi Sept 01, 2011 5:12 am

Wow foarte frumoase si faine bravo pentru munca depusa
dynamiccs
dynamiccs
Membru DesignART
Membru DesignART

Mesaje Mesaje : 39
Credite Credite : 49
Reputatie : 0

https://designart.catsboard.com/

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Heas Dum Oct 09, 2011 6:39 am

De mult cautam astea am vazute pe multe forumurii.
Heas
Heas
Gold Member
Gold Member

Mesaje Mesaje : 167
Credite Credite : 263
Reputatie : 0
Varsta Varsta : 28
Localizare Localizare : Pe eci colo

https://designart.catsboard.com/

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Gabryel Mier Oct 19, 2011 1:51 pm

foarte reusite multumim
Gabryel
Gabryel
Gold Member
Gold Member

Mesaje Mesaje : 101
Credite Credite : 106
Reputatie : 0
Localizare Localizare : MUIE DESIGNART!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

http://MUIEDESIGNRT.FORUMHIT.RO

Sus In jos

Tutorial - DesignART Elegant Boxes Empty Re: Tutorial - DesignART Elegant Boxes

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Sus

- Subiecte similare

 :: DesignART - Resurse :: Tutoriale :: Tutoriale Css, Html si JavaScript

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum