Comment réaliser un site web incroyable avec CSS3 Première partie

Matthieu - Développement Facile

Formation sur le langage CSS3 pour rendre votre site Web très attractif
A travers six cours complets en vidéo, accompagnés d'exemples de code source, vous allez apprendre à mieux présenter votre site web grâce à CSS3.
Après avoir vu les bases du langage CSS3, vous apprendrez à manipuler les polices de caractères, personnaliser votre texte, vos listes et enfin l'arrière plan de votre site.

Commentez cet article : Commentez

- Titre : Comment réaliser un site web incroyable avec CSS3 Première partie

- Auteur : Matthieu - Développement Facile

- Parution : 23 juin 2014

- Licence : 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.

Sommaire

- I. Introduction

- II. Maîtrisez les bases de CSS3

- III. Comment utiliser les polices de caractères font avec CSS3

- IV. Comment utiliser les polices de caractères personnalisées

- V. Comment personnaliser votre texte avec CSS3 partie 1

- VI. Comment personnaliser votre texte avec CSS3 partie 2

- VII. Comment utiliser tout le potentiel des arrière-plans background avec CSS3

- VIII. Recevez gratuitement la formation "CSS3 Facile"

- IX. Remerciements

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 - Maîtrisez les bases de CSS3

Dans cette première vidéo, vous apprendrez les bases des feuilles de style CSS3 avec
les sélecteurs CSS, les commentaires CSS, les unités de mesure CSS, les couleurs CSS.

Intégrez directement du CSS dans une balise HTML5, ou gérez-le dans la page HTML5 ou dans un fichier CSS séparé.
Enfin, apprenez les priorités en CSS.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Ci-dessous l'exemple de code directement dans une page HTML5.

<!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>
h2{ font-style: bold;
background-color: #cccccc;
color: #097B6B;}
/* Ceci est un commentaire CSS */
</style>

</head>
<body>

<h1 style="font-style: bold;">Titre de l'article 1</h1>
<h1>Titre de l'article 2</h1>
<h2>Titre de l'article 2</h2>

<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>

III - Comment utiliser les polices de caractères font avec CSS3

Dans ce cours vidéo vous allez apprendre à utiliser les polices de caractères standards.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Ci-dessous l'exemple de code

<!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>
h1 { font-family: "Arial";
font-style: italic;
font-size: 43px;}

h2{ font-family: "Impact";
background-color: #cccccc;
color: #097B6B;
font-size: 30px;}
/* Ceci est un commentaire CSS */
</style>

</head>
<body>

<h1>Titre de l'article 1</h1>
<h2>Titre de l'article 2</h2>

<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>

IV - Comment utiliser les polices de caractères personnalisées

Dans cette vidéo, personnalisez vos propres polices de caractères pour rendre votre site Web unique. Et avec Google Fonts, utilisez des polices compatibles avec la majorité des navigateurs.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Ci-dessous, l'exemple de code avec Google Fonts

<!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>
.bloc1 {
width: 250px; height: 160px;
padding: 5px;
margin:15px;
border: 2px solid red;
font-family: 'Revalia', Arial;}

</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>

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

Liens utiles :
Google Fonts
Google Fonts API
Font Squirrel

V - Comment personnaliser votre texte avec CSS3 partie 1

Avec ce cours vidéo, apprenez à mettre en forme votre texte de façon très précise avec CSS3. Vous pouvez agir sur de nombreux paramètres pour mettre en valeur votre texte.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Ci-dessous, l'exemple de code

<!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>
h1 { color: #cc0000; }

.txt1 { text-indent: 32px;}

.txt4 { text-transform: capitalize;}
.txt2 { text-transform: lowercase;}
.txt3 { text-transform: uppercase;}

.txt10 { text-decoration: overline;}
.txt20 { text-decoration: underline;}
.txt30 { text-decoration: underline overline;}
.txt40 { text-decoration: line-through;}
</style>

</head>
<body>

<h1>Titre de l'article 1</h1>

<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression...</p>

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

<p class="txt4">1ère lettre de chaque mot en majuscule</p>
<p class="txt2">Texte en Minuscules</p>
<p class="txt3">Texte en Majuscules</p>

<p class="txt10">Texte surligné</p>
<p class="txt20">Texte souligné</p>
<p class="txt30">Texte souligné et surligné</p>
<p class="txt40">Texte barré</p>

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

VI - Comment personnaliser votre texte avec CSS3 partie 2

Voici la suite du cours vidéo précédent. Vous y trouverez la façon de mettre en page votre texte.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Ci-dessous l'exemple de code

<!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 { line-height: 30px;}
.txt2 { line-height: -3px;}

.txt10 {  white-space: pre;}

.txt100 {  text-align: right;}

.txt31 {  vertical-align: super;}
.txt32 {  vertical-align: middle;}
.txt33 {  vertical-align: bottom;}

.txt41 { direction: rtl;}
.txt42 { direction: ltr;}

.txt61 {  width: 150px;
text-align:justify;}
.txt62 { width: 200px; }
</style>

</head>
<body>

<p class="txt1">Le Lorem Ipsum est <br />simplement du faux texte...</p>
<p class="txt2">Le Lorem Ipsum est <br />simplement du faux texte...</p>

<p class="txt10">Le  Lorem   Ipsum   est<br /> simplement     du faux     texte...</p>

<p class="txt100">Le Lorem Ipsum est <br />simplement du faux texte...</p>

<p>Du texte : <div class="txt31">Le Lorem Ipsum.</div>
<p>Du texte : <div class="txt32">Le Lorem Ipsum.</div>
<p>Du texte : <div class="txt33">Le Lorem Ipsum.</div>

<div class="txt41">Le Lorem Ipsum.</div><br /><br />
<div class="txt42">Le Lorem Ipsum.</div><br /><br />

<div class="txt61">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div><br /><br />
<div class="txt62">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>

VII - Comment utiliser tout le potentiel des arrière-plans background avec CSS3

Découvrez dans cette vidéo comment placer des images d'arrière plan sur votre site Web en CSS3.
Que ce soit pour personnaliser une zone de texte ou votre site entier, vous aller apprendre à maîtriser les propriétés de background en CSS3.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Ci-dessous, l'exemple de code

<!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: 550px;
background-color: #CC2EFA;
font-size: 28px;
text-align: center;}

p {width: 750px;
height: 550px;
background-image: url(background2.jpg);
font-size: 28px;
text-align: center;}

body { background-image: url(background.jpg);}
</style>

</head>
<body>

<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><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><br /><br />

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

VIII - 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.

Cliquez simplement ici pour recevoir gratuitement la formation CSS3 Facile

IX - 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 à Jacques Jean pour sa relecture orthographique.