SoftDesign


Bun venit Vizitator pe SoftDesign, speram ca-ti place acest forum care iti pune la dispozitie o gama larga de tutoriale si resurse pentru WebDesign si ForumGratuit , si speram ca vei binevoi sa-ti faci cont pe forum pentru a avea aces la toate subiectele forumui.

Bouncing Box

In jos

Bouncing Box

Mesaj Scris de Rio la data de Vin Mai 18, 2012 8:18 am

Demonstratie:
Click pe lupa pentru a vedea demo.


1.CSS
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS

Cod:
/* Bouncing box */

.bouncing-button a {
border: 1px solid#ddd;
background: #f3f3f3;
padding: 3px;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
color:#494848;
text-shadow:1px 1px 0 white;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;}

#bouncing-text {
margin-top: 10px;}

#box{
-moz-box-shadow: 0 5px 10px #ccc;
-webkit-box-shadow: 0 5px 10px #ccc;
box-shadow: 0 5px 10px #ccc;
background: #f3f3f3;
height:386px;
width:448px;
border:1px solid #ddd;
color:#494848;
text-shadow:1px 1px 0 white;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
margin-top: -10px;
padding: 5px;}

#box {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;}

2.HTML
Puteti adauga acest cod oriunde doriti, atat timp cat acea pagina accepta HTML-ul..
Cod:

<span class="bouncing-button">
<a class="button" href="#">Click pentru a deschide</a>
</span>

<div id="box">
<div id="bouncing-text">Text</div>
</div>

3.JAVASCRIPT
Adaugati aceste coduri in acelasi loc cu codurile HTML..
Cod:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tazyk.webs.com/Extrem%20Tutorials%20Files/The%20Bouncing%20Box/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://tazyk.webs.com/Extrem%20Tutorials%20Files/The%20Bouncing%20Box/jquery.bouncebox.1.0.js"></script>
<script type="text/javascript" src="http://tazyk.webs.com/Extrem%20Tutorials%20Files/The%20Bouncing%20Box/script.js"></script>


Tutorial creeat de Rio
***Important !

Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.

avatar
Rio
Membru Fondator

Sex : masculin
Mesaje : 340
Credite : 32391
Data de inscriere : 05/09/2011

Vezi profilul utilizatorului http://widegfx.forumer.ro

Sus In jos

Re: Bouncing Box

Mesaj Scris de PlayOn la data de Sam Mai 19, 2012 1:38 am

Foarte frumos tutorialul ! Bravo
avatar
PlayOn
Administrator

Sex : masculin
Mesaje : 254
Credite : 2657
Data de inscriere : 06/09/2011
Localizare : ROMANIA

Vezi profilul utilizatorului http://widegfx.forumer.ro

Sus In jos

Sus


 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum