Après de la 3D et un trait de contour, c'est maintenant une ombre portée en diagonale que nous allons générer sur du texte en CSS, toujours grâce à la propriété text-shadow.

Avez-vous déjà vu (...) ce genre d'ombre dans des apparences de type flat-design ?

Foo!

C'est trop chou, non ? Eh bien je vais vous expliquer comment la reproduire sur votre numéro de pagination !
Libre à vous ensuite d'appliquer l'effet sur d'autres éléments comme des boutons, des titres, etc.

20 ombres à la suite

Le principe est quasiment le même que pour l'effet 3D : multiplier les ombres avec un pixel d'écart à chaque fois.
La différence ici, c'est que l'on devra en ajouter assez pour que l'ombre sorte du cadre de l'élément (son arrière-plan).

C'est parti !

Petite préparation

Nous allons tout d'abord cibler notre élément, qui porte la classe .pagination-current et ajouter un commentaire au-dessus pour plus de lisibilité :

/* Pagination */
.pagination-current{}

Ensuite, nous allons lui appliquer une couleur de fond ainsi qu'une marge interne :

/* Pagination */
.pagination-current{
    background-color: #e55e18;
    padding: 5px;
}

Pour changer la couleur du numéro, il faudra ajouter cette propriété :

color: #fff;

Mon numéro apparaît maintenant en blanc sur fond orange.
Si vous deviez lui appliquer une épaisseur grasse (c'est déjà le cas sur mon thème), il faudra ajouter ceci :

font-weight: bold;

Maintenant, si nous appliquons ce code CSS, nous aurons un petit souci de marges :
En effet, la marge interne se met à couvrir l'espace tout autour, au lieu de déplacer les éléments. Mince alors ! C'est parce que nous avons affaire à un élément ancré dans du texte (balise de type "inline"). Or, le texte possède une hauteur de ligne et un espacement indépendant des marges.

Nous allons donc changer le type de notre balise pour qu'elle ait un comportement normal, en lui ajoutant cette propriété, hop !

display: inline-block;

Un autre problème se présente maintenant : le bloc est décalé en hauteur par rapport au reste de la ligne. Rhooo !
Nous allons donc régler l'alignement vertical avec cette autre propriété :

vertical-align: middle;

Et voilà !
Nous avons donc ce code :

/* Pagination */
.pagination-current{
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    background-color: #e55e18;
    color: #fff;
}

Passons maintenant à l'effet souhaité :

L'ombre en diagonale

Utilisons la propriété text-shadow, pour réaliser la première ombre légèrement plus foncée que l'arrière-plan, et que l'on décalera d'un pixel en bas et d'un pixel à droite :

text-shadow: 1px 1px #cc4800;

Derrière une virgule, répétons la même ombre, décalée de deux pixels cette fois :

text-shadow: 1px 1px #cc4800, 2px 2px #cc4800;

Et ainsi de suite jusqu'à 20 pixels :

text-shadow: 1px 1px #cc4800, 2px 2px #cc4800, 3px 3px #cc4800, 4px 4px #cc4800, 5px 5px #cc4800, 6px 6px #cc4800, 7px 7px #cc4800, 8px 8px #cc4800, 9px 9px #cc4800, 10px 10px #cc4800, 11px 11px #cc4800, 12px 12px #cc4800, 13px 13px #cc4800, 14px 14px #cc4800, 15px 15px #cc4800, 16px 16px #cc4800, 17px 17px #cc4800, 18px 18px #cc4800, 19px 19px #cc4800, 20px 20px #cc4800;

Voilà l'ombre qui dépasse largement le bord.
Il ne nous reste plus qu'à masquer tout ce qui dépasse, et ce sera avec la propriété suivante :

overflow: hidden;

Voilà, nous avons fini ! Oh-là-là comme c'est zouliii !!!

1  2 3 4 ...

Voici le code complet :

/* Pagination */
.pagination-current{
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    padding: 5px;
    background-color: #e55e18;
    color: #fff;
    text-shadow: 1px 1px #cc4800, 2px 2px #cc4800, 3px 3px #cc4800, 4px 4px #cc4800, 5px 5px #cc4800, 6px 6px #cc4800, 7px 7px #cc4800, 8px 8px #cc4800, 9px 9px #cc4800, 10px 10px #cc4800, 11px 11px #cc4800, 12px 12px #cc4800, 13px 13px #cc4800, 14px 14px #cc4800, 15px 15px #cc4800, 16px 16px #cc4800, 17px 17px #cc4800, 18px 18px #cc4800, 19px 19px #cc4800, 20px 20px #cc4800;
}

Si vous souhaitez changer la couleur, il suffira d'utiliser la fonction rechercher - remplacer de votre éditeur de texte (ou sur le Bloc Note de Windows) pour aller plus vite.

Bon développement !