Ce tutoriel va prendre un coup d'oeil à certains des nouveaux moyens que vous pouvez manipuler les fonctionnalités de l'interface utilisateur dans CSS3. Mais qu'entendons-nous par "interface utilisateur"?

CSS3 apporte quelques grandes propriétés nouvelles relatives à des éléments de redimensionnement, curseurs, soulignant, mise en boîte et plus encore. Nous nous concentrons sur trois des plus importantes améliorations d'interface utilisateur dans ce tutoriel.

Redimensionnement

La dernière version de Safari dispose d'une fonctionnalité qui permet de zones de texte redimensionnable. Ceci est un grand de plus. CSS3 vous permet de facilement appliquer cela à n'importe quel élément, éventuellement de devenir cross-browser compatible. Le code est resize:both; .

.ui_resizable { 
padding: 20px; 
border: 1px solid; 
resize: both; 
overflow: auto; }

Boîte dimensionnement

Le module "Box model " de CSS3 est une des zones les plus étendues, et une information complète peut être trouvée à la spécification officielle. La boîte de dimensionnement aspect permet de définir certains éléments pour s'adapter à un domaine d'une certaine manière. Par exemple, si vous souhaitez deux côte à côte bordée boîtes, il peut être atteint par la mise au box-sizing "border-box". Cela force le navigateur à rendre la boîte avec la largeur et la hauteur spécifiées, et le lieu de la frontière et un rembourrage intérieur de la boîte.

A l'heure actuelle, les préfixes supplémentaires sont nécessaires pour soutenir ce dans tous les navigateurs - vous pouvez voir la liste complète sur le code de la page par exemple. Voici une possibilité fondamentale:

.area { width: 300px; 
border: 10px solid #ddccb5; 
height: 60px; }

.boxes { box-sizing: border-box; 
width:50%; 
height: 60px; 
text-align: center; 
border: 5px solid #897048; 
padding: 2px; 
float:left; }

Le contour

Définition d'un élément contour est déjà disponible en CSS2, mais CSS3 compenser le contour loin de l'élément - par une valeur que vous définissez. Elle diffère de la bordure de deux façons:

     Les contours ne prend pas de place
     Les contours peuvent être non rectangulaires

Ils peuvent être créés comme suit:

.ui_outline { 
width: 150px; 
padding: 10px; 
height: 70px; 
border: 2px solid black; 
outline: 2px solid #897048; 
outline-offset: 15px; }

En conclusion ...

Ces caractéristiques ne sont pas révolutionnaires et ne sont pas susceptibles de causer un émoi dans la communauté du design. Il ne peut être nié qu'elles sont utiles - en particulier de donner au lecteur la possibilité de redimensionner les éléments.

Le prochain article de cette série sera à la recherche plus en profondeur à un beaucoup plus.