Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

Introduction à la révolution CSS3, utilisation et outils pour s'en servir

Introduction à la révolution CSS3, utilisation et outils pour s'en servir
Publication : Le 30/09/2012 à 21:28:57

Introduction

Css 2 a bien évolué, la version 3 est vraiment utile. Et la bonne nouvelle c'est que l'on peut s'en servir dès maintenant.

Je vais vous parler plus particulièrement de 4 propriété CSS3 qui sont supportées par la plupart des navigateurs (référez-vous au lien compatibilité css3).

Les préfixes

Même si le CSS3 est très bien implanté dans les navigateurs récents, il faut dans certains cas ajouter un préfixe à la propriété CSS afin qu'elle soit "forcée" à être utilisée si elle est disponible.
Google Chrome > -chrome-
Firefox > -moz-
Internet Explorer > -ms-
Opéra > -o-
Safari > -webkit-

Border-radius

De toutes les nouveautés CSS3, border-radius est la plus intéressante (avis purement personnel). Enfin fini les cadres arrondis avec des images !

Rien de plus simple, il suffit d'indiquer la valeur de l'arrondi pour l'ensemble du contenant ou pour chaque angle.
<style>
.arrondis{
border-radius: 5px 10px 20px 40px; 
/* top left, top right, bottom right, bottom left */
}
</style>

Text-shadow et box-shadow

Ces deux propriétés sont idéales pour donner du relief à un texte ou un conteneur via une ombre.

Quatre paramètres sont à donner :
- Le décalage horizontal
- Le décalage vertical
- La force du dégradé
- La couleur du dégradé

Le résultat sur votre navigateur sera bluffant si vous l'utilisez bien. Plus la peine de passer un script jquery ou des images.
Par contre vous ne verrez rien sur IE précédent la version 9... Sauf si vous utilisez un hack avec la notion de filtrer.
<style>
.shadow{
text-shadow:1px 1px 0 #E5E5E5;
box-shadow:5px 5px 0px #000;
}
</style>

Opacity et RGBA

Jouer avec la transparence !

Dans l'attribut opacity vous aurez plus qu'à jouer avec une valeur allant de 0 (invisible) à 1.

RGBA permet de remplacer les valeurs hexadécimales, mais vous pourrez aussi jouer avec de l'opacity directement dans cette commande.

Toujours pour les vieilles versions d'IE un hack est disponible avec filtrer.
<style>
.transparent{
opacity:.85;
color: rgba(50, 50, 50, .5);
}
</style>

Conclusion

Voila pour cette présentation succincte. Beaucoup d'autres attributs valent le détour. Vous pouvez les découvrir avec le lien "CSS3 générator".

Quant au transition, une ressource sera disponible dans le futur

Sur le même thème

Introduction à la révolution CSS3, utilisation et outils pour s'en servir
Publication : Le 30/09/2012 à 21:28:57

Tags

Tag : CSS

Suggestion :

Coder votre CSS avec des variables en utilisant Less

Coder votre CSS avec des variables en utilisant Less