Sur ce post seront stockées plusieurs petites astuces utiles pour les développeurs Web en herbe, allant de l’optimisation graphique aux petits tutoriaux utiles! Ce post sera mis à jour et les dernières nouveautés seront notifiés en 1ère partie. Bon codage!

1. CSS3 : Maîtriser simplement le box-shadow!

2. HTML/CSS : Rendre une <DIV> entièrement cliquable proprement

1. CSS3 : Maîtriser simplement le box-shadow!

La propriété box-shadow permet d’ajouter une ombre autour d’une balise quelconque dans votre feuille de style CSS. Une balise div par exemple, tout comme l’iframe, img, a (où vous devrez ajouter la propriété css « display:block; » et une taille).

Formule simplifié valide css3 (tous les navigateurs à jours depuis 2011 au moins) :

box-shadow: 1px 1px 9px #979592 /*inset*/; 

.shadow {   -moz-box-shadow: 5px 5px 5px #ccc;   -webkit-box-shadow: 5px 5px 5px #ccc;   box-shadow: 5px 5px 5px #ccc; }

Le 1er élément indique le placement horizontal de l’ombre (positif à droite, négatif à gauche), le 2nd élément indique le placement vertical de l’ombre (positif en bas, négatif en haut), le 3ème élément est la taille de la surface de l’ombre (plus la taille augmente, plus l’ombre s’étale autour de la balise), le 4ème élément est la couleur et le 5ème (inset) est optionnel et précise qu’on souhaite une ombre interne. Voici deux exemple en images :

.monimage_class { box-shadow: 6px 6px 9px #979592;}

.monimage_class  { inset box-shadow: 6px 6px 9px #979592;}

Il est conseillé de mettre un margin pour séparer bien l’image du contenu autour et mieux apprécier l’ombre. En effet, le box-shadow ne va pas « écarter » les éléments autour dans la page, mais apparaître en fond (il peut donc ne pas être visible si des images sont « collés » unes à unes.

2. HTML/CSS : Rendre une <DIV> entièrement cliquable proprement

L’objectif de ce mini-tutoriel est de rendre possible un bloc (une <div>) entièrement cliquable, pas seulement le texteni l’image intérieur, mais bien toute la surface du bloc.

Dans cet exemple1 la div n'est pas cliquable : 

<div style="width:200px;height:70px;background-color:#ff0000;border:1px solid #999999;text-align:center;"> <a href="https://www.bxnxg.com">BxNxG.com!!</a> </div>

Dans l'exemple2 suivant, la div est cliquable entièrement :

<div style="width:200px;height:70px;background-color:#0036ff;border:1px solid #999999;text-align:center;"> <a style="display:block;width:100%;height:100%;" href="https://www.bxnxg.com">BxNxG.com!!</a> </div>

En appliquant « display:block » une class CSS où comme dans l’exemple 2 un style à la balise <a>, elle devient une balise physique et donc visible en plus de remplir sa fonction propre de redirection. Ainsi avec sa taille de 100% elle est s’étire sur toute la zone de la balise <div>. Un autre astuce dans le cas ou le balise <div> contiendrait plusieurs éléments (images, textes) en plus d’une balise <a> consiste à remonter de position la balise <a>,pour qu’elle soit au dessus des autres :

exemple3 : div cliquable positionnée au dessus des autres : 

<div style="position:relative;width:200px;height:70px;background-color:#2ecf09;border:1px solid #999999;text-align:center;"> <a style="display:block;position:absolute;z-index:100;width:100%;height:100%;" href="https://www.bxnxg.com">BxNxG.com!!</a> <div style=";width:100px;height:30px;background-color:#0036ff;border:1px solid #999999;text-align:center;"> <a href="https://www.bxnxg.com">BxNxG.com!!</a> </div> </div>