fraNNNta-Design

Bine a-ti venit pe fraNNNta-Design
conectarecreaza cont



Pun-Crumbs [Versiune Noua]

Distribuiţi
mr.franta OnlineOffline
avatar
fondator
Respect : 100%
Mesaje : 3980
Inscris : 18/06/2011

biggri Pun-Crumbs [Versiune Noua]

Mesaj Scris de mr.franta la data de Dum Aug 17, 2014 1:39 pm

Buna ziua sunt mr.franta si astazi va prezint un mic tutorial care este destul de reusit dar si foarte simplu de facut.Bun haideti sa incepem.

Avem aici o imagine de previzualizare a meniului.



Avem nevoie de 2 imagini pentru a realiza acest meniu.
Imagina nr.1


Cod:
http://i39.servimg.com/u/f39/14/12/03/12/crumbs12.png

Imaginea nr.2


Cod:
http://i39.servimg.com/u/f39/14/12/03/12/hover_10.png

Ce facem cu aceste doua imagini? simplu: prima imagine o folosim ca fundal a meniului si ca fundal la link-urile active,iar cea de a doua imaginine o adauga la hover.

In codul css avem clasa pentru navigare

Cod:
.pun-crumbs{
continut css aici}

Pasul numarul 1:background meniu si personalizare
Adaugam in css acest cod
Cod:
 
.pun-crumbs{
  font-size: 0px;
  background: url(http://i39.servimg.com/u/f39/14/12/03/12/crumbs12.png);
  padding: 8px;
  border: 1px solid #bbb;
box-shadow: 0px 0px 1px white inset;
border-radius: 5px;}

Pasul numarul 2: Personalizare link-uri din meniu.

Cod:
.pun-crumbs a{
  font-size: 12px!important;
  padding: 7px;
  padding-left: 10px;
  padding-right: 10px;
margin-right: -1px;
border: 1px solid #bbb;
box-shadow: 0px 0px 1px white inset;
}


Pasul numarul 3: Adaugare hover la meniu. ( cu cea de a doua imagine)

Cod:
.pun-crumbs a:hover{
  font-size: 12px!important;
  background-image: url(http://i39.servimg.com/u/f39/14/12/03/12/hover_10.png);
  padding: 7px;
  padding-left: 10px;
  padding-right: 10px;
}


Acum haideti sa va explic ce am adaugat in css ca sa fie pe intelesul tuturor.
font-size - Dimensiunea font-ului
background -imaginea de fundal
padding- mareste spatiul intre text si marginini.
border-este acea linie care incojoara meniul sau un tabel etc
box-shadow: este o umbra.
border-radius: colturile rotunde.


Daca acest tutorial va fost de ajutor va rog sa raspundeti la acest mesaj,de asemenea astept daca aveti probleme cu acest meniu.


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
FreeH3K4R OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 36
Inscris : 17/08/2014

biggri Re: Pun-Crumbs [Versiune Noua]

Mesaj Scris de FreeH3K4R la data de Dum Aug 17, 2014 4:21 pm

frumos imi place bravo


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
RLA # H4cK3R*uL OnlineOffline
avatar
Membru nou
Respect : 100%
Mesaje : 17
Inscris : 01/08/2014

biggri Re: Pun-Crumbs [Versiune Noua]

Mesaj Scris de RLA # H4cK3R*uL la data de Dum Aug 24, 2014 4:06 am

Pentru ce versiune este acest tutorial?!


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
MioGame OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 59
Inscris : 04/07/2014

biggri Re: Pun-Crumbs [Versiune Noua]

Mesaj Scris de MioGame la data de Dum Aug 24, 2014 11:42 am

bv frannnta da acest meniu este doar pentru forume de design nu pentru gaming si forumul trebuie sa fie alb  :}  ori cum poti sa schimbi cand vrei dimensiunea culorile BV tot asa  04


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
MioGame OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 59
Inscris : 04/07/2014

biggri Re: Pun-Crumbs [Versiune Noua]

Mesaj Scris de MioGame la data de Dum Aug 24, 2014 11:43 am

RLA # H4cK3R*uL

 este pentru versiunea punbb


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
Catalin.Andrei OnlineOffline
avatar
Membru nou
Respect : 100%
Mesaje : 29
Inscris : 13/10/2014

biggri Re: Pun-Crumbs [Versiune Noua]

Mesaj Scris de Catalin.Andrei la data de Lun Ian 26, 2015 3:25 pm

On: Fain tutorial
Offtopic: Se poate face la fel si pe versiunea Phpbb3?


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
mr.franta OnlineOffline
avatar
fondator
Respect : 100%
Mesaje : 3980
Inscris : 18/06/2011

biggri Re: Pun-Crumbs [Versiune Noua]

Mesaj Scris de mr.franta la data de Lun Ian 26, 2015 10:27 pm

Se poate face,astazi am incercat sa fac pe invision si am reusit.
Previzualizare invision : http://originalplayzone.forumer.ro


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
Continut sponsorizat OnlineOffline

biggri Re: Pun-Crumbs [Versiune Noua]

Mesaj Scris de Continut sponsorizat



Sus

    Acum este: Joi Dec 13, 2018 7:59 pm