Graphic-Arhive.com
Bine ai venit pe Graphic-Arhive.com !
-Forumul Graphic-Arhive ofera servicii gratuite in domeniile Graphic Design si Coding !
-Pentru a beneficia de aceste servicii trebuie doar sa va [url=/register]INREGISTRATI[/url] si/sau sa va [url=/login]CONECTATI[/url]
-Innainte de a incepe sa postati,va sfatuim sa cititi REGULAMENTUL forumului !

[Tutorial] Page Peel Effect

In jos

[Tutorial] Page Peel Effect

Mesaj Scris de BODO la data de Dum Oct 09, 2011 12:50 pm

Descriere:
-Page Peel Effect este acel efect din coltul din dreapta sus a-l paginii ce creaza impresia ca pagina se dezlipeste .

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

Instalare:
-Se poate adauga in Mesaj pe pagina de start pentru ca efectul sa apara pe pagina de start(forum) sau in orice alta pagina HTML doriti sa apara !

1.Codurile Javascript: (NU modificati nimic !!!)
Cod:
<script type="text/javascript" src="http://graphic-arhive.bravehost.com/Javascripts/mootools-core-1.4.1-full-nocompat.js"></script>
<script type="text/javascript" src="http://graphic-arhive.bravehost.com/Javascripts/javascript_flip_corner.js"></script>

2.Codurile CSS:
Cod:
<style>

#page-flip { position:absolute; right:0; top:0; float:right;  }
#page-flip-image { width:50px; height:52px; z-index:99; position:absolute; right:0; top:0; -ms-interpolation-mode:bicubic; }
#page-flip-message { width:48px; height:48px; overflow:hidden; position:absolute; right:0; top:0; background:url(http://i45.servimg.com/u/f45/16/65/71/25/corner10.png) no-repeat right top; }

</style>

3.Structura HTML:
Cod:
<div id="page-flip">
  <a href="http://www.graphic-arhive.com"><img src="http://i45.servimg.com/u/f45/16/65/71/25/grey-c11.png" title="Graphic-Arhive.com" id="page-flip-image" /></a>
  <div id="page-flip-message"></div>
</div>

Personalizare:

1.Puteti personaliza imaginea coltului dezlipit, inlocuind in Structura HTML adresa imaginii ce se afla acolo cu una din imaginile aflate in atasamentul de mai jos!
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

2.Puteti personaliza imaginea ce apare dupa dezlipirea coltului inlocuind in Codurile CSS adresa acesteia .
-Pentru cei ce nu stapanesc Photoshop, puteti face o [Trebuie sa fiti inscris si conectat pentru a vedea acest link] pentru personalizarea acelei parti !

Tutorial realizat de BODO
Copierea sau reproducerea acestui tutorial NU este permisa fara aprobarea administratorului forumului [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Atasamente
Page-Peel-Corners(www.graphic-arhive.com).zip Nu aveti permisiunea sa descarcati atasamente aici.(118 KB) Descarcat de 1 ori


Ultima editare efectuata de catre BODO in Dum Oct 23, 2011 4:53 am, editata de 1 ori

----------------------------------------***----------------------------------------

[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] | [Trebuie sa fiti inscris si conectat pentru a vedea acest link] | [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
avatar
BODO
Administrator
Administrator

Mesaje : 99
Data de inscriere : 09/07/2011
Localizare : Nicosia - Cipru

Sus In jos

Re: [Tutorial] Page Peel Effect

Mesaj Scris de Ely la data de Sam Oct 22, 2011 3:17 pm

Frumos tutorial ! Bravo BODO pentru munca depusa !
avatar
Ely
Moderator
Moderator

Mesaje : 20
Data de inscriere : 28/08/2011
Varsta : 26

Sus In jos

Sus


 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum