X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Accès Premium gratuitement

Accédez à notre bibliothèque complète des articles Hub Premium, les fichiers projet et les premiers 10% de chaque Cours-vidéo de la Bibliothèque Didacticiel en ligne .

Créez votre compte gratuit!

Création coins arrondis sur Objets mise en CSS3
Traduit par Google Translate

Si vous n'avez pas fait beaucoup de lecture encore levé sur ce qui est nouveau dans CSS3 , c'est assez impressionnant. Il ya toutes sortes de possibilités nouvellement introduites, notamment des dégradés, des colonnes multiples, les images des frontières, et que nous allons parler un coup d'oeil ici, rayon de la frontière,. Rayon des frontières nous permet de mettre des coins arrondis sur les autres objets rectangulaires dans nos mises en page Web.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

Etape 1 - Appliquer un rayon de CSS3 Border

Tout d'abord, nous allons appliquer le rayon frontière. Dans votre feuille de style, trouver la règle que vous souhaitez appliquer l'effet de coin arrondi à. Souvent, ce sera un sélecteur d'ID qui contrôle un élément div. Assurez-vous aussi que vous êtes également appliquer une couleur de fond ou une bordure (ou deux) de sorte que vous pouvez voir les coins!

Ensuite, ajoutez le "rayon de la frontière" propriété pour votre règle, suivie par une valeur. Plus la valeur que vous utilisez, plus arrondi du coin.

Ici, je suis d'appliquer le rayon frontière pour mon # contenu sélecteur d'ID, qui est le contrôle de la div qui détient contenu de ma page, comme vous pouvez le voir dans la capture d'écran inclus. Assurez-vous d'enregistrer votre travail et vérifier votre travail dans votre navigateur.

Si vous obtenez toujours 90 degrés, alors votre navigateur est celui qui ne prend pas en charge cette fonctionnalité. Mais ne mettez pas les choses dans l'instant. Nous allons vérifier que le truc cool je l'ai mentionné plus tôt.

Étape 2 - Assurer l'effet de coin arrondi Travaux

Comme mentionné précédemment, seules les dernières versions des navigateurs populaires de soutien de propriété CSS3 la frontière rayon. Alors, comment pouvez-vous vous assurer que votre configuration fonctionne pour les utilisateurs qui utilisent encore les navigateurs qui sont une version ou deux de retard? Vous pouvez utiliser du code supplémentaire, comme suit.

Tout d'abord, nous allons ajouter dans "-moz-border-radius:" suivi par une valeur de rayon. Cette cible ce qui est appelé les navigateurs Gecko - notamment FireFox.

Ensuite, nous allons ajouter dans "-webkit-border-radius:" suivi par la même valeur que nous avons utilisé ci-dessus. Ça va frapper tous les navigateurs basé sur WebKit, comme Chrome et Safari. Une fois ajouté, enregistrez votre travail et rafraîchissez votre navigateur.

Étape 3 - L'exception confirme la règle

Maintenant ce que sur Internet Explorer, le navigateur préféré tous les web designer (sic), demandez-vous? Eh bien, toutes les options ci-dessus ne fonctionnera pas. En fait, le code que nous avons ajouté à ce point sera tout simplement ignoré par Explorer, et les coins seront simplement rendre à leur défaut de 90 degrés de style, qui est mieux que d'avoir le casser, non?! Il est possible de retirer des coins arrondis dans IE, mais sachez que c'est un peu de travail supplémentaire, et peut-être que c'est quelque chose que nous pourrions entrer dans une pointe de l'avenir. Pour le moment, cependant, profitez de votre coins arrondis dans tous les autres navigateurs!

CSS est merveilleux. Découvrez plus sur la conception flottante mises en page CSS .


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link