Il s'agit de la deuxième partie d'une série en trois parties. Aujourd'hui, nous allons couvrir l' attribut Border . Le premier article était sur le fond d'attribut et le dernier article sera sur la police des attributs alors restez à l'écoute et vous abonner. La première partie de cette série CSS est lié ci-dessous.
Un peu d'histoire sur l'attribut border
Frontières autrefois ces choses laides gris qui entouraient éléments tels que les tables et cadres, mais maintenant avec les CSS sont un outil très puissant pour les concepteurs.
Vue d'ensemble
Il ya 3 propriétés disponibles dans CSS2 relatives à l'attribut border.
- border-color: Définit la couleur réelle de la frontière
- border-style: Définit le style de la bordure
- border-width: Définit l'épaisseur de la frontière seront
L'utilisation des propriétés de base
Couleur de la bordure
Le border-color propriété définit une couleur spécifique pour la frontière de l'élément choisi. Voici quelques exemples de ce que cette propriété peut ressembler.
1
2
3
4
| border-color : # 999 ;border-color : rgb ( 100 , 200 , 200 );border-color : red ;border-color : transparent ; |
Styles de bordure
Le border-style définit le style de la propriété de la frontière sur l'élément spécifié à n'importe quelle valeur il est donné.
1
2
3
4
5
6
7
8
9
10
| border-style : dotted ;border-style : en pointillé ;border-style : solide ;border-style : deux ;border-style : groove ;border-style : crête ;border-style : inset ;border-style : entrée de jeu ;border-style : aucune ;border-style : caché ; |
Largeur de la bordure
Le border-width propriété détermine l'épaisseur de la bordure sur un élément donné.
1
2
3
4
| frontière : 3px solide # 64c8c8 ;Border :. 5em solide # 64c8c8 ;frontière : mince solide # 64c8c8 ;frontière : 10pt solide # 64c8c8 ; |
Accélérer le processus avec la main courte
Ce petit morceau de code est un bijou, vous voudrez peut-être prendre des notes sur celui-ci. Celui-ci combine les trois propriétés de bordure en un seul pour une productivité accrue.
1
2
| frontière : (largeur) (style) (couleur);frontière : 1px solide # 999 ; |
Exemples d'utilisation de grands frontière
Première Kammeradvokaten
Ce site utilise un mélange de typographie et les frontières pour apporter un regard véritablement efficace simpliste. Les frontières agissent comme organisateurs pour le contenu. Très bien fait.
2. Ouvrez
C'est aussi un autre bel exemple de l'attribut border. Ouvrir les frontières a utilisé essentiellement pour la section de chaque élément de contenu. Tout est bien aligné et ils ont utilisé plusieurs styles de frontières.
Mon défi pour vous
Lorsque vous concevez que le nouveau portefeuille ou d'un site pour un client, vous pousser à intégrer dans la conception des frontières. Il ne sera pas seulement un défi pour bien le faire, mais vous en tant que designer bénéficieront de ramification de la norme. Si vous ne compléter ce défi ou avoir complété ce défi s'il vous plaît laissez un lien dans un commentaire afin que nos lecteurs puissent les consulter!
Aucun commentaire:
Enregistrer un commentaire