CSS in Hindi : border-image Property

CSS border-image Property

  • Introduction to CSS border-image property in Hindi
  • Syntax of CSS border-image property in Hindi
  • Example of CSS border-image property in Hindi
  • Other CSS border-image properties in Hindi

Introduction CSS border-image Property

CSS में border box model का अहम् हिस्सा है। Borders द्वारा आप एक element के content को दूसरे element से separate कर पाते है। एक आकर्षक website बनाते समय borders को design किया जाना महत्वपूर्ण होता है।

Borders को design करने के लिए CSS में कई properties available है। जिनके द्वारा आप borders का color, उनकी style (solid, dashed और double आदि।) और उनकी width define कर सकते है।

इसके अलावा CSS में borders को rounded बनाने के लिए border-radius property available है। जिससे elements और भी अधिक attractive और beautiful लगने लगते है।

Border properties की series में CSS3 में एक और property add की गयी है जिसे border-image property कहा जाता है। इस property के द्वारा कोई image किसी element की border के रूप में use की जा सकती है।

Images को border के रूप में use करने के कई कारण हो सकते है जैसे की webpage की theme के अनुसार किसी भी image को border के रूप use करके एक beautiful layout create किया जा सकता है।

Image borders normal borders से ज्यादा beautiful लगती है। ऐसी borders website की theme में पूरी तरह blend हो जाती है जिससे user को पता भी नहीं चलता है की borders का प्रयोग किया गया है।

CSS border-image property किसी भी element पर apply की जा सकती है। लेकिन जब th, tr और td elements के लिए border-collapse property की value collapse set की गयी हो तो इस property को नहीं use किया जा सकता है।

CSS में border-image एक short hand property है जिसके द्वारा निचे दी गयी properties की value एक ही बार में define की जा सकती है।

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

Currently ये सभी properties किसी भी browser द्वारा support नहीं की जाती है। इसलिए आपको image को border के रूप में define करने के लिए short hand border-image property ही use करनी चाहिए।

Syntax of CSS border-image Property

CSS border-image property का general syntax निचे दिया जा रहा है। 

border-image : source slice width outset repeat;

जैसा की आप ऊपर दिए गए syntax में देख सकते है border-image property के लिए 5 values define की जाती है। लेकिन इस property को सिर्फ source value द्वारा भी define किया जा सकता है। जब आप ऐसा करते है तो बाकी 4 default values use की जाती है।

इन सभी values के बारे में निचे detail से बताया जा रहा है।

source 

यह value उस image का source होती है जिसे आप border के रूप में use करना चाहते है। जिस प्रकार background image define करते समय image को url() function द्वारा define करते है उसी प्रकार यँहा पर भी image को define करने के लिए url() function use किया जाता है।  

आप चाहे तो image ना define करके CSS gradient colors भी border के रूप में define कर सकते है। इसके अलावा आप SVG images को भी borders के लिए use कर सकते है। 

इस value को अलग से define करने के लिए border-image-source property use की जाती है। इसका syntax निचे दिया जा रहा है।

border-image-source : url("address-of-image") | CSS-gradient | SVG ;

slice 

यह value वह number होता है जिसके अनुसार आप border के रूप में use की जाने वाली image को slice (काटना) करना चाहते है। Image हमेशा nine parts में slice की जाती है। जिसमे 4 corners होते है, चार sides top, bottom, left और right होती है और एक image का middle part होता है। Image के 4 corners हमेशा fix रहते है। बाकी sides को आप अपने according manage कर सकते है।  

Number के अलावा यह value percentage में भी define की जा सकती है और इस value को आप fill भी define कर सकते है जिसे image background में fill हो जाती है। 

इस value को अलग से define करने के लिए border-image-slice property use की जाती है। इसका syntax निचे दिया जा रहा है।

border-image-slice : number-px | % | fill;

width 

यह value image border की width होती है। यह value mostly pixels में define की जाती है। इस value को अलग से define करने के लिए image-border-width property use की जाती है।

border-image-width : number-px;

outset 

यह value एक number होता है जो represent करता की border image box model से बाहर कितना फैलेगी। इस value को अलग से define की करने के लिए border-image-outset property use की जाती है।

border-image-outset : number-px;

repeat 

यह value define करती है की border image repeat होनी चाहिए, stretch की जानी चाहिए या round होनी चाहिए। यह value आप repeat, round या stretch define कर सकते है।

Repeat value का मतलब होता है की image को repeat किया जाएगा। Stretch का मतलब होता है की area को cover करने के लिए image को repeat करने की बजाय stretch किया जाएगा। Round value द्वारा image repeat की जाती है और पुरे area को fill कर देती है।

इस value को अलग से define करने के लिए border-image-repeat property use की जाती है। इसका syntax निचे दिया जा रहा है।

border-image-repeat : repeat | stretch | round;


Example of CSS border-image Property

निचे CSS border-image property को उदाहरण द्वारा समझाया जा रहा है। 

<html>

<head>

<title>CSS border-image property Demo</title>

<style>
p
{
    width:300px;
    margin:30px;
    padding:15px;
    border:10px solid;
    border-image:url(border.png) 20 stretch;
}
</style>

</head>

<body>
<p>This is paragraph. This paragraph have a image border around it. Images borders are more attractive than normal borders.</p>
</body>

</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

CSS-border-image-property-example-in-Hindi


      DMCA.com Protection Status

 Leave a comment