26 : Découverte des propriétés CSS 3.0

Description

Voici un exemple utilisant le pseudo-sélecteur :after appliqué à un sélecteur div :
Le sélecteur de style after css est aussi nommé "pseudo-element".
La pseudo-classe feuille de style css after pose des problèmes d'interprétation sous Internet Explorer qui ne la reconnaît pas. Notez que le navigateur Internet Explorer éprouve des problèmes à s'adapter aux nouvelles normes HTML 5 et CSS 3.

Voici un autre exemple utilisant la propriété column-count appliquée à un sélecteur p (paragraphe) :
Cette propriété permet d'afficher un contenu en colonnes.

1. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 71895
   
   
2. Inscrivez dans le champ titre : Découverte des propriétés CSS 3.0
   
   
3. Sélectionnez la section : MODULE CSS
   
   
4. Sélectionnez la matière : informatique
   
   
5. Inscrivez dans le champ no de la directive : 71895
   
   
6. Inscrivez dans votre page le titre de niveau 1 : Découverte des propriétés CSS 3.0
   
   
7. Insérez dans votre page une division (balise DIV) contenant le nom de la propriété CSS3 utilisée <div>Propriété utilisée : ...</div>
   
   
8. Ajoutez à cette balise la classe nommée css3 <div class="css3" >Propriété utilisée : ...</div>
   
   
9. Ajoutez AU HAUT DE VOTRE PAGE un bloc de feuille de style <style></style>
   
   
10. Identifiez dans cette feuille de style le sélecteur de classe css3 <style>.css3{}</style>
    
    
11. Ajoutez dans ce sélecteur, les propriétés suivantes
    border:2px solid red;
    height:300px;
    width:500px;
    position:relative;
    top: 200px;
    left:200px;
    font-size:25px; padding-left:50px; padding-top:50px;
    
    
    
    
12. Utilisez un des outils suivants :
    - http://www.createcss3.com/
    - Bordures à coins arrondis
    - Dégradé de couleurs
    - Générateur de boutons
    - Texte avec ombre
    - Boîte avec ombre
    - http://css3generator.com/
    - http://westciv.com/tools/shadows/
    - CSS3 Outils en ligne
    - CSS3 Motif CSS en arrière-plan
    - CSS3 http://layerstyles.org/builder.html
    - http://www.cssmatic.com/
    
    
13. À l'aide de l'outil choisi, créez une feuille de style utilisant les nouvelles propriétés Css du langage CSS3.
    
    
14. Copiez le code produit
    
    
15. Ajoutez entre les accolades le code de votre feuille de style
    
    
16. Indiquez le nom de la propriété css3 utilisée :Propriété utilisée : ...
    
    
17. Visualisez votre page et apportez des modifications au besoin.