Webkit CSS (Bords arrondis, Opacité, Rotation)

WebKit est un projet open source permettant aux développeurs d’améliorer le rendu de page web. C’est une bibliothèque que chaque navigateur interprète à sa façon.

On notera que pour les principaux navigateurs, on ajoutera un préfixe à nos propriétés CSS, à savoir:

  • -moz- pour Firefox (Gecko)
  • -o- pour Opera
  • -webkit- pour Safari et Chrome
  • -ms- pour Internet Explorer

Webkit : Liste de propriété avec exemple

  • Border Radius (Pour arrondir les angles)

    Exemple pour ajouter des bords arrondis sur un div, une images, …

    Bords Arrondis CSS img{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;}


    Ici, les angles sont arrondis avec un « radius » de 10px.

  • Transition avec opacité (Jouer sur l’opacité)

    Comment faire disparaître ou apparaître une image lors du passage de la souris.

    Webkit : Image avec opacité

    img{
    opacity: 1;
    -webkit-transition: opacity 1s linear;}
    img:hover {
    opacity: 0;}


    Ici, la transition se fait en jouant sur l’opacité de l’image.

  • Transition avec rotation (Faire tourner une images, div, …)

    Faire tourner une image en passant la souris.

    Image avec rotation

    img{
    webkit-transform: rotate(0deg);
    -webkit-transition: all 0.5s ease-in-out;}
    img:hover {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 0.5s ease-in-out;}


    Ici, la transition se fait en jouant sur l’opacité de l’image.

Voici quelques liens pratiques pour voir d’autres propriétés.

Générer un QR Code avec l’API Google Chart

Le QR code, c’est bien, c’est pratique ….

C’est quoi un QR Code ?

Un QR Code, c’est comme un code barre classique, sauf qu’il est en 2 dimensions. On peut y mettre du texte, des liens, …

Voici une solution simple pour générer un QR code rapidement grâce à l’API Google Chart.

http://chart.apis.google.com/chart?cht=qr&chs=[HAUTEUR]x[LARGEUR]&chl=[VOTRE_TEXTE/LIENS]

Remplacez:

  • [HAUTEUR] par la hauteur de l’image voulue
  • [LARGEUR] par la largeur de l’image voulue
  • [VOTRE_TEXTE/LIENS]  par du texte ou un lien.

Pour le développeur qui sommeil en vous, il sera simple de faire un petit formulaire qui après avoir rentré un lien/texte, vous générera l’image QR Code correspondante.

Formulaire QR code



QR Code

Codes sources du formulaire ci-dessus:

<form>
<input id="montext" type="text" value="mon texte ou mon lien" />
<button>Créer le QRcode</button>
</form>
<img id="imageQRcode" src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=www.scoco.fr" alt="QR Code" name="imageQRcode" />