Mountaintop Corners


Original: http://alistapart.com/article/mountaintop

 

par Dan Cederholm 30 Avril, 2004

Publié dans CSS, Design graphique60 Commentaires

Soit je n’ai jamais pris la peine d’essayer des méthodes plus simples pour créer des coins arrondis, ou je n’ai pas peur d’avoir la vue horrible dans à peine cinq à huit ans. Quoiqu’il en soit, l’un de mes petits trucs de création d’images les plus souvent utilisés a à voir avec sommets: vouloir ce coin un peu plus rond? Il suffit d’ajouter un autre pic. Il commencera à faire sens dans un instant.

Figure 1

Considérons la figure 1 A, boîte carrée ennuyeux avec un seul pixel retiré de chaque coin. Lorsqu’on regarde à 100%, l’absence d’un pixel qui crée l’illusion que la boîte est toujours aussi légèrement arrondie. C’est l’une de ces techniques qui a été utilisé depuis TRON était de pointe.
Moins de pixels = plus rond

Vous pouvez prendre l’illusion encore plus si, en supprimant plus de pixels et de créer des «sommets» (et vous pensiez que c’était juste un titre idiot). Jetez un oeil à la figure 2 et vous verrez une vue zoomée d’un coin de la boîte, avec plusieurs pixels retirés pour former un paysage déchiqueté diagonale. Lorsqu’on regarde à 100%, le coin semble bien arrondi.

Figure 2

Pour les fonds plus légers, vous pouvez supprimer encore un peu plus de pixels pour créer un effet encore plus arrondie. En créant une diagonale déchiquetée comme nous l’avions fait précédemment et le retrait d’un pixel supplémentaire à chaque extrémité, nous pouvons lisser le bord un peu (voir la figure 3). Quelque chose avec trois sommets ou plusieurs nécessite généralement ce pixel supplémentaire de l’espace et fonctionne particulièrement bien avec une couleur claire qui se confond avec la page principale arrière-plan.

Figure 3
Pics transparentes

À ce stade, vous pouvez dire «Dan, c’est une technique stupidement simple.” Et il est. Mais la valeur réelle en utilisant l’outil crayon pour raser pixels quand un coin arrondi est souhaitée (en dehors de l’étrange plaisir que vous pourriez recevoir à le faire) est la combinaison de la transparence et CSS pour créer des boîtes et des frontières qui peuvent changer de taille et de couleur.

Parce coins sommet des montagnes utilisent seulement deux couleurs, nous pouvons mettre une de ces couleurs transparentes, laissant les sommets de la même couleur que le fond de page, créant ainsi l’effet arrondi.
Un caméléon souple

Par exemple, prenons une liste de défintion ordinaire (<dl>)  d’articles, et définir une background-image en haut et en bas de la transparence, des coins arrondis. Nous pouvons alors assigner une background-color avec CSS et changer l’apparence de la boîte entière à volonté.

Le balisage sémantique devrait ressembler à ceci:

Mt. Everest
La plus haute montagne du monde.
29.035 pieds

Vous pouvez, bien sûr, utiliser n’importe quelle structure vous le souhaitez, mais la structure de liste de définition nous donne un certain nombre d’éléments agréable le style avec CSS.

Ensuite, nous allons créer une 240 pixels de large image qui va agir comme la partie supérieure de la boîte arrondie. Cette image sera juste assez grand pour le contenir coins supérieurs blancs à chaque extrémité, tandis que le reste sera transparent (où la couleur de fond que nous allons spécifier avec CSS se montrer à travers). La figure 4 montre une version condensée et agrandie de l’image, afin de montrer les détails.

Figure 4 – Zoomed parties de haut l’image

Nous allons aussi créer une seconde image similaire, tournée à la verticale pour les coins arrondis inférieurs. La meilleure façon de le faire dans Photoshop est de choisir Image › Rotate Canvas › Flip Canvas Vertical.

En attribuant l’image du haut comme un arrière-plan <dt> pour l’élément, et l’image de fond de toile de fond pour l’ensemble <dl>, nous avons une boîte arrondie (-de largeur fixe) qui dilate et se contracte en fonction de la quantité de contenu dans – ou si l’utilisateur décide de faire monter la taille du texte.

dl {
  width: 240px;
  margin: 0 0 20px 20px;
  background: #999 url(box_bottom.gif)  »
  no-repeat bottom left;
  }dt {
  margin: 0;
  padding: 10px;
  background: #999 url(box_top.gif)  »
  no-repeat top left;
  }dd {
  margin: 0;
  padding: 10px;
  }

 

Vous remarquerez que j’ai utilisé la méthode raccourci pour spécifier la couleur de l’arrière-plan ainsi que son image à la fois pour  <dl> et <dt> éléments. Vous verrez pourquoi cela a un avantage lorsque nous mélangeons les couleurs plus tard.

Cet exemple illustre la façon dont le CSS ci-dessus définit les images d’arrière-plan sur les deux extrémités de la boîte, tandis que l’attribution d’une couleur d’arrière-plan pour briller à travers les parties transparentes de l’image. J’ai aussi ajouté un peu de style de police et une image de flèche décoratif qui se trouve à la gauche de chaque <dd>.

Essayez d’augmenter la taille du texte de la page d’exemple pour voir comment les boîtes expansion et la contraction avec le texte.
Monter plus haut

Nous pouvons encore amateur en attribuant différentes couleurs de fond à l’ <dl> et  <dt> éléments. Cet exemple montre comment deux différentes border-bottom  avec l’ajout d’un border-bottom blanc pour le <dt>  élément peuvent être atteints de la même balisage et images.

 

 

En outre, nous ne sommes pas limités à des formes arrondies juste. Tant que nous nous en tenons à créer des GIFs deux couleurs, nous pouvons ajouter n’importe quelle forme nous aimerions les images de fond qui flanquent la boîte. Ce dernier exemple montre comment une image de remplacement est utilisé pour le fond de la boîte, avec l’ajout d’un sommet de la montagne silhouette blanc (voir figure 5).

Figure 5 – image du bas suppléant (zoom) avec la silhouette de la montagne

En concertation a également № 179
Qu’est-ce que l’accessibilité du Web?

Résumé

Parce que de fbackground-image ond d’un élément se trouve au sommet de son background-color, nous pouvons utiliser des images GIF transparentes qui créent l’illusion de coins et bords arrondis ou en forme. En gardant ces graphiques décoratifs dans CSS, nous pouvons réaliser des récipients souples qui peuvent changer de couleur avec la mise à jour d’une seule règle de CSS. Bonne randonnée.

 

Comments are closed.