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 !

Tutorial - Vertical Sexy Rotate Social Pages

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de Zeus la data de Vin Iun 03, 2011 10:00 am

Tutorial - Vertical Sexy Rotate Social Pages


In acest tutorial am sa va arat la ce anume am muncit eu 3 ore !
Cu ajutorul noilor proprietati CSS3 si putina inspiratie am reusit sa dau unei liste de imagini un efect foarte frumos la hover(pozitionarea mouse-ului peste...)


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

Daca va placut,haideti sa va arat cum se face !
Pentru a proba acest tutorial,creati o pagina HTML si introduceti acolo urmatoarele coduri:

1.Structura HTML:
Cod:
<div class="designART-sexy-rotate-social_pages-position">
<ul class="designART-sexy-rotate-social_pages-list">
<li>
<a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/RSS.png" class="designART-sexy-rotate-social_pages" /></a>
</li>
<li>
<a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/Facebook.png" class="designART-sexy-rotate-social_pages" /></a>
</li>
<li>
<a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/Twitter.png" class="designART-sexy-rotate-social_pages" /></a>
</li>
<li>
<a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/Digg.png" class="designART-sexy-rotate-social_pages" /></a>
</li>
<li>
<a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/delicious.png" class="designART-sexy-rotate-social_pages" /></a>
</li>
<li>
<a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/Youtube.png" class="designART-sexy-rotate-social_pages" /></a>
</li>
<li>
<a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/Flickr.png" class="designART-sexy-rotate-social_pages" /></a>
</li>
</ul>
</div>


2.Codurile CSS
Cod:

<style>
/* CSS creat de BODO - DesignART.forumhit.ro */
.designART-sexy-rotate-social_pages-position {
position: fixed;
left: -40px;
top: 180px;
}

ul.designART-sexy-rotate-social_pages-list {
        list-style: none;
}

.designART-sexy-rotate-social_pages {
        padding: 5px;
        width: 32px;
        height : 32px;
   -webkit-transition-duration: 1s;
   -moz-transition-duration: 1s;
   -o-transition-duration: 1s;
   transition-duration: 1s;
   
   -webkit-transition-property: -webkit-transform;
   -moz-transition-property: -moz-transform;
   -o-transition-property: -o-transform;
   transition-property: transform;
   
   overflow:hidden;

   }   

.designART-sexy-rotate-social_pages:hover {
        margin: 0 0 0 5px;
   -webkit-transform:rotate(360deg) scale(1.5) translate(10px);
   -moz-transform:rotate(360deg) scale(1.5) translate(10px);
   -o-transform:rotate(360deg) scale(1.5) translate(10px);
}   
/* SFARSIT CSS */
</style>




Sper ca va placut acest tutorial! Bafta !
***Daca intampinati probleme sau dificultati in realizarea acestui tutorial sa rugam sa postati in categoria [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 !
avatar
Zeus
Administrator
Administrator

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

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de BoGdDy la data de Vin Iun 03, 2011 12:06 pm

Frumos bravo BODO
avatar
BoGdDy
Membru Onorific
Membru Onorific

Mesaje Mesaje : 192
Credite Credite : 243
Reputatie : 0
Varsta Varsta : 20
Localizare Localizare : Undeva....

http://codingart.forumhit.ro/

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de Aleku la data de Vin Iun 03, 2011 9:58 pm

Foarte frumos, mulţumim Bodo.
avatar
Aleku
Gold Member
Gold Member

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

http://edtutorials.forumz.ro/

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de [x]sTyL[e] la data de Vin Iun 03, 2011 10:32 pm

foarte frumoase , multumim ! Wink


[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
avatar
[x]sTyL[e]
Administrator
Administrator

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

http://www.epicart.forumhit.ro

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

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

Superb, bravo BODO Smile
avatar
Kidutz
Gold Member
Gold Member

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

http://www.counterzone.forum.st

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de Globbe ;x la data de Mar Iun 07, 2011 1:18 am

Foate faine , felicitari . Smile
avatar
Globbe ;x
Membru DesignART
Membru DesignART

Mesaje Mesaje : 15
Credite Credite : 18
Reputatie : 0
Varsta Varsta : 27

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de BODO la data de Mier Iun 08, 2011 7:17 am

Se vede ca ai lucrat ceva timp la el. BRAVO!! Wink
avatar
BODO
Membru Onorific
Membru Onorific

Mesaje Mesaje : 327
Credite Credite : 406
Reputatie : 0

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de adyx la data de Vin Iun 17, 2011 12:54 pm

bai...deci...sunteti geniali

10 stele pt voi!!
avatar
adyx
Membru Nou
Membru Nou

Mesaje Mesaje : 7
Credite Credite : 9
Reputatie : 0
Varsta Varsta : 22

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de BeHappy la data de Vin Iun 17, 2011 1:09 pm

Un tutorial numai bun pentru toti. Smile
avatar
BeHappy
Gold Member
Gold Member

Mesaje Mesaje : 125
Credite Credite : 165
Reputatie : 0
Varsta Varsta : 23
Localizare Localizare : Mereni, Moldova

http://web-kings.talk-forums.com/

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de Serenity la data de Mar Iun 21, 2011 12:13 am

Foarte Frumos. Bravo BODO
avatar
Serenity
Membru DesignART
Membru DesignART

Mesaje Mesaje : 58
Credite Credite : 64
Reputatie : 0
Varsta Varsta : 25
Localizare Localizare : C:\Program FilesPhotoShop

http://allstutorials.forumz.ro/forum

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

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

Un tutorial excelent BODO !Iti admir munca.
avatar
Dystroy
Membru DesignART
Membru DesignART

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

http://designart.forumhit.ro

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de V1ruS la data de Vin Iul 01, 2011 3:32 pm

superb BODO te astept cu mai multe tutoriale de acest gen

deja mi-am si pus pe forum Very Happy
avatar
V1ruS
Membru Nou
Membru Nou

Mesaje Mesaje : 6
Credite Credite : 8
Reputatie : 0
Varsta Varsta : 21

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de BaCk la data de Sam Iul 02, 2011 11:49 pm

Impresionat cate poti sa faci.Felicitari! Daca o sa am vreodata ocazia, am sa le folosesc!
avatar
BaCk
Membru Onorific
Membru Onorific

Mesaje Mesaje : 90
Credite Credite : 90
Reputatie : 0
Varsta Varsta : 23

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

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

L-am folosit pentru un moment.
Bun.

The Godfather
Gold Member
Gold Member

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

http://designart.forumhit.ro/

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de Kocos la data de Mier Iul 20, 2011 8:25 pm

Bun tutorial insa cineva de pe un alt forum ia tutorialele si spun ca ii apartin...
avatar
Kocos
Gold Member
Gold Member

Mesaje Mesaje : 354
Credite Credite : 166
Reputatie : 3
Varsta Varsta : 21
Localizare Localizare : Arad

http://proaim.wow3.info

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de DirTy la data de Sam Iul 23, 2011 10:16 am

unde il bag ?

DirTy
Membru DesignART
Membru DesignART

Mesaje Mesaje : 22
Credite Credite : 24
Reputatie : 0
Varsta Varsta : 24

http://designart.forumhit.ro

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de [x]sTyL[e] la data de Sam Iul 23, 2011 12:11 pm

depinde unde vrei sa-ti apara Wink


[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
avatar
[x]sTyL[e]
Administrator
Administrator

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

http://www.epicart.forumhit.ro

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de DirTy la data de Sam Iul 23, 2011 9:32 pm

Poy in tot forumul...logic...

DirTy
Membru DesignART
Membru DesignART

Mesaje Mesaje : 22
Credite Credite : 24
Reputatie : 0
Varsta Varsta : 24

http://designart.forumhit.ro

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de Mr.Pagnel la data de Lun Iul 25, 2011 3:04 am

Super, ceva extraordinar !
avatar
Mr.Pagnel
Moderator
Moderator

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

http://designart.forumhit.ro

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de Clik la data de Vin Aug 12, 2011 2:41 am

super iconurile !
Bravo arata foarte bine !
avatar
Clik
Membru DesignART
Membru DesignART

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

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

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de Paul la data de Vin Aug 12, 2011 2:43 am

bravo imi place..
era mai frumos daca nu avea efectul acela de rotire..
mai elegant si simplu..
avatar
Paul
Moderator
Moderator

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

http://designart.forumhit.ro/

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de dynamiccs la data de Joi Sept 01, 2011 5:16 am

Foarte frumos Multumim Si bravo pentru munca depusa
avatar
dynamiccs
Membru DesignART
Membru DesignART

Mesaje Mesaje : 39
Credite Credite : 49
Reputatie : 0

http://designart.forumhit.ro/

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de InternetFUN la data de Sam Oct 01, 2011 9:56 am

Frumos efectu' de rotatie...Oare Facebook nu ameteste? Smile)
avatar
InternetFUN
Membru DesignART
Membru DesignART

Mesaje Mesaje : 95
Credite Credite : 115
Reputatie : 0
Varsta Varsta : 20
Localizare Localizare : Piatra Neamt

http://internetfun.forumz.ro/

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de Gabryel la data de Mier Oct 19, 2011 1:57 pm

foarte frumos bravo Smile
avatar
Gabryel
Gold Member
Gold Member

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

http://MUIEDESIGNRT.FORUMHIT.RO

Sus In jos

Re: Tutorial - Vertical Sexy Rotate Social Pages

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus


 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum