Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: Le HTML5 dans les navigateurs : les coins arrondis  (Lu 4972 fois)

Sam Moss

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 201
    • Voir le profil
Le HTML5 dans les navigateurs : les coins arrondis
« le: mars 16, 2012, 16:36:29 pm »

Bonjour,

Je souhaiterais savoir si la propriété « coin arrondi » (border-radius) du html5 est utilisable sur Explorer.
J'ai testé sur du Safari/Chrome et Firefox : ça marche.
   border-radius: (valeur)px;
   -webkit-border-radius: (valeur)px;
   -moz-border-radius: (valeur)px;

Quelle est le script pour être lu dans tous les navigateurs et surtout dans Explorer ?
Faut-il placer le script dans la page html ou sur la feuille de style externe ?
Merci.
IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Le HTML5 dans les navigateurs : les coins arrondis
« Réponse #1 le: mars 16, 2012, 16:45:48 pm »

Bonsoir.

Jette un œil par là ou par là
« Modifié: mars 16, 2012, 16:47:44 pm par Eddy »
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

Sam Moss

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 201
    • Voir le profil
Re : Re : Le HTML5 dans les navigateurs : les coins arrondis
« Réponse #2 le: mars 17, 2012, 10:20:42 am »

IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Le HTML5 dans les navigateurs : les coins arrondis
« Réponse #3 le: mars 17, 2012, 10:34:11 am »

Mets-le en favoris, c'est un site incontournable pour qui souhaite apprendre à faire un bon travail ! Il regorge de tels conseils.
Aussi je me suis procuré un bouquin sur l'approche du HTML5 et CSS3 dont l'auteur est Raphaël Goetter, gérant d'Alsacréations.fr.
Bouquin intéressant pour une transitions entre (x)HTML + CSS vers HTML5 + CSS3
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

Sam Moss

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 201
    • Voir le profil
Re : Re : Le HTML5 dans les navigateurs : les coins arrondis
« Réponse #4 le: mars 18, 2012, 17:16:57 pm »

Mets-le en favoris, c'est un site incontournable pour qui souhaite apprendre à faire un bon travail ! Il regorge de tels conseils.
Aussi je me suis procuré un bouquin sur l'approche du HTML5 et CSS3 dont l'auteur est Raphaël Goetter, gérant d'Alsacréations.fr.
Bouquin intéressant pour une transitions entre (x)HTML + CSS vers HTML5 + CSS3


C'est un site épatant. Je vais me procurer le livre. Merci pour la référence.
J'ai une autre question.
J'ai testé ma page avec un élément à coins arrondis qui marche sur tous les navigateurs mais l'habillage avec une bordure en pointillé n'ai pas reconnu sur Firefox.
Voici le code de la bordure pointillée : border: 4px dashed #FFF;
J'ai ajouté : -moz-border: 4px dashed #FFF;
Sans effet.

Que faire ?
Merci.
IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Le HTML5 dans les navigateurs : les coins arrondis
« Réponse #5 le: mars 19, 2012, 10:51:00 am »

border: 4px dashed #fff; est suffisant, pas besoin de préfixe pour une bordure et je viens de faire un test avec ce code sur FF afin de m'assurer et tout est normal !
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

Sam Moss

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 201
    • Voir le profil
Re : Re : Le HTML5 dans les navigateurs : les coins arrondis
« Réponse #6 le: mars 19, 2012, 17:21:55 pm »

border: 4px dashed #fff; est suffisant, pas besoin de préfixe pour une bordure et je viens de faire un test avec ce code sur FF afin de m'assurer et tout est normal !

Voici le style de mon accroche suivi de deux captures (la première sur Safari 5 et la seconde sur Firefox 11 Mac).

.video {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color: #F00;
text-align: center;
border: 4px dashed #FFF;
border-radius: 125px;
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
behavior: url(../PIE.htc);
-webkit-transform: rotate(340deg);
-moz-transform: rotate(340deg);
-ms-transform: rotate(340deg);
-o-transform: rotate(340deg);
transform: rotate(340deg);
 }

IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail
Re : Le HTML5 dans les navigateurs : les coins arrondis
« Réponse #7 le: mars 19, 2012, 19:34:27 pm »

J'imagine que certains navigateurs appliquent les bordures à l'intérieur des éléments et Firefox à l'extérieur. Pour un test, change la couleur de la bordure en noir afin de la voir partout !

EDIT : Ah non, tu as raison, on dirait que FF n'applique pas de bords à tirets au une div ronde. Comme quoi le HTML5 et CSS3 ne sont pas encore à 100% compris pas tous de la même manière !
Mais là tu te compliques la vie pour pas grand chose, une image comme celle là serait très légère et bien plus accessible pour tous les navigateurs et internautes.
« Modifié: mars 19, 2012, 19:52:41 pm par Eddy »
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.

Nos partenaires

         
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum