IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Comment réaliser un site web incroyable avec CSS3 Deuxième partie

Formation sur le langage CSS3 pour rendre votre site Web très attractif
A travers cinq cours complets en vidéo, accompagnés d'exemples de code source, vous allez apprendre à mieux présenter votre site Web grâce à CSS3.
Vous allez découvrir ici les nouvelles balises CSS3 et comment les utiliser.
Apprenez à personnaliser vos listes et vos liens

Commentez cet article : 1 commentaire Donner une note à l´article (2.5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

De nos jours le design d'un site est presque aussi important que son contenu.
C'est là que les feuilles de style en CSS3 entrent en jeu.

Avec la méthode "Développement Facile", vous allez rendre votre site encore plus attractif grâce aux feuilles de style CSS3.
Retrouvez un extrait de la formation CSS3 Facile, composée de plus de 30 cours professionnels pour vous aider à progresser rapidement avec la maîtrise du langage CSS3.

II. Les nouvelles balises CSS3 - partie 1

Découvrez dans cette vidéo les nouvelles balises CSS3 :
first-letter, first-line, before, content


Un exemple de code ci-dessous

 
Sélectionnez
<!DOCTYPE html> 
<html lang="fr"> 
<head>
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 -->  
	<title>HTML5</title> 
	<meta charset="UTF-8">
	
	<style> 
	.txt1 { border: 2px solid blue;
			margin-left: 30px; 
			width: 200px; 
			padding: 10px;} 
			  
	/* style de la premiere lettre du paragraphe */		  
	.letter:first-letter { margin-right: 8px; 
						   color:#0101DF;
		                   font-size: 32px;} 
	
	/* la premiere ligne d'un paragraphe */					   
	.letter:first-line { font-weight: bold; 
	                     font-size: 28px;} 	
	</style>

</head> 
<body> 

	<div class="txt1"><div class="letter">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div></div>

	<footer> 
		<hr> 
		<p>Copyright <a href="http://www.programmation-facile.com/" target="_blank">www.Developpement-Facile.com</a> 2014</p>  
	</footer> 
</body> 
</html>

III. Les nouvelles balises CSS3 - partie 2

Dans cette vidéo, un cours consacré aux nouvelles balises CSS3 :
border-radius, border-image, text-shadow, box-shadow,
box-reflect, cross-fade


Ci-dessous l'exemple de code

 
Sélectionnez
<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 --> 
	<title>HTML5</title> 
	<meta charset="UTF-8">
	
	<style> 
	.bloc1 { 
			width: 200px; 
			height: 150px; 
			padding: 5px; 
			border: 2px solid red;
			border-radius: 5px 10px 20px 5px;}
	
	.arrondi {
			width: 200px; 
			height: 100px; 
			margin: 25px;
			background-color:#E4EFFF;
			border:1px solid #9FC6FF;
			padding:5px;
			-moz-border-radius:10px 0;
			-webkit-border-radius:10px 0;
			border-radius:10px 0;
	}		
			
	.bloc2 {  
			width: 200px; 
			height: 100px; 
			padding: 5px;
			text-align: center;
			text-shadow: 2px 2px 3px red;}	
		   
	</style>
</head> 
<body> 

	<div class="bloc1">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div> 

	<div class="bloc2">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div> 

	<div class="arrondi">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>

	<footer> 
		<hr> 
		<p>Copyright <a href="http://www.programmation-facile.com/" target="_blank">www.Developpement-Facile.com</a> 2014</p>  
	</footer> 
</body> 
</html>

IV. Les nouvelles balises CSS3 - partie 3

On continue avec les nouvelles balises CSS3 :
text-overflow, hypens, resize, background:linear-gradient
background:radial-gradient, opacity


Ci-dessous l'exemple de code

 
Sélectionnez
<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 -->
	<title>HTML5</title> 
	<meta charset="UTF-8">
	<link href='http://fonts.googleapis.com/css?family=Revalia' rel='stylesheet' type='text/css'>
	
	<style> 
	.txt1 { width: 200px;  
			padding:15px;
			text-align: justify; 
			border:2px solid #33deff;
			background:-webkit-linear-gradient(top, #124DEF, #DEF124); 
			background:-moz-linear-gradient(top, #124DEF, #DEF124); 
			background:-ms-linear-gradient(top, #124DEF, #DEF124); 
			background:-o-linear-gradient(top, #124DEF, #DEF124); 
			background:linear-gradient(top, #124DEF, #DEF124);
	}
	
	div { margin: 20px;  
		font-size: 20px;      
		width: 269px;  
		border: 2px solid blue;} 
			
	.normal { white-space: nowrap;}   
	           
	.clip { white-space: nowrap;  
			overflow: hidden;                
			text-overflow: clip;} 
			  
	.ellipsis { white-space: nowrap;  
			overflow: hidden;               
			text-overflow: ellipsis;} 
				   
	.string { white-space: nowrap;  
			overflow: hidden;               
			text-overflow: ", etc.";}  
	</style>
</head> 
<body> 
	<div class="txt1">Le Lorem Ipsum est simplement du faux texte employé.</div>

	<div class="normal">Le Lorem Ipsum est simplement du faux texte employé.</div> 
	<div class="clip">Le Lorem Ipsum est simplement du faux texte employé.</div> 
	<div class="ellipsis">Le Lorem Ipsum est simplement du faux texte employé.</div> 
	<div class="string">Le Lorem Ipsum est simplement du faux texte employé.</div> 

	<footer> 
		<hr> 
		<p>Copyright <a href="http://www.programmation-facile.com/" target="_blank">www.Developpement-Facile.com</a> 2014</p>  
	</footer> 
</body> 
</html>

V. Les nouvelles balises CSS3 - partie 4

Dans cette dernière vidéo sur les balises vous apprendrez les transformations sur votre texte :
mettre en colonne, faire des rotations, des déplacements, une mise à l'échelle et faire du défilement


Ci-dessous l'exemple de code

 
Sélectionnez
<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 --> 
	<title>HTML5</title> 
	<meta charset="UTF-8">
	<link href='http://fonts.googleapis.com/css?family=Revalia' rel='stylesheet' type='text/css'>
	
	<style> 
	.txt1 { width: 300px; 
			padding:10px;
			margin: 20px;  
			text-align: justify;
			column-count: 3; 
			column-gap: 10px; 
			column-rule: 1px solid #33deff; 
			-moz-column-count: 3; 
			-moz-column-gap: 10px; 
			-moz-column-rule: 1px solid #33deff; 
			-webkit-column-count: 3; 
			-webkit-column-gap: 10px; 
			-webkit-column-rule: 1px solid #33deff;}
	
	.txt2 { width: 280px;  
	        margin: 20px;  
			text-align: justify;
			-moz-transform: rotate(-45deg); 
			-webkit-transform: rotate(-45deg); 
			-o-transform: rotate(-45deg); 
			transform: rotate(-45deg);}
	
	</style>

</head> 
<body> 

	<div class="txt1">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme...</div>
		
	<div class="txt2">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme...</div>
	
	<footer> 
		<hr> 
		<p>Copyright <a href="http://www.programmation-facile.com/" target="_blank">www.Developpement-Facile.com</a> 2014</p>  
	</footer> 
</body> 
</html>

VI. Personnalisez vos liens avec CSS3

Personnalisez vos liens HTML5 avec CSS3
Modifiez la couleur, ajoutez une info bulle, modifiez les effets de vos liens, ...


Ci-dessous l'exemple de code

 
Sélectionnez
<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 -->
	<title>HTML5</title> 
	<meta charset="UTF-8">
	
	<style> 
	div {width: 300px; 
	    height: 300px; 
		margin: 30px;
	    border-style: solid; 
	    border-width: 10px;
	    border-top-color: #ccc; 
	    border-bottom-color: #ccc; 
	    border-left-color: #eee; 
	    border-right-color: #eee; 
	    background-color: #ddd; 
	    text-align: center; } 
	
	/* passage de la souris au dessus de la div */	
	div:hover{
		background-color: #DF01A5; 
	}
		
		
	/* style des liens de la page */	
	a:link{
		text-decoration:none;
		color:#084def;
		font-weight:bold;
	}	
		
	/* lien déjà cliqué par l'internaute*/
	a:visited {
		color:#FF8000;
	}
		
	/* passage de la souris au dessus du lien */	
	a:hover{
		text-decoration:underline;
		color:#def125;
	}
	
	/* etat clique du lien */	
	a:active {
		color:#29088A;
	}
		
	</style>

</head> 
<body> 

	<a href="http://www.programmation-facile.com/propos/">Contactez Dev Facile</a><br />
	
	<div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br />
	Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
	
	<a href="http://www.programmation-facile.com/">Dev Facile</a><br /><br />
	
	
	<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br />
	Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>


	<footer> 
		<hr> 
		<p>Copyright <a href="http://www.programmation-facile.com/" target="_blank">www.Developpement-Facile.com</a> 2014</p>  
	</footer> 
</body> 
</html>

VII. Recevez Gratuitement la Formation CSS3 Facile

Si vous souhaitez aller plus loin dans la création de site Web incroyable,
vous pouvez recevoir gratuitement la formation CSS3 Facile avec des cours pas à pas, accompagnés des codes source commentés.
Ainsi, vous progressez à votre rythme, avec un suivi personnalisé et individuel. Vous avez la possibilité de poser toutes vos questions techniques sous chaque cours.

Formation CSS3 Facile !

Cliquez simplement ici pour recevoir gratuitement la formation CSS3 FacileCliquez simplement ici pour recevoir gratuitement la formation CSS3 Facile

VIII. Remerciements

Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Jean-Philippe Andréjacques_jean pour sa relecture orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Licence Creative Commons
Le contenu de cet article est rédigé par Développement Facile et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.