Google search engine

CSS text property क्या है और CSS text effects हिंदी में

एक website में CSS text property का बहुत बड़ा महत्व होता है text के द्वारा हम website को और भी ज्यादा आकर्षित बना सकते है ज्यादातर website में text को white background में black color में लिखा होता है. और हमें भी text को white background में black color से लिखना चाहिए जिससे user को article पढ़ने में आसानी हो.

CSS से हम text में color, shadow, animation, 3d effects, text को wrap, italic, bold, font-family, hover तथा focus effect, overflow, hide, ellipse, add text, rotate तथा z-index से text एक दूसरे के ऊपर रख सकते है CSS text की बहुत सारी property होती है जिसमे हम website में text की styling कर सकते है.

CSS text property हिंदी में

1) CSS text color

website में हम किसी भी text का color कुछ भी रख सकते है html में हम class के साथ उसकी CSS लिखते है तथा color को हम color का नाम देकर या # (hash value) देकर, rgb या rgba value देकर लिख सकते है.

2) CSS text bold

जब हम अपने website में किसी text को लिखते है तो वह अपने normal स्थिति में होता है यानि की bold नहीं होता है. bold मतलब text मोटा होता है text को bold करने के हमारे पास दो तरीके होते है. एक तो हम html में <b> तथा <strong> tag देकर text को bold कर सकते है जिसके बाद हमें CSS लिखने की जरुरत नहीं होती है दूसरा तरीका हम CSS से text को काम तथा जयादा bold कर सकते है.

जिसके लिए हमें font-weight लिखना होता है जिसमें हम font को 100 से 900 की size तक bold कर सकते है. अगर हम font-weight 100 रखते हैं तो हमें font बहुत पतला दिखेगा अगर 900 रखते हैं तो सबसे जयादा मोटा दिखाई देगा इसी तरह font को normal रखने के लिए font-weight normal का इस्तेमाल करते हैं.

3) CSS text size

अगर हमें html में किसी text तथा tag का size छोटा या बड़ा रखना हो उसके लिए हम CSS में font-size का इस्तेमाल करते हैं font का size हम px (pexels), % (precentage) तथा rem में से किसी एक का इस्तेमाल कर सकते हैं.

4) CSS text align

website में webpage पर या किसी box में कोई text लिखते हैं तो वह text by default हमेशा left से शुरू होता हैं या left side ही रहता हैं हम text-align के द्वारा text को page या box के center या right में रख सकते हैं हम दो तरीके से text को left center या right में रख सकते हैं.

केवल html द्वारा text align –

5) CSS text decoration

text decoration के द्वारा हम किसी भी text के ऊपर, नीचे तथा बीचों बीच लाइन line डाल सकते हैं अगर हमें text के नीचे line डालनी हो तो हम text-decoration: underline; का इस्तेमाल करते हैं.

अगर हमें text के ऊपर line डालनी हो तो हम text-decoration: overline; तथा text के बीच में line डालनी हो तो text-decoration: line-through; का इस्तेमाल करते हैं अगर हमें किसी भी text से कोई भी लाइन हटानी हो तो text-decoration: none; का इस्तेमाल करते हैं.

6) CSS text italic –

हम देखते है website में ज्यादातर text सीधे होते है और कुछ text ऐसे होते है जो तिरछे होते है जिसे हम italic कहते है. हम दो प्रकार से text को तिरछा या italic कर सकते है पहला तरीका यह है की हम html में <i> tag का इस्तेमाल कर text को तिरछा कर सकते है जिसके बाद हमे CSS लिखने की जरुरत नहीं होती है दूसरा हम CSS के द्वारा font-style का उपयोग कर text को italic कर सकते है.

7) CSS text hover effect

हमें website में ज्यादातर text black-color में दिखते है जब हम किसी text पर mouse cursor ले जाते है तो text का color बदल जाता है जिसे हम hover कहते है. hover से हम किसी image, link, text पर mouse cursor ले जाने पर उसका color बदल सकते है तथा किसी अन्य page पर जाने के लिए link पर लगा सकते है.

8) CSS text wrap

जब हम बहुत ज्यादा text लिखते है तो कभी-कभी text एक ही line में चलता है तथा हमारे webpage से बाहर चला जाता है. तथा कभी-कभी एक line में टूटकर दूसरे line में चला जाता है जिसे हम CSS text wrap कहते है. अगर कोई text एक ही line में आ रहा है तथा दूसरे line में नहीं टूट रहा है उसके लिए हम CSS में white-space: normal; का इस्तेमाल करते है.

जिसके बाद text अगले line में टूटते जाता है अगर कोई text पहली line खत्म होने के बाद दूसरी line में टूटते जा रहा है और हमें text एक ही line में चाहिए उसके लिए हम CSS में white-space: no-wrap; का इस्तेमाल करेंगे जिसके बाद text एक ही लाइन में आएगा.

9) CSS text overflow

अगर किसी box के अंदर हम text लिखते है या कोई paragraph लिखते है कभी-कभी text box से ज्यादा हो जाता है जिसके बाद box के बाहर जाने लगता है उसके लिए हम CSS में overflow: hidden; का इस्तेमाल करते है जिसके बाद box के बाहर गया हुआ text छिप जाता है अगर हमें एक या दो line के बाद text में ellipsis करना हो. ellipsis मतलब text एक या दो line के बाद … (3 dot) के बाद छिप जाता है.

box के अंदर text में overflow: hidden, text-overflow: ellipsis, -webkit-line-clamp: 2; यानि की कितने line के बाद आपको text hide करना है. -webkit-box-orient यानि कि आपने text को vertically या horizontally hide करना है -webkit-box यानि कि box कि width को manage करने के लिए करते है ध्यान रहे paragraph में text दो line से ज्यादा होना चाहिए तभी यह काम करेगा.

10) CSS text shadow

text shadow के द्वारा हम किसी भी text के पीछे किसी और color का text रख सकते है जिसमें हमें text के पीछे एक छाया दिखती है जिसे हम text shadow कहते है. text में shadow हम तीन जगह से दे सकते है. जैसे – 2px 5px 8px black; इसमें 2px right side की तरफ shadow देता है तथा 5px text के पीछे की side shadow देता है.

तथा 8px अपनी जगह पर कलर को फैलता है black color का shadow तीनों जगह पर होता है आप अपने हिसाब से तीनों जगह में color और shadow का size दे सकते है.

CSS text 3d shadow से हम text के पीछे दो color रखकर text पर shadow दे सकते है जिससे text हमें उभरा हुआ दिखाई देता है जिसे text 3d effect कहते है.

11) CSS में text को 90 degree कैसे घुमाए – CSS text 90 degree rotate

हमें अगर किसी text को 90 degree या किसी भी degree में घुमाना है उसके लिए हम CSS में transform का इस्तेमाल करते है. जिसके साथ हम degree का इस्तेमाल करते है जिससे text किसी भी दिशा में rotate हो जाता है अगर हम transform rotate 3d रखते है तो text हमें 3d look में दिखाई देता है.

CSS में text को verticle align कैसे करें – text property से text को top, center तथा bottom कैसे align करें

Text को CSS से vertically align यानि की ऊपर से नीचे की तरफ align करने के लिए हमारे पास 4 तरीके है.

1) line-height द्वारा

पहला तरीका line-height है मान लीजिए हमने एक box बनाया है जिसकी width 100%, height 300px तथा background-color black दिया हुआ है. box के अंदर हमें Text को vertically align करना है तो हम box के अंदर h1 text में line-height देंगे जितनी box की height होगी उतनी ही हमें Text की line-height px (pexels) में देनी होगी.

2) padding द्वारा

दूसरा तरीका हमारे पास padding है box के अंदर हम padding देकर Text को align कर सकते है लेकिन इसमें box की height auto देनी पड़ेगी केवल padding के द्वारा box की height बडेगी जिससे Text box के अंदर align हो जाएगा.

3) position द्वारा

तीसरा तरीका हमारे पास position है जिसके द्वारा हम parent div जैसे box तथा child div जैसे – h1 में position दे सकते है. box को हम height देकर उसमें position relative देते है तथा h1 को हम position absolute देते है तथा top तथा left side से position set करते है.

4) display flex द्वारा

चौथा तरीका जो है वह है flex यानि की display flex जिसके द्वारा हम text को vertically align कर सकते है. box में हम width, height, background-color देंगे उसके साथ display flex तथा align-items: center; देते है.

अगर हमें text को horizontally center align करना है जैसे – left center तथा right रखना है तो हम justify-content: center; का इस्तेमाल करते है.

CSS text property, text effect और CSS text rotate के बारे में सरल भाषा में समझाया गया है text property के बारे में अधिक जानकारी के लिए नीचे comment box में अपने सवाल पूछ सकते है. ज्यादा जानकारी के लिए आप w3schools की website से पढ़ सकते है.

jeewan.basera@gmail.comhttps://hindischool.net
Jeewan, मै hindischool.net का foundur हूँ मै एक professional web designer और graphic designer हूँ मुझे इस क्षेत्र में 4 साल का अनुभव है और यहाँ में अपने अनुभव को blog के जरिये लोगों के साथ शेयर करता हूँ मुझे हिंदी मै blog लिखना पसंद है, graphic और website से संबंधित किसी भी प्रकार की सहायता के लिए आप social media या comment के जरिए अपने सवाल पूछ सकते है.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

21,570FansLike
3,432FollowersFollow
0SubscribersSubscribe

Latest Articles