Javascript - jQuery : Arrondir les coins

jQuery : Arrondir les coins

jQuery : Arrondir les coins

Par Sunshine75, publié le 20/11/2010 à 15:35:36

Votre page doit être liée à la dernière version de jQuery (jquery-1.4.1.js).
Vous aurez également besoin du plug ing "roundies.js"

(Les fichiers sont disponibles dans le fichier téléchargeable)

Etape 1 : Dans une premier temps nous allons installer les codes "Javascript".
Placez le code suivant entre les balises <head></head> de votre page :

<script type="text/javascript" src="js/jquery-1.4.1.js"></script>

<script type="text/javascript" src="js/roundies.js"></script>

<script type="text/javascript">

	DD_roundies.addRule('div.coin1', '10px'); 

	DD_roundies.addRule('div.coin2', '10px 0 10px 0'); 

	DD_roundies.addRule('div.coin3', '0 30px 0 10px'); 

</script>

Etape 2 : Maintenant nous allons mettre en place le code de mise en page.
Placez le code suivant entre les balises <head></head> de votre page, après le votre code javascript :

<style>	

.coin1{

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px; 

	-khtml-border-radius: 10px; 

	padding: 5px 5px;

	margin-left:5px; 

}

.coin2{

	-moz-border-radius: 0 10px 0 10px;

	-webkit-border-radius: 0 10px 0 10px; 

	-khtml-border-radius: 0 10px 0 10px; 

	padding: 5px 5px;

	margin-left:5px;

	 

}

.coin3{

	-moz-border-radius: 0 10% 0 10px;

	-webkit-border-radius: 0 10px 0 10px; 

	-khtml-border-radius: 0 10px 0 10px; 

	padding: 5px 5px;

	margin-left:5px;

	 

}

.coin3{

	-moz-border-radius: 0 10% 0 10px;

	-webkit-border-radius: 0 10px 0 10px; 

	-khtml-border-radius: 0 10px 0 10px; 

}

div,h1,a{

	background:#333;

	color:#fff;

}

</style>

Etape 3 : Et pour finir nous allons faire appel à nos classes dans la partie body de notre page. Placez le code suivant entre les balises <body></body> de votre page :

<div class="coin1"> 

		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 

</div>

<br>

<div class="coin2"> 

		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 

</div>

<br>

<div class="coin3"> 

		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 

</div>

Et voilà, vous pouvez admirer le résultat !
(La démonstration est disponible dans le fichier téléchargeable)

Téléchagement

Téléchargement du fichier source

index.html - 1920 octets

js/jquery-1.4.1.js - 160712 octets

js/roundies.js - 16383 octets

Vous devez être connecté pour télécharger ce fichier zip

Ajouter un commentaire

Informations sur le tutoriel