Petite exception sous IE>9 qui aura besoin d'un plugin externe : roundies

http://www.dillerdesign.com/experiment/DD_roundies/

Donc sous IE < 9 télécharger le script roundies.js et le déclarer dans son entête

<!--[if lte IE 8]>
 <script type="text/javascript" src="../../scripts/roundies.js"> </script>
 <script  type="text/javascript">
  DD_roundies.addRule('.monblocarrondi', '10px 10px 10px 10px ');
</script>
 <![endif]-->

Pour les autres navigateurs,  3 lignes dans la feuille de style suffisent pour arrondir les bords de mes éléments de classe .monblocarrondi  :

.monblocarrondi{
   border-radius: 3px; /* sert pour les dernières version des navigateurs à partir de IE 9*/
   -moz-border-radius: 3px; /* sert pour les anciennes versions de Mozilla */
   -webkit-border-radius: 3px;
}

A noter, la possibilité de personnaliser la courbure de chaque bord : border-radius: 10px 20px 30px 40px 10px :haut gauche – 20px: haut droit – 30px bas droit – 40px bas gauche. on part du haut gauche dans le sens des aiguilles d'une montre.

Appel de monCSS2.css depuis monCSS1.css :

@import "monCSS2.css"
/*ou*/
@import url("monCSS2.css");

Dans cet exemple j’ai joué sur l’opacité de l’image mais on peut aussi appliquer un clignotement sur la couleur d’un texte ou sur le background d’un <div>

Voir cet article : https://developer.mozilla.org/fr/docs/Web/CSS/@keyframes

<img class="image-clignote" src="../img/image1.jpg"/>

.image-clignote  {
   animation-duration: .8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

On peut aussi mettre en place des systèmes de clignotement d’éléments en JQuery

h3:first-letter {font-size: 4em; color: red;}

Cas où le pseudo élément :first-letter ne fonctionne pas

:first-letter ne va pas fonctionner si :

• Le premier élément du bloc sélectionné (dans notre exemple ci dessus un h3) n’est pas une lettre (s’il y a une image, ou une icône avant la première lettre)

• Si le bloc sélectionné n’est pas de type block . Par exemple ce pseudo élément ne va pas fonctionner sur un élément span. Dans ce cas, il existe cependant une solution qui est d’assigner la propriété block au span.
  
  Exemple ci dessous pour un span de class « span-block »

span.span-block:first-letter {color:red;}
span.span-block {display: block;}

<div id="container">
  <ul>
     <li>Joe</li>
     <li>Jack</li>
     <li>William</li>
     <li>Averell</li>
  </ul>
</div>

#container ul {
  list-style: none;
  padding-left:10px;
}
#container li {
    padding-left: 1em;
    text-indent: -.7em;
    padding-bottom:5px;
}

#container li:before {
    content: ">>  ";
    font-size:.7em;
    color: #e5232b;
}

Le parent sera alors déplacé vers le bas de façon apparemment incompréhensible, puisqu'aucun padding ne lui est directement associé.

Exemple de cas de figure: 

.parent{padding:0;}
.enfant {margin:10px;}

<div class="parent">
   <p class="enfant">Test</p>
</div>

Voici une liste non exhaustive des solutions qui s'offrent à nous, à choisir selon votre configuration :

– Ajouter un padding au parent.

– Affecter au parent la propriété CSS overflow:hidden; ou overflow:auto;

– Affecter à l'enfant la propriété : display: inline-block; ou float:left; ou right;

Pas glop.

La solution pour avoir un div a 100% exactement est simple et rapide , et se résume à l’utilisation de la propriété CSS box-sizing :

div{width:100%; padding:10px;box-sizing: border-box;}

Code HTML :

<div class="fond_image">
<img src="img/image1.jpg" alt="effet sympa sur le survol d'une image" />
</div>

Au passage de la souris sur l’image on affecte à l’image une opacité CSS < 1 de façon à laisser transparaitre la couleur du background. Pour rendre l’effet plus doux, on utilise la propríeté CSS3 de transition afin de changer graduellement l’opacité.

Code CSS : 

.fond_image{
background:#000000;
display:inline-block;
}
.fond_image img{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
}
.fond_image img:hover{
opacity:0.8;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
}

On peut jouer sur la valeur de l’opacité et sur la couleur de fond pour donner des effets différents, voir les exemples sur les images ci dessus.

Code HTML :

<div class="mon_div"> Mon div </div>

Code CSS :

.mon_div:before{ 
  content:url(img/image.jpg) ;
  position:relative; 
  left:-3px;
  top:10px;
 }
.mon_div {background-color: #eaeaea;}

Code HTML :

<div id="art201">
  <div class="feuilles"> </div>
</div>

Code CSS :

#art201{
  background : #7c8d07;
  width:100%;height:80px;
}
.feuilles{
  margin:auto;
  width:40px;
  height:55px;
  border:#ccc solid 1px;
  background-color:#fff;
  box-shadow: 4px 4px 0 #fff,
              5px 5px 0 #ccc,
              9px 9px 0 #fff,
              10px 10px 0 #ccc,
              14px 14px 0 #fff;
-moz-box-shadow: 4px 4px 0 #fff,
                 5px 5px 0 #ccc,
                 9px 9px 0 #fff,
                 10px 10px 0 #ccc,
                 14px 14px 0 #fff;
-webkit-box-shadow: 4px 4px 0 #fff,
                    5px 5px 0 #ccc,
                    9px 9px 0 #fff,
                    10px 10px 0 #ccc,
                    14px 14px 0 #fff;
}

Propriété CSS que l’on utilise ici  pour rajouter un liseré de chaque côté du titre <h1>

Code HTML :

<h1> <span> Un joli titre en CSS 3</span></h1>

Rajouter un liseré en CSS

Code CSS :

h1{
text-align:center;
background:linear-gradient (
#fff 0%,
#fff 45%,
#7c8d07 46%,
#7c8d07 54%,  
#fff 54%,
#fff 100%);
background:-webkit-linear-gradient(
#fff 0%,
#fff 45%,
#7c8d07 46%,
#7c8d07 54%,  
#fff 54%,
#fff 100%);
background:    -moz-linear-gradient(
#fff 0%,
#fff 45%,
#7c8d07 46%,
#7c8d07 54%,  
#fff 54%,
#fff 100%);
background:     -ms-linear-gradient(
#fff 0%,
#fff 45%,
#7c8d07 46%,
#7c8d07 54%,  
#fff 54%,
#fff 100%);
background:      -o-linear-gradient(
#fff 0%,
#fff 45%,
#7c8d07 46%,
#7c8d07 54%,  
#fff 54%,
#fff 100%);
}
h1 span{
background:#fff;padding:0 20px;
}

Nous pouvons utiliser cette méthode pour changer aléatoirement l'image de background d'un header par exemple.

Créons par exemple 10 images de background différentes, de même taille et de noms : 1.jpg, 2.jpg ….10.jpg.

Générons dynamiquement en PHP une feuille de style dont l'image de background du header sera gérée via une variable $header_rd définie aléatoirement .

Création dynamique d'une feuille de style 

<?php
  header("Content-type: text/css; charset=iso-8859-1");
  $header_rd=rand(1,10);
  print"body{background:url(images/".$header_rd.".jpg)};
}"
?>

Pour empêcher l'apparition de cette bordure sur toutes les images de son site, il suffit de modifier l'attribut CSS border sur l'élément global img

Code CSS :

img{border:none;}

Choisir une police Google Web Font

Après avoir fait votre choix dans la bibliothèques de polices de google, cliquez sur le lien "Quick use" associé à police de vos rêves.

Si besoin, choisissez les tailles de police dont vous aurez besoin, et copiez le code que vous présente google web font "Add this code to your website".

Ajouter la Google Web Font choisie à votre site Internet  

Copiez ensuite ce code à l'intérieur de la balise <head></head> du code HTML de votre site (Remplacer dans l'exemple ci dessous NOMDELAFONT par le nom de votre police).

<head>
  <link href='http://fonts.googleapis.com/css?family=NOMDELAFONT' rel='stylesheet' type='text/css'>
  <!-- il y a certainement d'autres lignes de code à l'intérieur de votre balise head, veillez à ne pas les effacer ! -->
</head>

Ce code vous permet d'utiliser votre police google préférée n'importe où dans votre site (ici NOMDELAFONT) en la chargeant directement depuis le site de Google web font. 
 

Il ne vous reste plus qu'à déclarer votre nouvelle font dans votre feuille de style via la propriété CSS font-family

Déclaration de la police Google dans le fichier CSS

body{
  font-family:NOMDELAFONT, Arial;
}

Remplacer NOMDELAFONT par le nom de votre police.

Code HTML :

3 div pour afficher le ruban

<div id="fond"> 
      <div class="ruban">     
        <h2>Un ruban CSS 3 !</h2>     
      </div>     
      <div class="ruban_gauche"></div>
      <div class="ruban_droit"></div>
</div>

Code CSS :

#fond {
position: relative;
margin: 0px auto;
width: 350px;
background: #fff;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
z-index: 10;
height:110px;
}

.ruban {
background: #b1c70d;
height: 50px;
width: 380px;
position: relative;
left:-15px;
top: 30px;
float: left;
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100;
}

.ruban h2 {
font-size: 25px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
margin:10px;
}

.ruban_gauche {
border-color: transparent #7e9202 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 65px;
z-index: -1;  /*s'affichera sous le rectangle  */
}

.ruban_droit {
border-color: transparent transparent transparent #7e9202;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 350px;
top: 35px;
z-index: -1;
}

Code HTML :

<div id="mondiv">Cailloux !</div>

Code CSS :

#mondiv:before {
content: "Papier! ! ";
}

#mondiv:after{
content: " Ciseaux! ";
}

On aura à l'affichage : Papier! Cailloux! Ciseaux!

En quelques petites lignes de code, voici un rond tout de CSS3 conçu, et ce sans image !

La technique utilise la propriété border-radius qui permet d’arrondir les bords d’un élément HTML. Le principe est de donner un arrondi adapté à la taille de l’élément afin de lui donner une forme parfaitement arrondie.

code HTML :

<div id="moncercle"></div>

code CSS :

#moncercle{
  background:#bfd70e;
  border-radius:50%;
  width:160px;
  height:160px;
  border:2px solid #679403; 
}

Code HTML :

<div id="bord_pointille"></div>

Code CSS :

#bord_pointille{
width:100px;
height:100px;
background:#bfd70e;
border:dashed 3px #679403;
border-radius:5px;
box-shadow:0 0 0 5px #bfd70e;
margin-auto
}

Survolez pour tester la modification de couleur avec CSS3

code HTML :

<span id="hover_color"> Tester ici !!!  </span>

code CSS :

#hover_color{
  font-weight:bold;
  font-size:22px;
  color : #f69b00;
  cursor:pointer;
  transition: color 1s;
  -moz-transition: color 1s; /* Firefox 4 */
  -webkit-transition: color 1s; /* Safari and Chrome */
  -o-transition: color 1s; /* Opera */
}

#hover_color:hover{
   color : #f11d7e;
  transition: color 0.5s;
  -moz-transition: color 0.5s; /* Firefox 4 */
  -webkit-transition: color 0.5s; /* Safari and Chrome */
  -o-transition: color 0.5s; /* Opera */
}

La propriété transition n'est pas interprétée par IE.

Code CSS :

Colore une ligne sur deux

table tr:nth-child(odd){
  background-color:red;
}