Les Tutoriaux

Jeudi 13 septembre 2012

Avec l'iPhone 5 et les mises à jour d'iPod, Apple se repose sur ses acquis

Page 1 sur 2

  • 16/09
  • 2010
  • 14h26

CSS 3 : box-shadow Difficulté : Intermédiaire

  • Auteur : iNaphrayoo

La propriété box-shadow permet d'afficher une ou plusieurs ombres portées sous un éléments html. C'est un des styles les plus simples à mettre en place et posant le moins de soucis en terme de compatibilité navigateur.

La syntaxe box-shadow est compatible avec les moteurs de navigateur WebKit (Safari et Chrome), Gecko (Mozilla Firefox) et Presto (Opéra). Les différentes valeurs indiquent le décalage vertical et horizontal, l'étendue du dégradé et la couleur.

Tout comme la propriété border-radius, il faut cibler le moteur pour afficher l'effet :
Pour WebKit : -webkit-box-shadow
Pour Gecko : -moz-box-shadow
Pour les autres moteurs et certainement la spécification validée : box-shadow

La première valeur permet de faire varier le décalage horizontal :
-webkit-box-shadow: 0px 10px 10px #063;

box-shadow
La deuxième, le décalage vertical :
-webkit-box-shadow: 0px 10px 10px #063;

box-shadow
La troisième valeur permet la variation de l'étendu du dégradé de l'ombre :
-webkit-box-shadow: 0px 10px 10px #063;

box-shadow
La dernière valeur concerne la couleur et s'indique en code hexadécimal ou RVBa :
-webkit-box-shadow: 0px 10px 10px #063;

box-shadow

Pour aller plus loin, il est possible de combiner plusieurs ombres portées en séparent toutes leurs valeurs par des virgules. Voici le code de l'effet suivant :
-webkit-box-shadow: 0px 20px 50px #063, 20px 5px 50px #C60, -10px -10px 50px #09C;

box-shadow

Sur un navigateur n'étant pas capable d'afficher cet effet (IE6/7/8), vous n'aurez aucun problème tant que vous ne jouerez pas avec les marges. De même les bordures ou autres rajouts de styles donnant un effet intéressant avec une ombre-portée, ne donneront pas forcément le même effet sans ombre portée.

Maintenant que vous avez les bases, c'est à vous de jouer.

  • Cet article est rattaché aux tags :
  • CSS,
  • Tutoriaux,
  • Web
  • 16/09
  • 2010
  • 11h56

CSS 3 : border-radius Difficulté : Intermédiaire

  • Auteur : iNaphrayoo

La propriété border-radius permet d'arrondir les coins d'un élément de votre page. Faisant partie de CSS 3 encore à l'état de brouillon, elle est compatible avec les navigateurs basés sur les moteurs WebKit (Safari ou Chrome), Gecko (Mozilla Firefox) et Explorer 9.

Traditionnellement, la création de bords arrondis pour une interface web s'effectue avec des images. Ces dernières étant affichées dans des conteneurs imbriqués. Plusieurs techniques plus ou moins lourdes existent et ce afin d'afficher la même interface quelques soit le navigateur.

En pratique : La propriété border-radius peut accepter plusieurs valeurs, le problème actuel étant que sa syntaxe peut être différente en fonction du moteur de navigateur devant afficher la propriété.

Pour WebKit : -webkit-border-radius
Pour (Gecko) Mozilla : -moz-border-radius
La syntaxe devant être retenue : border-radius

Il est possible de cibler un coin, par exemple en haut à gauche. Attention : dans ce cas, la syntaxe s'écrit différemment pour WebKit et Mozilla :
- Pour un coin arrondi en haut à gauche pour Webkit : -webkit-border-top-left-radius
- Pour un coin arrondi en haut à gauche pour Gecko : -moz-border-radius-topleft

Pour éviter les différences de syntaxe, l'astuce consiste à enchainer les valeurs. Un conteneur ne pouvant avoir plus de 4 coins, les 4 valeurs se succèderont dans le sens des aiguilles d'une montre :
- Pour un coin arrondi en bas à droite pour WebKit : -webkit-border-radius: 0px 0px 10px 0px;
- Pour un coin arrondi en bas à droite pour Gecko : -moz-border-radius: 0px 0px 10px 0px;

border-radius sur Safari

Pour aller plus loin on peut également associer deux courbures d'angle. Dans ce cas, il faut travailler sur un seul coin et lui attribuer deux valeurs qui auront pour effet de mêler les deux courbures horizontale et verticale. Un exemple avec la syntaxe :
border-top-left-radius: 100px 50px;

16092010-114719.png
Les incompatibilités sont comme d'habitude avec IE6/7/8. Ces derniers afficheront des coins à angles droits. La version 9 d'Explorer affiche quelques propriétés CSS 3, chose que je n'ai pas encore testé.

L'utilisation de ce type de propriété oblige à faire attention aux marges et à tous les autres rajouts, ombres-portées, bordures... L'essentiel étant de vérifier le résultat sur plusieurs navigateurs pour éviter les mauvaises surprises.

  • Cet article est rattaché aux tags :
  • CSS,
  • Tutoriaux,
  • Web

En tant que developer ou designer utilisant Flash, il existe des règles simples d’optimisation permettant d’améliorer les performances et optimiser les ressources utilisées par une application.

Retrouvez Stéphane Baril, expert Design et Thibault Imbert, expert Web chez Adobe pour une série d'émissions vous proposant des trucs et astuces pratiques à utiliser en production, pour gagner du temps au quotidien.

  • Cet article est rattaché aux tags :
  • Tutoriaux

Pour tout ceux qui veulent soigner leur interface sur iPhone 4 doté de la technologie Retina Display, le blog Teehanlax propose les éléments graphiques de iOS au format rétina display.

iPhone 4 GUI (Retina Display)
Le fichier est relativement grand et lourd : 62,7 Mo pour une dimension de 4074x2986 pixels. Le travail en taille réelle est déroutant, tout semble beaucoup trop grand. Posez votre interface en 50% ou 25% puis passer en 100% pour ajuster les détails. Encore plus qu'avant il faudra tester l'interface sur l'appareil pour mieux se rendre compte du travail effectué.

- Télécharger iPhone 4 GUI PSD (Retina Display)
- Guide de l'interface utilisateur d'iOS pour iPhone

  • Cet article est rattaché aux tags :
  • Design,
  • iOS,
  • iPhone
  • 31/08
  • 2010
  • 07h11

PSD : Android GUI Difficulté : Intermédiaire

  • Auteur : iNaphrayoo

Android GUI PSD rassemble les éléments graphiques de l'interface d'Andoid. Le fichier est open-source et est destiné à tous ceux qui créent ou étudient sur les interfaces mobiles Android. Le fichier PSD est constitué de formes vectorielles. Merci à Pavel Maček.

Android GUI

- Télécharger Android GUI PSD v1.0
- Guide de l'interface utilisateur d'Android

  • Cet article est rattaché aux tags :
  • Design,
  • Google
  • 24/06
  • 2010
  • 17h06

3 extensions pour Safari 5 Difficulté : Novice

  • Auteur : iNaphrayoo

En attendant qu'Apple créé sa page d'extensions pour Safari 5, voici une petite sélection d'extensions intéressantes :

L'extention Validator permet de vérifier la validité W3C de votre code HTML, CSS et RSS.
Extention Safari 5 : Validator
Beaucoup de créateurs web utilisent déjà l'extention Webdeveloper pour Firefox qui dispose entre autre de cet outil. Bien qu'encore limité, Validator offre une visibilité directe de la validité W3C de votre code dans la barre d'outils de Safari.
Installer Validator pour Safari 5


Gmail Checker est une extention qui permet de rester au courant du nombre d'e-mails reçus sur son compte Gmail.
21062010-120545.png
L'icône indique le nombre de messages non lus. Survolez l'icône de Gmail Checker pour voir vos derniers messages reçus.
Installer Gmail Checker pour Safari 5


L'extension Safari Tab Reloader permet de rafraîchir automatique une page en cours.
21062010-122247.png
Très pratique pour les concepteurs web, Safari Tab Reloader affiche juste au dessus de l'onglet actif, le temps au bout duquel la page devra se rafraîchir automatiquement.
Installer Safari Tab Reloader pour Safari 5

  • Cet article est rattaché aux tags :
  • Safari

La nouvelle fonction "Lecteur" de Safari est une merveille et permet de gagner du temps en efficacité de lecture, surtout sur les longs articles.

Mais le bouton "Lecteur" s'affiche à la place du bouton RSS. Un clique long sur le bouton "Lecteur" permet, au bout de quelques secondes, d'afficher les flux RSS disponibles sur la page en cours.

Il fallait juste le savoir.

  • Cet article est rattaché aux tags :
  • Safari

13062010-143757.pngMail vous propose des adresses mails périmées ? Pas de panique, nous avons la solution !

En effet, Mail est très intelligent. Quand vous écrivez un mail et saisissez le début du nom d'une personne dans le champ d'adresse, il vous propose une liste d'adresses. Ceci est très pratique, à condition que les adresses proposées soient vraiment pertinentes :

13062010-143816.jpg

Il arrive donc de temps en temps qu'une personne change d'adresse mail. Si elle est assez gentille, elle vous préviendra. Pour supprimer cette adresse mail périmée de la liste de proposition, il vous suffit de :

- Supprimer l'adresse de votre carnet d'adresses
- Créer un nouveau mail, entrer l'adresse en question, faire un clique droit dessus (ou cliquez sur le petit triangle blanc qui apparaît), et sélectionner la ligne : Supprimer de la liste Destinataires précédents. (La description n'est pas géniale, encore un petit bug qui traîne et qu'Apple n'a pas corrigé).

13062010-143838.jpg

Et voilà, la prochaine fois que vous mettrez le nom de cette personne dans la barre d'adresse, Mail ne vous proposera plus l'adresse mail périmée !

  • Cet article est rattaché aux tags :
  • Apple,
  • Tutoriaux

Page 1 sur 2

Retour en haut
Copyright © 2005-2014 PomGraphik. Tous droits réservés.