Fer línies de recerca interessants a les pàgines web amb etiquetes HR
Si necessiteu afegir línies horitzontals i d'estil separat als vostres llocs web, teniu algunes opcions. Podeu afegir fitxers d'imatges reals d'aquestes línies a la vostra pàgina, però això requeriria que el vostre navegador recuperés i carregués aquests fitxers, la qual cosa podria tenir un impacte negatiu en el rendiment del lloc.
Podeu utilitzar la propietat de la vora CSS per afegir fronteres que actuen com a línies a la part superior o a la part inferior d'un element, creant efectivament la vostra línia de separació.
Finalment, podeu utilitzar l'element HTML per a la regla horitzontal: el
L'element de la regla horitzontal
Si alguna vegada has posat un element en una pàgina web, probablement descobriu que la manera predeterminada que es mostren aquestes línies no és ideal. Això vol dir que heu de tornar a CSS per ajustar l'aparença visual d'aquests elements per ajustar-se a la manera com voleu que el vostre lloc es vegi.
Una etiqueta HR bàsica es mostra com el navegador vol mostrar-lo. Els navegadors moderns solen mostrar etiquetes HR no dissenyades amb un ample del 100%, una alçada de 2 px i un límit 3D en negre per crear la línia.
Aquí teniu un exemple d'un element HR estàndard o podeu veure en aquesta imatge com es veu un HR sense format en navegadors moderns.
L'amplada i l'alçada són coherents a través dels navegadors
Els únics estils que són coherents entre els navegadors web són l' amplada i els estils. Aquestes defineixen la grandària de la línia. Si no definiu l'amplada i l'alçada, l'amplada predeterminada és del 100% i l'alçada predeterminada és de 2 px.
En aquest exemple, l'amplada és del 50% de l'element primari (tingueu en compte que a continuació, tots els exemples inclouen els estils en línia). En una configuració de producció, aquests estils es redactarien en un full d'estils extern per facilitar la gestió en totes les seves pàgines:
style = "width: 50%;">
I en aquest exemple l'alçada és 2em:
style = "height: 2em;">
Canviar les fronteres pot ser desafiant
En navegadors moderns, el navegador construeix la línia ajustant la vora. Si elimineu la vora amb la propietat d'estil, la línia desapareixerà a la pàgina. Com podeu veure (bé, no veurà res, ja que les línies seran invisibles) en aquest exemple:
style = "border: none;">
L'ajust de la mida, el color i l'estil de la vora us farà que la línia sigui diferent i tingui el mateix efecte en tots els navegadors moderns. Per exemple, en aquesta demostració, la vora és vermella, ratllada i 1px d'ample:
style = "border: 1px broken # 000;">
Però si canvieu la vora i l'alçada, els estils semblen lleugerament diferents en navegadors molt antics que els navegadors moderns. Com podeu veure en aquest exemple, si el visualitzeu a IE7 i a continuació (un navegador que està obsoletament antiquat i que ja no és compatible amb Microsoft), hi ha una línia interna bisellada que no es mostra als altres navegadors (incloent-hi IE8 i cap amunt) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Els navegadors antiquats no són realment una gran preocupació en el disseny web d'avui, ja que s'han substituït en gran mesura per opcions més modernes.
Feu una línia decorativa amb una imatge de fons
En lloc d'un color, podeu definir una imatge de fons per al vostre RH perquè es vegi exactament com voleu, però encara es mostra semànticament al vostre marcat.
En aquest exemple hem utilitzat una imatge de tres línies ondulades. En configurar-la com a imatge de fons sense repetir-la, crea un salt en el contingut que es veu gairebé com es veu als llibres:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat centre de desplaçament; border: none;">
Transformant elements de recursos humans
Amb CSS3, també podeu fer que les vostres línies siguin més interessants. L'element HR és tradicionalment una línia horitzontal , però amb la propietat CSS transformada, podeu canviar la forma en què es veuen. Una transformació favorita en l'element HR és canviar la rotació.
Podeu girar el vostre element HR per tal que sigui només lleugerament en diagonal:
hr {
-moz-transformar: girar (10deg);
-webkit-transformar: rotar (10deg);
-o-transformar: girar (10deg);
-ms-transformar: girar (10deg);
transformar: rotar (10deg);
}
O podeu girar-lo de manera que sigui completament vertical:
hr {
-moz-transformar: girar (90deg);
-webkit-transform: rotar (90deg);
-o-transformar: girar (90deg);
-ms-transformar: girar (90deg);
transformar: rotar (90deg);
}
Recordeu que això fa girar l'HR en funció de la ubicació actual del document, de manera que és possible que necessiteu ajustar el posicionament per obtenir-lo allà on vulgueu. No es recomana utilitzar-lo per afegir línies verticals a un disseny, però és una manera d'obtenir un efecte interessant.
Una altra forma d'obtenir línies a les teves pàgines
Una cosa que algunes persones fan en comptes d'utilitzar l'element de recursos humans és confiar en les fronteres d'altres elements. Però, de vegades, un equip de recursos humans és molt més còmode i fàcil d'utilitzar que intentar establir fronteres. Els problemes del model de caixa d'alguns navegadors poden fer que la configuració d'una frontera sigui més complicada.