Assurez CSS 3 travailler dans d'autres navigateurs web
Si vous souhaitez utiliser HTML5 et CSS 3 dans la conception de votre site Web, vous devez savoir que les deux HTML5 et CSS 3 sont encore en cours de développement. La spécification CSS n'a pas encore été approuvé par le W3C, mais de nombreux développeurs de navigateurs ont déjà mis en œuvre certaines parties des projets de travail de CSS 3.
Lorsque les entreprises mettent en œuvre navigateur parties d'un projet de travail ils appellent ça expérimental CSS et ils comprennent généralement le nom du navigateur dans la règle de style.
Pour Safari et Chrome, vous devez ajouter le -webkit préfixe à chaque règle de style. Pour Firefox, ajouter -moz. Pour le navigateur web Opera, ajouter -o. Si vous voulez suivre les recommandations du W3C (même si elles ne sont pas encore approuvés), ne pas ajouter quoi que ce soit au début. Voici un exemple d'une transition et d'une transformation pour chacun de ces quatre options:
Le code pour le navigateur web Safari ressemble à ceci:
-webkit-transition-timing-function: linéaire - webkit-transform: scale (1,5, 2) -
Pour Firefox, voici ce que vous souhaitez utiliser pour créer la même transformation:
-moz-transition-timing-function: linéaire - moz-transform: scale (1,5, 2) -
Dans le navigateur web Opera, voici ce que vous souhaitez utiliser:
-o-transition-timing-function: linéaire - o-transform: scale (1,5, 2) -
La recommandation actuelle du W3C est simplement ceci:
transition-timing-function: transformée linéaire: échelle (1,5, 2) -
Non tous les navigateurs en œuvre des règles expérimentales exactement de la même façon. Par exemple, voici deux règles pour un dégradé linéaire:
-webkit-gradient (linéaire, en haut à gauche, en bas à gauche, à partir de (# 444444), à (# 999999)) - background-image: linear-gradient (top, # 444444, # 999999) -
Comment appliquer l'effet border-radius CSS3 L'effet CSS3 border-radius définit des coins arrondis. Et, vous devez utiliser des préfixes spécifiques au navigateur lors de la définition d'un border-radius. Voici quelques règles pour définir un border-radius:Vous ne pouvez pas appliquer un…
Comment faire la transition avec CSS3 Parlez de puissantes nouvelles fonctionnalités dans des feuilles de style en cascade (CSS): En associant le : hover pseudo-classe avec la propriété de transition CSS3, vous pouvez ajouter des fonctionnalités interactives slicks à vos objets…
Comment arrondir les bords et de créer de multiples colonnes avec CSS3 Au lieu d'avoir à utiliser jusqu'à quatre images distinctes pour donner l'illusion d'une forme incurvée sur votre site web, avec CSS3, vous pouvez maintenant créer des conteneurs avec coins arrondis! Voici le code, qui a la déclaration de CSS3…
Comment transformer des objets avec CSS3 En CSS3, une transformer modifie l'apparence des objets à l'écran d'une manière spécifique. Par exemple, vous pourriez faire pivoter l'objet ou de fausser ses dimensions. Transforme le rendent facile à créer des présentations uniques à…
Comment travailler avec les sélecteurs CSS3 À la mi-2010, les concepteurs et les développeurs Web se réjouissaient que CSS3 a commencé à faire son chemin dans le courant dominant. Depuis ce temps, le soutien de navigateur pour CSS3 a régulièrement augmenté et amélioré, même si CSS3…
Créer des dégradés avec CSS 3 Dégradés sont un effet préféré de graphistes partout parce que les gradients de créer une transition en douceur de la couleur. Ajout des dégradés à l'arrière-plan d'une page Web ou de sections dans une page ajoute richesse et la profondeur…
Conception pour les navigateurs Safari et chrome Safari et Chrome sont des navigateurs WebKit, basé sur le même WebKit déchirerERing moteur, qui contrôle la façon dont le navigateur interprète HTML, CSS et autre code. Tous les navigateurs WebKit suivent les mêmes règles (au moins la…
Afficher un nouveau code de HTML5 dans de nombreux navigateurs Quand vous vous concentrez sur la conception d'un iPhone, iPod touch ou iPad, vous avez l'avantage de savoir que vos visiteurs seront en utilisant le navigateur Web Safari. Il est basé sur le moteur WebKit de présentation, ce qui peut rendre CSS 3…
Comment ajouter des ombres portées aux éléments BOX En plus de l'ombre de texte, CSS 3 vous donne le pouvoir d'ajouter des ombres à la boîte éléments, tels que balises. Dans la figure vous voyez comment les ombres portées ont été utilisés pour mettre en sections, comme le côté, dans cette…
Comment créer des animations avec des images clés Pour créer des effets animés sur votre site Web à afficher sur l'iPad et l'iPhone, vous devez utiliser des images clés. Plus complexe CSS 3 animations comptent sur les images clés. Les images-clés sont les points dans une animation où quelque…
Comment créer des transformations avec CSS 3 CSS 3 vous permet de créer de nombreux effets cool sur votre site pour afficher sur l'iPhone et l'iPad. Les propriétés de transformation CSS 3 vous permettent de transformer un élément pour créer des effets en 2D et 3D. Vous pouvez spécifier…
Comment créer des transitions avec CSS 3 CSS 3 vous donne de nombreuses fonctionnalités intéressantes pour créer des effets sympas dans la conception de votre site Web pour l'affichage sur l'iPad et l'iPhone. Les propriétés CSS 3 de transition permettent de modifier l'état d'un…
Comment économiser de l'espace sur l'écran de l'iPhone Lorsque vous concevez des sites Web pour l'écran relativement petit de l'iPhone, chaque pixel est précieux. Le script présenté ici est conçu pour faire défiler la page vers le bas automatiquement, cacher la barre d'adresse et de vous donner…
Faites votre travail CSS 3 à travers les navigateurs web Si vous concevez votre site Web pour le bureau ainsi que pour l'iPhone et l'iPad, vous pouvez toujours utiliser le CSS expérimentale 3! Finalement, le CSS 3 dans votre site sera probablement pris en charge. L'exemple de cette section vous montre…