Share
CSS est un langage bien connu et largement utilisé pour le style de sites Web. Avec la version trois en préparation, de nombreuses fonctionnalités permettant de gagner du temps seront implémentées. Bien que seuls les navigateurs les plus modernes supportent actuellement ces effets, il est toujours amusant de voir ce qui se passe autour de vous! Dans ce tutoriel, je vais vous montrer cinq techniques.
Avant de commencer avec ce tutoriel, créons le balisage de base sur lequel nous allons travailler tout au long du tutoriel..
Pour notre xHTML, nous aurons besoin des éléments div suivants:
Pour cela, notre xHTML sera:
Une introduction à CSS3; Un tutoriel Nettuts 
Dans notre document HTML, nous avons créé des éléments div, avec les ID indiqués ci-dessus..
Créons rapidement un fichier CSS de base.
body background-color: #fff; #wrapper width: 100%; hauteur: 100%; div width: 300px; hauteur: 300px; marge: 10px; float: gauche; / * le reste du code viendra ici, plus tard * /
Comme vous pouvez le constater, nous avons attribué à toutes les balises div une largeur et une hauteur de 300 pixels chacune. Nous les avons également forcés à flotter à gauche, nous laissant avec une page pleine de divs à jouer avec.
Il peut être fastidieux de créer des coins arrondis. Tout d'abord, vous devez créer les images. Ensuite, vous devez créer plus d'éléments pour que les coins arrondis soient définis comme arrière-plans. Vous connaissez le refrain.
Ce problème peut être facilement résolu avec CSS3, avec la propriété appelée "border-radius".
Nous allons d'abord créer un élément div noir et lui donner une bordure noire.
La frontière est là parce que nous devons "exécuter" le frontière-rayon de propriété.
Nous faisons cela comme ça:
#round background-color: # 000; bordure: 1px solide # 000;
Une fois que vous avez créé la div, actualisez la page. Vous devriez maintenant voir un div noir et carré avec une largeur et une hauteur d'environ 300 px. Maintenant, travaillons sur les coins arrondis. Ceci peut être accompli avec seulement deux lignes de code.
#round background-color: # 000; bordure: 1px solide # 000; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Comme vous pouvez le constater, nous avons ajouté deux lignes presque identiques, la seule différence étant "-moz" et "-webkit". -moz fait référence à Mozilla Firefox, et Safari / Google Chrome utilise le préfixe -webkit.
Actualisez votre document HTML et vous verrez un div arrondi - agréable et lisse. Eh bien, lisse… Dans Firefox et Safari, oui, mais Chrome affiche un bord légèrement pixellisé..
Retour à notre code, "frontière-rayon"nécessite une valeur. Cette valeur détermine la netteté du coin; plus la valeur est grande, plus le coin est arrondi - comme dans Photoshop. À ma connaissance, il n'y a pas de valeur maximale pour cet élément..
Créer des coins arrondis traditionnels peut épuiser votre journée. Heureusement, CSS3 le résout!
Cette propriété est assez similaire à la précédente. Il utilise également "border-radius", cependant nous modifierons légèrement notre code.
Nous le faisons comme ça:
#indie background-color: # 000; bordure: 1px solide # 000; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;
Nous avons ajouté "topright" et "bottomright" à notre code; cela fait référence aux coins supérieur et inférieur droit de l'élément div. Avec ces nouvelles propriétés, vous pouvez facilement implémenter une fonctionnalité de type "onglet".
Les ajouts à utiliser sont "topright", "bottomright", "bottomleft" et "topleft".
Actuellement, vous devez écrire plusieurs lignes de CSS pour ajuster l'opacité des éléments (hacks). Encore une fois, CSS 3 simplifie le processus.
Cette ligne est facile à retenir également, c’est juste "opacity: value;". Facile à droite?
Notre code sera:
#opacity background-color: # 000; opacité: 0,3;
Dans Photoshop, créer des ombres portées est une tâche facile. Cependant, lors de leur implémentation dans vos applications Web, vous voudriez probablement enregistrer l'ombre sous forme d'image, puis l'utiliser comme arrière-plan. Pas plus! (Du moins pour les navigateurs modernes.) Malheureusement, seuls Safari et Chrome prennent actuellement en charge cette fonctionnalité..
Le code ne nécessite qu'une ligne, mais il est assez long et a 4 valeurs différentes!
-webkit-box-shadow: 3px 5px 10px #ccc;
Pour la première valeur, j'ai utilisé 3px. Celui-ci détermine la horizontal distance entre l'ombre portée et l'élément div. En avançant, la deuxième valeur, 5px, détermine la verticale distance entre l'ombre et la boîte.
Pourtant, il existe une autre valeur px, 10px. C’est le rayon de l’ombre - ce qui signifie simplement le flou de l’ombre, ou l’ampleur du dégradé..
Enfin, la dernière valeur détermine la couleur de l'ombre. Cela signifie que l'ombre ne se limite pas aux niveaux de gris; nous pouvons également utiliser le rouge (# f00) comme valeur, ce qui donne une ombre rouge vif.
Pour notre code final, il se résume à ce qui suit:
#shadow background-color: #fff; bordure: 1px solide # 000; -webkit-box-shadow: 3px 5px 10px #ccc;
Comme vous pouvez le voir, j'ai donné à la div un fond blanc, une bordure noire et une ombre gris pâle.
Avec la version la plus récente de CSS, il est possible de redimensionner des éléments. (Cela ne fonctionne actuellement que dans Safari.)
Avec ce code, il est possible de faire apparaître un petit triangle dans le coin inférieur droit d'un élément. Vous pouvez ensuite le faire glisser pour le redimensionner. Le code à suivre est encore une fois très facile, ne nécessite qu'une ligne et est pris en charge par certains éléments plus anciens que vous connaissez peut-être déjà. Ce sont "max-width", "max-height", "min-width" et "min-height".
Le code est comme suit:
#resize background-color: #fff; bordure: 1px solide # 000; redimensionner: les deux; débordement: auto;
Dans le code, j'ai utilisé 2 lignes supplémentaires par rapport à notre CSS normal, "resize: both;" et "débordement: auto;". La ligne avec débordement est nécessaire pour que le redimensionnement fonctionne, il peut s'agir de n'importe quelle valeur de "débordement", tant qu'elle est là.
L'autre ligne que j'ai utilisée est "redimensionner: les deux;". Cette ligne spécifie que l'élément peut être redimensionné à la fois horizontal et verticale directions.
Que devriez-vous prendre de cet article? Dans les prochaines années, votre travail deviendra plus facile, les pages Web se chargeront plus rapidement et vous aurez plus de temps pour votre famille! Bien que vous ne puissiez pas encore compter sur ces effets pour fonctionner dans tous les navigateurs, il n’ya absolument rien de mal à appliquer un angle arrondi à une div dans un navigateur et pas dans l’autre. Considérez cela comme une mise à niveau!
Pour plus d'informations sur CSS3, vous pouvez visiter http://www.css3.info.
Accentsconagua