સ્ટિલિંગ ધ એચઆર (હોરિઝોન્ટલ રૂલ) ટેગ

એચઆર ટેગ સાથેના વેબપૃષ્ઠો પર રસપ્રદ દેખાતી લીટીઓ બનાવવી

જો તમને તમારી વેબસાઇટ્સ પર આડી, વિભાજક-શૈલીની રેખાઓ ઉમેરવાની જરૂર હોય, તો તમારી પાસે થોડા વિકલ્પો છે. તમે તમારા પૃષ્ઠ પર તે રેખાઓની વાસ્તવિક છબી ફાઇલો ઉમેરી શકો છો, પરંતુ તે તમારા બ્રાઉઝરને તે ફાઇલોને પુનઃપ્રાપ્ત કરવાની અને લોડ કરવાની જરૂર છે, જે સાઇટ પ્રદર્શન પર નકારાત્મક અસર કરી શકે છે.

તમે સરહદો ઉમેરવા માટે સીએસએસ સરહદની પ્રોપટટનો ઉપયોગ કરી શકો છો જે કાં તો એક અથવા તત્વના તળિયે લીટીઓ તરીકે કાર્ય કરે છે, અસરકારક રીતે તમારા વિભાજક રેખાને બનાવી રહ્યા છે.

છેલ્લે, તમે આડી નિયમ માટે HTML ઘટકનો ઉપયોગ કરી શકો છો -

આડું નિયમ એલિમેન્ટ

જો તમે વેબપેજ પર ક્યારેય કોઈ તત્વ મૂકી દીધું હોય, તો તમને સંભવ છે કે આ લીટીઓ પ્રદર્શિત થતી ડિફોલ્ટ રીત આદર્શ નથી. આનો અર્થ એ કે તમારે તમારી સાઇટને કેવી રીતે જોવાની જરૂર છે તેના આધારે આ તત્વોના દ્રશ્ય દેખાવને સમાયોજિત કરવા માટે CSS પર ચાલુ થવાની જરૂર છે.

એક મૂળભૂત એચઆર ટૅગ બ્રાઉઝરને પ્રદર્શિત કરવાના માર્ગને પ્રદર્શિત કરે છે. આધુનિક બ્રાઉઝર્સમાં સામાન્ય રીતે 100% ની પહોળાઈ, 2px ની ઊંચાઇ, અને લીટી બનાવવા માટે કાળામાં એક 3D સરહદ સાથે અસ્થિર એચઆર ટેગ્સ પ્રદર્શિત થાય છે.

અહીં એક સ્ટાન્ડર્ડ એચઆર એલિમેન્ટનું ઉદાહરણ છે અથવા તમે આ છબીમાં જોઈ શકો છો કે કેવી રીતે અસ્થિર એચઆર આધુનિક બ્રાઉઝર્સમાં દેખાય છે.

પહોળાઈ અને ઊંચાઈ સુસંગત બ્રાઉઝર્સમાં છે

વેબ બ્રાઉઝર્સમાં સુસંગત રહેલી એકમાત્ર શૈલી એ પહોળાઈ અને શૈલીઓ છે. આ વ્યાખ્યાયિત કરે છે કે રેખા કેટલી મોટી હશે. જો તમે પહોળાઈ અને ઊંચાઈ વ્યાખ્યાયિત ન કરો તો ડિફોલ્ટ પહોળાઈ 100% છે અને ડિફોલ્ટ ઊંચાઇ 2px છે.

આ ઉદાહરણમાં, પહોળાઇ પિતૃ તત્વના 50% છે (નોંધ કરો કે આ બધા ઉદાહરણોમાં નીચેનાનો સમાવેશ થાય છે ઇનલાઇન શૈલીઓ. પ્રોડક્શન સેટિંગમાં, આ શૈલીઓ વાસ્તવમાં તમારા તમામ પૃષ્ઠોમાં મેનેજમેન્ટની સરળતા માટે બાહ્ય સ્ટાઇલ શીટમાં લખવામાં આવશે):

શૈલી = "પહોળાઈ: 50%;">

અને આ ઉદાહરણમાં ઊંચાઇ 2em છે:

શૈલી = "ઊંચાઇ: 2em;">

બોર્ડર્સને બદલવું ચેલેન્જીંગ કરી શકાય છે

આધુનિક બ્રાઉઝર્સમાં, બ્રાઉઝર સરહદને ગોઠવીને રેખા બનાવે છે. તેથી જો તમે સ્ટાઇલ પ્રોપર્ટી સાથે સરહદ દૂર કરો છો, તો લીટી પૃષ્ઠ પર અદૃશ્ય થઈ જશે. જેમ તમે આ ઉદાહરણમાં જોઈ શકો છો (સારું, તમે કંઈપણ જોશો નહીં, કારણ કે લીટીઓ અદ્રશ્ય હશે):

શૈલી = "સરહદ: કંઈ નહીં;">

સરહદ કદ, રંગ અને શૈલીને સમાયોજિત કરવું લીટી અલગ દેખાશે અને તે તમામ આધુનિક બ્રાઉઝર્સમાં સમાન અસર કરશે. ઉદાહરણ તરીકે, આ પ્રદર્શનમાં સરહદ લાલ, ડૅશ અને 1 પીએક્સ વિશાળ છે:

શૈલી = "સરહદ: 1 પૅક્સ ડૅશ # 000;">

પરંતુ જો તમે સરહદ અને ઉંચાઈને બદલી દો છો, તો શૈલીઓ આધુનિક બ્રાઉઝર્સમાં કરતા તે ખૂબ જૂના બ્રાઉઝર્સમાં સહેજ અલગ દેખાય છે. જેમ તમે આ ઉદાહરણમાં જોઈ શકો છો, જો તમે તેને આઇ 7 અને તેનાથી નીચે જુઓ છો (એક બ્રાઉઝર જે માઇક્રોસોફ્ટ દ્વારા લાંબા સમય સુધી જૂના અને લાંબા સમય સુધી આધારભૂત નથી) ત્યાં એક ખૂણિયા આંતરિક રેખા છે જે અન્ય બ્રાઉઝર્સ (IE8 અને અપ સહિત) માં પ્રદર્શિત થતી નથી. :

શૈલી = "ઊંચાઇ: 1.5 મીમી, પહોળાઈ: 25 મીમી; સરહદ: 1 પીએક્સ ઘન # 000;">

તે પ્રાચીન બ્રાઉઝર્સ ખરેખર વેબ ડીઝાઇનમાં ખરેખર ખૂબ જ ચિંતાજનક નથી, કેમ કે તેઓ મોટેભાગે વધુ આધુનિક વિકલ્પો સાથે બદલાયા છે.

પૃષ્ઠભૂમિ છબી સાથે શણગારાત્મક રેખા બનાવો

રંગને બદલે, તમે તમારા એચઆર માટે બેકગ્રાઉન્ડ છબીને વ્યાખ્યાયિત કરી શકો છો જેથી તે બરાબર તમને જોઈતા હોય તેવું લાગે છે, પરંતુ હજી પણ તમારા માર્કઅપમાં અર્થનિર્દેશક દર્શાવે છે.

આ ઉદાહરણમાં આપણે એક છબીનો ઉપયોગ કર્યો છે જે ત્રણ હલકી રેખાઓ છે. તેને કોઈ પુનરાવર્તન સાથે બેકગ્રાઉન્ડ છબી તરીકે સેટ કરીને, તે સામગ્રીમાં એક વિરામ બનાવે છે જે તમે પુસ્તકોમાં જેવો દેખાય છે તેવો લાગે છે:

શૈલી = "ઉંચાઈ: 20px; પૃષ્ઠભૂમિ: #fff url (aa010307.gif) નો-પુનરાવર્ત સ્ક્રોલ કેન્દ્ર; સરહદ: કંઈ;">

એચઆર તત્વો ટ્રાન્સફોર્મિંગ

CSS3 સાથે, તમે તમારી લાઇન વધુ રસપ્રદ બનાવી શકો છો. એચઆર એલિમેન્ટ પરંપરાગત રીતે આડી રેખા છે, પરંતુ CSS ટ્રાન્સફોર્મ પ્રોપર્ટી સાથે, તમે તે કેવી રીતે જુએ તે બદલી શકો છો. એચઆર એલિમેન્ટ પર પ્રિય પરિવર્તન એ રોટેશન બદલવું છે.

તમે તમારા એચઆર તત્વને ફેરવી શકો છો જેથી તે સહેજ કર્ણ હોય.

કલાક {
-મોઝ-ટ્રાન્સફોર્મ: ફેરવો (10 ડિગ્રી);
-વેબકીટ-ટ્રાન્સફોર્મ: ફેરવો (10 ડિગ્રી);
-ઓ-પરિવર્તન: ફેરવો (10 ડિગ્રી);
-એમએસ-ટ્રાન્સફોર્મ: ફેરવો (10 ડિગ્રી);
પરિવર્તન: ફેરવો (10 ડિગ્રી);
}

અથવા તમે તેને ફેરવી શકો છો જેથી તે સંપૂર્ણપણે વર્ટિકલ છે.

કલાક {
-મોઝ-ટ્રાન્સફોર્મ: ફેરવો (90 ડિગ્રી);
-વેબકીટ-ટ્રાન્સફોર્મ: ફેરવો (90 ડિગ્રી);
-ઓ-પરિવર્તન: ફેરવો (90 ડિગ્રી);
-એમએસ-ટ્રાન્સફોર્મ: ફેરવો (90 ડિગ્રી);
પરિવર્તન: ફેરવો (90 ડિગ્રી);
}

યાદ રાખો કે આ દસ્તાવેજમાં તેના વર્તમાન સ્થાનના આધારે એચઆર ફરે છે, તેથી તમારે તેને જ્યાં મેળવવાની જરૂર છે તેને મેળવવા માટે સ્થિતિને વ્યવસ્થિત કરવાની જરૂર પડી શકે છે. તે ડિઝાઇનમાં ઊભી રેખાઓ ઉમેરવા માટે તેનો ઉપયોગ કરવાની ભલામણ કરતું નથી, પરંતુ રસપ્રદ પ્રભાવ મેળવવાનો એક માર્ગ છે.

તમારા પૃષ્ઠો પર લાઇન્સ મેળવવાનો બીજો રસ્તો

એક વસ્તુ જે એચઆર એલિમેન્ટનો ઉપયોગ કરવાને બદલે કેટલાક લોકો અન્ય તત્વોની સરહદો પર આધાર રાખે છે. પરંતુ ક્યારેક એચઆર એ ઘણી વધુ અનુકૂળ અને વાપરવા માટે વધુ સરળ છે, જેથી સીમાઓ સુયોજિત કરી શકાય. કેટલાક બ્રાઉઝર્સના બોક્સ મોડેલના મુદ્દાઓ ત્રાંસી પણ સરહદની રચના કરી શકે છે.