Kufanya mistari inayovutia ya kurasa za wavuti na vitambulisho vya HR
Ikiwa unahitaji kuongeza mstari wa usawa, mtindo wa separator kwenye tovuti zako, una chaguo chache. Unaweza kuongeza files halisi ya picha ya mistari hiyo kwenye ukurasa wako, lakini hiyo itahitaji browser yako kurejesha na kupakia faili hizo, ambazo zinaweza kuwa na athari mbaya kwenye utendaji wa tovuti.
Unaweza kutumia mali ya mpaka ya CSS ili kuongeza mipaka inayofanya mstari ama juu au chini ya kipengele, kwa ufanisi kuunda mstari wa separator yako.
Hatimaye, unaweza kutumia kipengele cha HTML kwa utawala usio na usawa -
Mtawala wa Udhibiti wa Horizontal
Ikiwa umewahi kuweka kipengele kwenye ukurasa wa wavuti, huenda umegundua kuwa njia ya msingi ambayo mistari hii huonyeshwa haifai. Hii ina maana kwamba unahitaji kurejea kwa CSS ili kurekebisha kuonekana kwa vipengele hivi kuwa sawa na jinsi unataka tovuti yako kuonekana.
Kitambulisho cha msingi cha HR kinaonyeshwa jinsi njia ya kivinjari inavyotaka kuionyesha. Vivinjari vya kisasa huonyesha vitambulisho vya HR vya unstyled na upana wa 100%, urefu wa 2px, na mpaka wa 3D katika nyeusi ili kuunda mstari.
Hapa ni mfano wa kipengele cha kawaida cha HR au unaweza kuona katika picha hii jinsi HR isiyojumuisha inaonekana katika vivinjari vya kisasa.
Urefu na Urefu ni Zilizozingana Kote kwa Watazamaji
Mitindo tu ambayo ni thabiti katika browsers za wavuti ni upana na mitindo. Hizi zinafafanua jinsi mstari utakuwa mkubwa. Ikiwa hufafanua upana na urefu upana wa default ni 100% na urefu wa default ni 2px.
Katika mfano huu upana ni asilimia 50 ya kipengele cha mzazi (angalia mifano hii chini ya yote ni pamoja na mitindo ya ndani. Katika mazingira ya uzalishaji, mitindo hii ingekuwa kweli imeandikwa kwa karatasi ya nje ya mtindo kwa urahisi wa usimamizi katika maktaba yako yote):
style = "upana: 50%;">
Na katika mfano huu urefu ni 2m:
style = "urefu: 2m;">
Kubadili mipaka inaweza kuwa changamoto
Katika vivinjari vya kisasa, kivinjari hujenga mstari kwa kurekebisha mpaka. Kwa hiyo ukiondoa mpaka na mali ya mtindo, mstari utatoweka kwenye ukurasa. Kama unaweza kuona (vizuri, huwezi kuona chochote, kama mistari itakuwa haionekani) katika mfano huu:
style = "mpaka: hakuna;">
Kurekebisha ukubwa wa rangi, rangi, na mtindo utafanya mstari uoneke tofauti na una athari sawa katika vivinjari vyote vya kisasa. Kwa mfano, katika maandamano haya mpaka huo ni nyekundu, umevunjika, na 1px pana:
style = "mpaka: 1px imeshuka # 000;">
Lakini ikiwa unabadili mpakani na urefu, mitindo inaonekana tofauti kabisa katika vivinjari ambavyo havikuwepo zaidi kuliko ilivyo katika vivinjari vya kisasa. Kama unavyoweza kuona katika mfano huu, ikiwa unaiangalia katika IE7 na chini (kivinjari ambacho kimesimama kwa muda mrefu na haipatikani tena na Microsoft) kuna mstari wa ndani uliowekwa usioonyeshwa kwenye vivinjari vingine (ikiwa ni pamoja na IE8 na juu) :
style = "urefu: 1.5m; upana: 25m; mpaka: 1px imara # 000;">
Vinjari vya zamani vya zamani havijali sana katika kubuni wavuti leo, kwa kuwa kwa kiasi kikubwa wamebadilishwa na chaguzi zaidi za kisasa.
Fanya Line ya Mapambo na Image ya Chanzo
Badala ya rangi, unaweza kufafanua picha ya asili kwa HR yako ili iwezekanavyo kama unavyotaka, lakini bado inaonyesha semantically katika markup yako.
Katika mfano huu tulitumia picha ambayo ni ya mistari mitatu ya wavy. Kwa kuiweka kama picha ya historia bila kurudia tena, inajumuisha mapumziko katika maudhui ambayo inaonekana karibu kama unavyoona katika vitabu:
style = "urefu: 20px; background: #fff url (aa010307.gif) hakuna-kurudia kituo cha kitabu; mpaka: hakuna;">
Kubadilisha Makala ya HR
Kwa CSS3, unaweza pia kufanya mistari yako kuvutia zaidi. Kipengele cha HR ni jadi mstari wa usawa , lakini kwa CSS kubadilisha mali, unaweza kubadilisha jinsi wanavyoangalia. Mabadiliko ya favorite juu ya kipengele cha HR ni kubadilisha mzunguko.
Unaweza kuzungumza kipengele chako cha HR ili iwe mchanganyiko kidogo tu:
hr {
-moz-kubadilisha: mzunguko (10deg);
-babkit-kubadilisha: mzunguko (10deg);
-o-kubadilisha: mzunguko (10deg);
-ms-kubadilisha: mzunguko (10deg);
kubadilisha: mzunguko (10deg);
}
Au unaweza kugeuza ili iwe wima kabisa:
hr {
-moz-kubadilisha: mzunguko (90deg);
-babkit-kubadilisha: mzunguko (90deg);
-o-kubadilisha: mzunguko (90deg);
-ms-kubadilisha: mzunguko (90deg);
kubadilisha: mzunguko (90deg);
}
Kumbuka kwamba hii inazunguka HR kwa eneo la sasa katika hati hiyo, hivyo huenda unahitaji kurekebisha nafasi ili uipate mahali unayotaka. Sio kupendekeza kutumia hii ili kuongeza mistari ya wima kwa kubuni, lakini ni njia ya kupata athari ya kuvutia.
Njia nyingine ya kupata miongozo kwenye ukurasa wako
Jambo moja ambalo watu wengine hufanya badala ya kutumia kipengele cha HR ni kutegemea mipaka ya mambo mengine. Lakini wakati mwingine HR ni rahisi zaidi na rahisi kutumia kuliko kujaribu kuanzisha mipaka. Masuala ya mfano wa sanduku ya browsers fulani yanaweza kuanzisha mpaka hata trickier.