CSS 3 + HTML 5 sont l'avenir du Web. Ils ne sont pas encore officiellement arrivés, bien que de nombreux navigateurs aient commencé à les prendre en charge partiellement. Cet article présente 5 techniques CSS3 qui peuvent vous aider à réaliser l'avenir du Web. Actuellement, ces techniques ne doivent pas être utilisées sur des projets clients formels ; elles sont plus adaptées à votre site de blog personnel, à la communauté de conception Web ou aux situations dans lesquelles aucun client ne se plaindra de vous.
1. Effet coins arrondis
L'une des nouvelles fonctionnalités les plus couramment utilisées de CSS3 est l'effet de coin arrondi. L'objet carré HTML standard a des coins carrés à 90 degrés qui peuvent vous aider à obtenir des coins arrondis.
-moz-border-radius : 20px;
-webkit-border-radius : 20px;
border-radius : 20px;
Même un seul coin peut être arrondi, mais la syntaxe de Mozilla et de Webkit est légèrement différente.
-moz-border-radius-topleft : 20px ;
-moz-border
-radius-topright
:20px
; -moz-border-radius-bottomleft : 10px ;
-rightright-radius : 20px ;
-webkit-border-top-left-radius : 20px ;
-webkit-border-bottom-left-radius : 10px
; -webkit-border-bottom-rightright-radius : 10px
; Firefox, Safari, Chrome
2. Bordures graphiques
Comme son nom l'indique, la bordure graphique est la bordure qui permet d'utiliser des images comme objets. La syntaxe est la suivante :
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png). ) 5 répéter;
-moz-border- image: url(/images/border-image.png) 5 répéter;
border-image: url(/images/border-image.png) 5 répéter
Ici, border: 5px définit le largeur de la bordure, puis chaque La définition de l'image de bordure indique au navigateur la quantité d'image à utiliser comme bordure. L'image de bordure peut également être définie individuellement pour chaque bord :
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border- top -rightright-image
border-right-image
navigateurs pris en charge : Firefox 3.1, Safari, Chrome
3. Bloquer l'ombre et l'ombre du texte.
de
Photoshop. Il existe déjà des sites Web utilisant cette fonctionnalité, comme le site Web 24 Ways.
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
Les deux premières propriétés définissent le déplacement X/Y de l'ombre, ici elles sont de 10px, et la troisième propriété définit le flou de le Degré de l'ombre, le dernier définit la couleur de l'ombre. L'ombre du texte peut également être définie comme ceci :
text-shadow : 2px 2px 5px #ccc ;
Navigateurs pris en charge : Firefox 3.1, Safari, Chrome (prend uniquement en charge l'ombre de la boîte), Opera (prend uniquement en charge l'ombre du texte). vert La dernière valeur des trois couleurs bleues représente la transparence. De plus, nous pouvons également utiliser l'opacité pour obtenir de la transparence (actuellement, cette technique est principalement utilisée pour les effets de caisson lumineux - Traducteur)
4. Utilisez RGBA pour obtenir des effets de transparence.
À l'heure actuelle, l'effet de transparence dans la conception Web est principalement obtenu par les images PNG (mais il n'est pas bien pris en charge dans le navigateur IE - traducteur). En CSS3, l'effet de transparence peut être directement obtenu.
rgba(200, 54, 54, 0.5) ;
arrière-plan : rgba(200, 54, 54, 0.5) ;
couleur
: rgba(200, 54, 54, 0.5) ;
couleur : #000 ;
opacité : 0.5 ;
, Safari, Chrome, Opera (opacité) et IE7 (opacité, avec correctifs).
5. Utilisez @Font-Face pour implémenter des polices personnalisées.
Il existe plusieurs polices relativement sûres dans la conception Web, telles que Arial, Helvetica, Verdana, Georgia et Comic Sans (le chinois, de manière générale, Song Dynasty est le seul à être sûr - le traducteur utilise désormais @font-face de CSS3). puis-je spécifier les polices moi-même, mais en raison de problèmes de droits d'auteur, les polices réelles pouvant être utilisées sont limitées (de plus, les énormes polices chinoises sont également un problème difficile à résoudre - traducteur).
La syntaxe est la suivante :
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
Navigateurs
pris en charge : Firefox 3.1, Safari, Opera 10 et IE7 (cela demande quelques ennuis, si vous n'avez pas peur des ennuis, vous pouvez implémenter cette fonction dans IE, veuillez vous référer à : faire fonctionner la police dans IE)
Bien que CSS3 soit encore en développement, ces fonctions mentionnées ci-dessus sont déjà disponibles dans certains navigateurs Utilisé, notamment Safari. Malheureusement, Safari n'est pas un navigateur grand public.
Firefox dispose actuellement d'une large base d'utilisateurs. De plus, la prochaine version de Firefox 3.1 prend en charge de nombreux effets CSS3. Les utilisateurs de Firefox étant très motivés à mettre à niveau, de nombreux utilisateurs peuvent découvrir les nouvelles fonctionnalités de CSS3 à l'avance.
Google Chrome vient de sortir cette année. Il est basé sur le moteur Webkit, il est donc très similaire à Safari. Étant donné que Safari est principalement utilisé sur le marché Mac, Chrome peut simplement combler le vide sur le marché Windows.
Selon les statistiques, en novembre 2008, 44,2 % des utilisateurs utilisaient Firefox, 3,1 % utilisaient Chrome et 2,7 % utilisaient Safari, ce qui signifie que certaines fonctions de CSS3 peuvent déjà prendre en charge près de la moitié des utilisateurs Internet dans le cercle du design Web. la proportion peut être plus élevée, environ 73,6 % (données fournies par Blog.SpoonGraphics)
6. Facteurs négatifs
Les fonctionnalités CSS3 décrites ci-dessus apporteront d'excellents résultats à votre site Web, mais il y a quand même quelques facteurs négatifs qui doivent être pris en compte :
Internet Explorer : 46 % de Internet ne peut pas voir ces effets, alors n'utilisez pas ces éléments pour des conceptions importantes. Assurez-vous également que lorsque ces effets ne fonctionnent pas, des conceptions alternatives sont disponibles.
Problèmes de validation CSS : ces fonctionnalités CSS3 ne constituent pas la version finale. Actuellement, différents navigateurs utilisent différentes balises pour implémenter ces fonctionnalités, ce qui peut entraîner des problèmes de validation pour votre feuille de style.
Code gonflé : étant donné que les différents navigateurs utilisent une syntaxe de définition différente, votre code CSS finira par devenir très volumineux.
Utilisation inappropriée : une utilisation inappropriée de ces effets peut entraîner des conséquences néfastes, en particulier pour les effets d'ombre.
Source internationale de cet article : http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
Source de la traduction chinoise : site officiel de COMSHARP CMS (35 km traduction )