ஒதுக்கிட நிறத்தை அமைக்கவும். CSS பாணிகளைப் பயன்படுத்தி ஒதுக்கிடத்தில் உள்ள உதவிக்குறிப்பு உரையின் நிறத்தை எவ்வாறு மாற்றுவது? ஒதுக்கீட்டை அழகாக மறைத்தல்

பொதுவாக உள்ளீடு மற்றும் டெக்ஸ்ட் ஏரியாவில் உள்ள ஒதுக்கிடப் பண்பு, அந்த உறுப்புகளுக்குள் செயலுக்கான அழைப்பை வழங்கப் பயன்படுகிறது. இந்த இடுகையில், ப்ளேஸ்ஹோல்டர்களின் உரையை வடிவமைப்பதற்கான பல விருப்பங்களையும் அவற்றின் அனிமேஷனுக்கான விருப்பங்களையும் விவரிக்கிறேன்

எனவே, எங்கள் ஒதுக்கிடத்தின் உரை நிறத்தை மாற்றலாம், எடுத்துக்காட்டாக, பின்வரும் CSS விதிகளின் தொகுப்பு:

::-webkit-input-placeholder ( color : #c0392b ;) ::-moz-placeholder ( color : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( color : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder (color: #c0392b ;)

அத்தகைய எளிமையான சொத்தை ஸ்டைலிங் செய்வதற்கான குறியீட்டின் நீளம் பொதுவான தரநிலை இல்லாததால் ஏற்படுகிறது, எனவே ஒவ்வொரு உலாவியும் அதன் சொந்த வழியில் பிளேஸ்ஹோல்டர் ஸ்டைலிங்கிற்கான ஆதரவை செயல்படுத்தியுள்ளது.

மேலும், அனைவருக்கும் ஆதரவு இல்லை css பண்புகள். சரியாக ஆதரிக்கப்படும் பண்புகளின் பட்டியல் இங்கே:

எழுத்துரு (மற்றும் தொடர்புடையது)
பின்னணி (மற்றும் தொடர்புடைய)
நிறம்
வார்த்தை இடைவெளி
எழுத்து இடைவெளி
உரை-அலங்காரம்
செங்குத்து-சீரமைப்பு
உரை-மாற்றம்
வரி உயரம்
உரை-இன்டென்ட்
உரை வழிதல்
ஒளிபுகாநிலை

ஒதுக்கிட உரை உள்ளீடு அல்லது டெக்ஸ்ட் ஏரியா உறுப்பின் அகலத்தை "நீட்டிக்கிறது" (பொதுவான வழக்கு மொபைல் சாதனங்கள்) அதே நேரத்தில், அது தானாகவே கூர்ந்துபார்க்க முடியாத துண்டிக்கப்படுகிறது.

டெக்ஸ்ட்-ஓவர்ஃப்ளோ போன்ற CSS பண்பு: எலிப்சிஸ் இந்தச் சிக்கலைச் சரிசெய்ய உதவும், இது ஒதுக்கிடத்தின் செதுக்கப்பட்ட பகுதிக்கு அழகியல் நீள்வட்டத்தைச் சேர்க்கும். பாணியில் நாம் இப்படி எழுதுகிறோம்:

உள்ளீடு [ placeholder ] ( text-overflow : ellipsis ;) input ::-moz-placeholder ( text-overflow : ellipsis ;) input :-moz-placeholder ( text-overflow : ellipsis ;) input :-ms-input-placeholder ( text-overflow : ellipsis ;)

எங்கள் ப்ளாஸ்ஹோல்டர்களுக்கு இன்னும் கூடுதலான அழகியலைச் சேர்க்க, தொடர்புடைய உறுப்பு கவனம் பெறும்போது அதை மறைப்பதன் விளைவைச் சேர்க்க முடியும்.

அனிமேஷன் கூறுகளுடன் மறைத்து வைப்பதற்கான சில எடுத்துக்காட்டுகள்:

/* கவனம் செலுத்தும்போது ஒதுக்கிட வெளிப்படைத்தன்மையில் மென்மையான மாற்றம் */.input ::-webkit-input-placeholder (opacity : 1 ; transition : opacity 0.3s ease ;) .input ::-moz-placeholder ( ஒளிபுகாநிலை : 1 ; transition : ஒளிபுகாநிலை 0.3s ease ;).input :-moz- ப்ளாஸ்ஹோல்டர் (ஒளிபுகாநிலை: 1; நிலைமாற்றம்: ஒளிபுகாநிலை 0.3வி எளிதாக;).உள்ளீடு:-எம்எஸ்-இன்புட்-பிளேஸ்ஹோல்டர் (ஒளிபுகாநிலை: 1; மாறுதல்: ஒளிபுகாநிலை 0.3வி ஈஸ்;).உள்ளீடு (ஒளிபுகாநிலை: 0; மாற்றம்: ஒளிபுகாநிலை 0.3வி எளிதாக; ) .input :focus::-moz-placeholder (opacity : 0 ; transition : opacity 0.3s ease ;).input :focus:-moz-placeholder (opacity : 0 ; transition : opacity 0.3s ease ;).input :focus :-ms-input-placeholder (ஒளிபுகாநிலை: 0; மாற்றம்: ஒளிபுகாநிலை 0.3s எளிதாக;) /* கவனம் செலுத்தும்போது ஒதுக்கிடத்தை வலப்புறமாக மாற்றவும் */.input ::-webkit-input-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;) .input ::-moz-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;).input :-moz-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;).input :-ms-input-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;).உள்ளீடு :focus::-webkit-input-placeholder( text-indent : 500px ; transition : text-indent 0.3s ease ;).input :focus::-moz-placeholder ( text-indent : 500px ; transition : text-indent 0.3s ease ;).input :focus:- moz-placeholder ( text-indent : 500px ; transition : text-indent 0.3s ease ;) .input :focus:-ms-input-placeholder ( text-indent : 500px ; transition : text-indent 0.3s Ease ;) /* கவனம் செலுத்தும்போது ஒதுக்கிடத்தை கீழே மாற்றவும் */.input ::-webkit-input-placeholder (line-height: 20px; transition: line-height 0.5s Ease;) .input ::-moz-placeholder (line-height: 20px ; transition: line-height 0.5s ease ;).input :-moz-placeholder (line-height: 20px ; transition : line-height 0.5s ease ;).input :-ms-input-placeholder (line-height: 20px ; transition : line-height 0.5s ease ;).உள்ளீடு :focus::-webkit-input-placeholder(வரி-உயரம்: 100px ; மாற்றம்: வரி-உயரம் 0.5s எளிதாக;).input :focus::-moz-placeholder (line-height: 100px ; transition: line-height 0.5s Ease ;).input :focus:- moz-placeholder (வரி-உயரம்: 100px; மாற்றம்: வரி-உயரம் 0.5s எளிதாக;).input :focus:-ms-input-placeholder (line-height: 100px ; transition: line-height 0.5s Ease ;)

இங்கே முடிக்கலாம்.

வடிவத்தைக் குறைப்பதற்கும் காட்சி இரைச்சலைக் குறைப்பதற்கும், வடிவமைப்பாளர்கள் குறிச்சொல்லிடுகின்றனர் ப்ளாஸ்ஹோல்டர் பண்புடன் மாற்றப்பட்டு, குறுகிய கால நினைவகத்தில் சுமை அதிகரிக்கிறது. பார்வைக் குறைபாடு உள்ளவர்கள் துப்பு படிக்க கடினமாக இருக்கலாம். வைப்பது நல்லது உள்ளீட்டு புலத்திற்கு நேரடியாக மேலே. ஒரு வெற்று புலம் நிரப்புதல் தேவைப்படும் ஒரு உறுப்பு என எளிதாக அங்கீகரிக்கப்படுகிறது.

மோசமாக

நன்றாக

ஸ்டைலிங்: ஒதுக்கிட நிறத்தை CSS மாற்றவும்

ஒதுக்கிட CSS உடன் உள்ளீட்டு புல பாணியை மாற்றவும்

மோசமாக

இதற்கான ஒதுக்கிட விளைவு

ஒதுக்கிட பண்புக்கூறு மட்டுமே வேலை செய்கிறது மற்றும் , மற்ற குறிச்சொற்கள் உள்ளடக்கக்கூடிய பண்புக்கூறு குறிப்பிடப்பட்டிருந்தாலும் கூட.</p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="நீங்கள் உரையை உள்ளிடலாம்" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="நீங்கள் உரையை உள்ளிடலாம்" class="raz"></div> <h2>ஜாவாஸ்கிரிப்ட்டின் மதிப்பை மாற்றும் ஒரு பண்டைய நினைவக முறை</h2> <input onblur="this.value=(this.value=="கவனம் ="this.value=(this.value==this.title)?" value="மின்னஞ்சல்" title="மின்னஞ்சல்"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="மின்னஞ்சல்" title="மின்னஞ்சல்" /> <p>வணக்கம், இன்று நீங்கள் உள்ளீட்டிற்காக ஒதுக்கிடத்தைப் பயன்படுத்துவதை யாரும் ஆச்சரியப்படுத்த மாட்டீர்கள். ப்ளேஸ்ஹோல்டர் என்பது ஒரு தற்காலிக உரையாகும், இது உள்ளீட்டிற்குள் ஒரு எடுத்துக்காட்டுடன், நீங்கள் உரையை உள்ளிடும்போது மறைந்துவிடும். இன்று ஒதுக்கிடத்திற்கான CSS பாணியை எழுத முயற்சிப்போம்.</p> <h2>பணி: ஒதுக்கிட உங்கள் சொந்த CSS பாணியை உருவாக்கவும்</h2> <p>உள்ளீட்டில் ஒதுக்கிடத்தைப் பயன்படுத்தும் ஸ்டைலான இணையதளம் எங்களிடம் உள்ளது என்று வைத்துக்கொள்வோம். பிளேஸ்ஹோல்டரின் சாம்பல், சலிப்பான உரை நடையை தளத்தின் பொதுவான பாணியுடன் ஒத்துப்போகச் செய்ய வேண்டும். இதை எப்படி அடைய முடியும்? இது இன்னும் எல்லா உலாவிகளிலும் வேலை செய்யாது என்று நான் இப்போதே கூறுவேன். குறிப்பாக, இது 10 இல் IE பதிப்புகள் 9 மற்றும் அதற்குக் கீழே வேலை செய்யாது, பின்னர் அது மிகவும் சிரமத்துடன் வேலை செய்கிறது. பயர்பாக்ஸ் மற்றும் வெப்கிட் உலாவிகள் மற்றொரு விஷயம்.</p> <h2>தீர்வு: ஒதுக்கிடத்திற்கான css பாணி</h2> <p>எனவே, நாங்கள் பணியை அமைத்துள்ளோம், அதை எவ்வாறு தீர்க்கப் போகிறோம்?</p> <p>முதலில், ஒரு சோதனை மைதானத்தை உருவாக்குவோம்:</p><p> <input type="text" name="input" placeholder="எங்கள் ஒதுக்கிடத்தின் உரை" value="" /> </p><p>முடிந்தது, இப்போது ஸ்டைலில் நாம் என்ன செய்ய முடியும் என்பதைப் பார்ப்போம்: வெப்கிட் மற்றும் மொஸில்லா ஆகியவை அவற்றின் சொந்த மாற்றிகளைக் கொண்டுள்ளன, அவை ஒதுக்கிடத்திற்கு ஒரு சிறப்பு பாணியை ஒதுக்க உங்களை அனுமதிக்கின்றன: ::-webkit-input-placeholder மற்றும்:-moz-placeholder. அவற்றை எவ்வாறு பயன்படுத்துவது என்று பார்ப்போம்:</p> <p>உள்ளீட்டின் பாணியையும் அதில் உள்ள உரையையும் விவரிப்போம் (எடுத்துக்காட்டுக்கு மாறாக நீல நிறம்):</p><p>உள்ளீடு (அகலம்: 250px; நிறம்: நீலம்; எழுத்துரு-எடை: சாதாரணம்; எழுத்துரு பாணி: சாதாரணம்; )</p><p>இப்போது Webkit உலாவிகளுக்கான (Chrome, Safari, Opera) இந்த உள்ளீட்டில் ஒதுக்கிட உரைக்கு ஒரு சிறப்பு பாணியை எழுதுவோம்:</p><p>உள்ளீடு::-webkit-input-placeholder( நிறம்: சிவப்பு; எழுத்துரு பாணி: சாய்வு; எழுத்துரு-எடை: தடிமன்; )</p><p>ஒதுக்கிட உரையை சிவப்பு தடிமனான சாய்வாக மாற்றுவோம். ஒரு பெருங்குடலால் பிரிக்கப்பட்ட மற்ற CSS போலி-வகுப்புகளைப் போலல்லாமல், வெப்கிட்டில் பிளேஸ்ஹோல்டருக்கான ஸ்டைல் ​​இரட்டைப் பெருங்குடலால் பிரிக்கப்படுகிறது.</p> <p>இப்போது அதே பாணியில் எழுதுவோம் <a href="https://ermake.ru/ta/kak-otkryt-panel-instrumentov-v-mozile-kak-ubrat-i-kak-vernut/">Mozilla Firefox</a>உலாவிகள்:</p><p>உள்ளீடு:-moz-placeholder( நிறம்: சிவப்பு; எழுத்துரு பாணி: சாய்வு; எழுத்துரு-எடை: தடித்த; )</p><p>தயார். ஒதுக்கிடத்திற்கான CSS பாணி, நிச்சயமாக உங்கள் வடிவமைப்பிற்கு மிகவும் பொருத்தமான ஒன்றை நீங்கள் எழுதலாம். வேலை செய்யும் டெமோவை இங்கு பார்க்கலாம்</p> <p>காலியான உள்ளீடு மற்றும் டெக்ஸ்ட் ஏரியா உறுப்புகளுக்குள் செயல்படுவதற்கான அழைப்புகளுக்கு ஒதுக்கிட பண்புக்கூறு பயன்படுத்தப்படுகிறது. இந்த கட்டுரையில், ஒதுக்கிட உரையை ஸ்டைலிங் செய்வதற்கான சாத்தியக்கூறுகள் மற்றும் அதை மிகவும் வசதியாகவும் செயல்பாட்டுடனும் செய்யும் சில தந்திரங்களைப் பார்ப்போம்.</p> <p>எனவே, ஒதுக்கிட என்றால் என்ன என்று தெரியாதவர்களுக்கு ஒரு உதாரணத்துடன் ஆரம்பிக்கலாம்.</p> <h4>html</h4> <input type="text" placeholder="இங்கே ஒரு செய்தியை விடுங்கள்"> <p>பின்வரும் css விதிகளின் தொகுப்பைப் பயன்படுத்தி ஒதுக்கிடத்தின் பாணியை மாற்றலாம்:</p> <h4>css</h4>::-webkit-input-placeholder (color:#c0392b;) ::-moz-placeholder (color:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (color:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (color:#c0392b;) <p>இது பயமாக இருக்கிறது, இல்லையா? இது இன்னும் தரநிலையில் இல்லை என்பதே உண்மை. ஒவ்வொரு உலாவியும் அதன் சொந்த வழியில் ஒதுக்கிட ஸ்டைலிங்கிற்கான ஆதரவை செயல்படுத்துகிறது.</p> <p>IE மற்றும் பழைய பயர்பாக்ஸில் (18க்கு முன்), ப்ளாஸ்ஹோல்டர் ஒரு போலி வகுப்பாகக் கருதப்படுகிறது, மேலும் புதிய பயர்பாக்ஸ், வெப்கிட் மற்றும் பிளிங்க் ஆகியவற்றில் இது போலி-உறுப்பாகக் கருதப்படுகிறது.</p> <p>என்ன நடந்தது என்று பார்ப்போம்:</p> <p>சாத்தியமான அனைத்து CSS பண்புகளும் ஆதரிக்கப்படவில்லை என்று சொல்ல வேண்டும். பெரும்பான்மை <a href="https://ermake.ru/ta/kak-nastroit-turbo-rezhim-v-yandekse-chto-takoe-rezhim-turbo-v-sovremennyh/">நவீன உலாவிகள்</a>மாற்ற உங்களை அனுமதிக்கிறது:</p> <ul><li>எழுத்துரு (மற்றும் தொடர்புடைய பண்புகள்)</li> <li>பின்னணி (மற்றும் தொடர்புடைய பண்புகள்)</li> <li>நிறம்</li> <li>வார்த்தை இடைவெளி</li> <li>எழுத்து இடைவெளி</li> <li>உரை-அலங்காரம்</li> <li>செங்குத்து-சீரமைப்பு</li> <li>உரை-மாற்றம்</li> <li>வரி உயரம்</li> <li>உரை-இன்டென்ட்</li> <li>உரை வழிதல்</li> <li>ஒளிபுகாநிலை</li> </ul><h2>ஒதுக்கிடம் பொருந்தவில்லை என்றால் என்ன செய்வது?</h2> <p>சில நேரங்களில் உரை உள்ளீட்டு புலங்கள் தளவமைப்பு அம்சங்கள் காரணமாக அகலத்தில் குறைக்கப்படுகின்றன, குறிப்பாக <a href="https://ermake.ru/ta/chto-takoe-gadzhety-i-devaisy-chto-takoe-devais-v-mobilnoi-tehnike-devaisy/">மொபைல் சாதனங்கள்</a>. இந்த வழக்கில், ஒதுக்கிடத்தின் நீண்ட உரை பார்வையற்றதாக துண்டிக்கப்படும். இதைத் தடுக்க நீங்கள் டெக்ஸ்ட்-ஓவர்ஃப்ளோ: நீள்வட்டத்தைப் பயன்படுத்தலாம். இந்த தொடரியல் அனைத்து புதிய உலாவிகளிலும் வேலை செய்யும்.</p> <h4>css</h4>input (text-overflow:ellipsis;) input::-moz-placeholder (text-overflow:ellipsis;) input:-moz-placeholder (text-overflow:ellipsis;) input:-ms-input-placeholder (text-overflow); :நீள்வட்டம்;) <h2>ஃபோகஸில் ப்ளேஸ்ஹோல்டரை மறைப்பது எப்படி?</h2> <p>ஒரு ஒதுக்கிடத்தை மறைப்பது வெவ்வேறு வழிகளில் நிகழ்கிறது.</p> <ol><li>சில உலாவிகளில் உள்ளீடு மூலம் கவனம் பெறும்போது</li> <li>மற்ற உலாவிகளில் குறைந்தது ஒரு எழுத்து இருந்தால்</li> </ol><p>நான் முதல் விருப்பத்தை விரும்புகிறேன். ஒதுக்கிடத்தை ஆதரிக்கும் அனைத்து உலாவிகளிலும் இந்த நடத்தையை அமைக்க, பின்வரும் CSS விதிகளை வரையறுப்போம்:</p> <h4>css</h4>:focus::-webkit-input-placeholder (color: transparent) :focus::-moz-placeholder (color: transparent) :focus:-moz-placeholder (color: transparent) :focus:-ms-input-placeholder ( நிறம்: வெளிப்படையானது) <h2>ஒதுக்கீட்டை அழகாக மறைத்தல்</h2> <p>ஒதுக்கிடத்தைக் காட்டவும் மறைக்கவும் ஒரு மாற்றத்தையும் சேர்க்கலாம்:</p> <h4>css</h4>/* கவனம் செலுத்தும்போது ஒதுக்கிட வெளிப்படைத்தன்மையின் மென்மையான மாற்றம் */ .input1::-webkit-input-placeholder (ஒளிபுகாநிலை: 1; மாற்றம்: ஒளிபுகாநிலை 0.3s எளிதாக;) .input1::-moz-placeholder (ஒளிபுகாநிலை: 1; மாற்றம்: ஒளிபுகாநிலை 0.3s ஈஸி;).input1:-moz-placeholder (opacity: 1; transition: opacity 0.3s Ease;).input1:-ms-input-placeholder (opacity: 1; transition: opacity 0.3s Ease;).input1 : ஃபோகஸ்::-வெப்கிட்-இன்புட்-பிளேஸ்ஹோல்டர் (ஒளிபுகாநிலை: 0; மாற்றம்: ஒளிபுகாநிலை 0.3வி ஈஸ்;).input1:focus::-moz-placeholder (ஒளிபுகாநிலை: 0; மாற்றம்: ஒளிபுகாநிலை 0.3s எளிதாக;).input1:focus : -moz-placeholder (opacity: 0; transition: opacity 0.3s Ease;) .input1:focus:-ms-input-placeholder (opacity: 0; transition: opacity 0.3s Ease;) /* ப்ளாஸ்ஹோல்டரை வலது பக்கம் மாற்றும்போது கவனம்*/ .input2::-webkit-input-placeholder (text-indent: 0px; transition: text-indent 0.3s Ease;) .input2::-moz-placeholder (text-indent: 0px; transition: text-indent 0.3s ஈஸி;) .input2:-moz-placeholder (text-indent: 0px; transition: text-indent 0.3s Ease;).input2:-ms-input-placeholder (text-indent: 0px; transition: text-indent 0.3s ease;).input2:focus::-webkit-input-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;).input2:focus::-moz-placeholder ( text-indent: 500px; transition: text-indent 0.3s Ease;) .input2:focus:-moz-placeholder (text-indent: 500px; transition: text-indent 0.3s Ease;).input2:focus:-ms- input-placeholder (text-indent: 500px; transition: text-indent 0.3s Ease;) /* கவனம் செலுத்தும்போது ஒதுக்கிடத்தை கீழே மாற்றவும் */ .input3::-webkit-input-placeholder (line-height: 20px; transition: line -உயரம் 0.5s ஈஸி;).input3::-moz-placeholder (வரி-உயரம்: 20px; மாற்றம்: வரி-உயரம் 0.5s எளிதாக;).input3:-moz-இடம்பிடிப்பு (வரி-உயரம்: 20px; மாற்றம்: வரி - உயரம் 0.5s எளிதாக;).input3:-ms-input-placeholder (line-height: 20px; transition: line-height 0.5s Ease;).input3:focus::-webkit-input-placeholder (line-height: 100px ; மாற்றம்: வரி-உயரம் 0.5s எளிதாக;).input3:focus::-moz-placeholder (வரி-உயரம்: 100px; மாற்றம்: வரி-உயரம் 0.5s எளிதாக;).input3:focus:-moz-placeholder (வரி - உயரம்: 100px; மாற்றம்: கோடு-உயரம் 0.5வி எளிதாக;) .input3:focus:-ms-input-placeholder (வரி-உயரம்: 100px; மாற்றம்: வரி உயரம் 0.5s எளிதாக;) <p>இது உங்களுக்கு பயனுள்ளதாக இருக்கும் என்று நம்புகிறேன். கருத்துக்களில் கருத்துகள் மற்றும் பரிந்துரைகளை எழுதுங்கள்.</p> <p>ப்ளாஸ்ஹோல்டர் என்பது ஒரு போலி-வகுப்பு அல்லது போலி-உறுப்பு, இது புலத்தின் பெயரைக் காண்பிக்கும் பொறுப்பாகும். அதன் மையத்தில், இது ஒரு குறிச்சொல் (எளிமைக்காக அதை அழைப்போம்), அதில் நீங்கள் ஒரு வார்த்தையை உள்ளிடவும், பயனர் அதை உள்ளே பார்க்கிறார். ஒவ்வொரு படிவப் புலத்திற்கும் ஒருவித குறிப்பு அல்லது பெயர்.</p><p>ஒவ்வொரு உலாவியும் இந்த குறிச்சொல்லை வித்தியாசமாக கையாளுகிறது, மேலும் அதன் ஸ்டைலிங் விரும்பத்தக்கதாக இருக்கும். இயல்புநிலை பாணிகளை மாற்ற, ஸ்டைல்கள் கோப்பில் இரண்டு கோடுகளின் குறியீட்டைச் சேர்க்கவும். சிக்கலான எதுவும் இல்லை. <br>இருப்பினும், எல்லாவற்றையும் மாற்ற முடியாது என்பதை கணக்கில் எடுத்துக்கொள்வது அவசியம்.</p><h2>பல்வேறு பாணிகளில், இந்த விஷயத்தில் பின்வரும் விஷயங்கள் எங்களுக்குக் கிடைக்கின்றன:</h2><ul><li>எழுத்துரு எடை - உரை எடையை அமைத்தல்</li><li>எழுத்துரு அளவு - உரை அளவைத் தேர்ந்தெடுக்கவும்</li><li>எழுத்துரு குடும்பம் - எழுத்துரு தேர்வு</li><li>பின்னணி - பின்னணி மற்றும் பின்னணி படம்</li><li>நிறம் - உரை நிறம்</li><li>வார்த்தை இடைவெளி - வார்த்தைகளுக்கு இடையே இடைவெளி அமைக்கவும்</li><li>எழுத்து இடைவெளி - எழுத்துகளுக்கு இடையே இடைவெளி அமைக்கவும்</li><li>text-decoration - வார்த்தை அலங்காரத்தின் தேர்வு. அடிக்கோடிடப்பட்டது, குறுக்குவெட்டு, முதலியன.</li><li>vertical-align - செங்குத்து சீரமைப்பை அமைத்தல்</li><li>text-transform - உரை மாற்றங்களைத் தேர்ந்தெடுக்கவும். அனைத்தும் பெரிய அல்லது சிறிய எழுத்துக்களில், முதலியன.</li><li>கோடு உயரம் - கோடுகளுக்கு இடையே உள்ள இடைவெளி</li><li>text-indent - ஒரு பத்தியின் முதல் வரிக்கு இடது உள்தள்ளலை அமைக்கிறது</li><li>உரை வழிதல் - தொகுதியில் பொருந்தாத உரையைக் காண்பிக்கும் தேர்வு (மறை அல்லது செதுக்கி நீள்வட்டத்தைச் சேர்க்கவும்)</li><li>ஒளிபுகாநிலை - உறுப்பு வெளிப்படைத்தன்மையைத் தேர்ந்தெடுக்கவும்</li> </ul><p>இப்போது கிடைக்கக்கூடிய பாணிகளைப் புரிந்துகொண்டோம், வடிவமைப்பைத் தொடங்கலாம், இதற்காக பின்வரும் பாணிகளைச் சேர்ப்போம்:</p><p>::-webkit-input-placeholder (color: #2cb04d; ) <br>::-moz-placeholder (color: #2cb04d; )/* Firefox 19+ */ <br>:-moz-placeholder (color: #2cb04d; ) /*Firefox 18- */ <br>:-ms-input-placeholder (color: #2cb04d; )</p><p>இந்த வரிகளைச் சேர்த்த பிறகு, படிவப் புலங்களுக்குள் இருக்கும் பெயர்களின் நிறம் மாறி, ஒவ்வொரு உலாவியிலும் ஒரே மாதிரியாக இருக்கும். நீங்கள் இங்கே கூடுதல் பாணிகளைச் சேர்க்கலாம். <br>உதாரணமாக, இந்த பாணி</p><p>::-webkit-input-placeholder (color: #2cb04d; font-size: 1.5em; font-weight: 600;) <br>::-moz-placeholder (color:#2cb04d; font-size:1.5em; font-weight:600;) /*Firefox 19+*/ <br>:-moz-placeholder (color:#2cb04d; font-size:1.5em; font-weight:600;) /*Firefox 18-*/ <br>:-ms-input-placeholder (color: #2cb04d; font-size: 1.5em; font-weight: 600;)</p><p>வண்ணத்தைச் சேர்க்கவும் <a href="https://ermake.ru/ta/kak-sdelat-izobrazhenie-bolshe-po-razmeru-uvelichenie-vesa/">பெரிய அளவு</a>மற்றும் நடுத்தர உரை எடை. கூடுதல் சொத்தை சேர்த்தால் - <br>text-overflow:ellipsis பின்னர் புலத்திற்கு ஏற்றவாறு உரை டிரிம் செய்யப்பட்டு இறுதியில் ஒரு நீள்வட்டம் சேர்க்கப்படும்.</p><p>இன்னும் ஒரு சுவாரஸ்யமான சொத்து உள்ளது: css (பாணிகள்) இல் அனிமேஷனின் தோற்றத்திற்கு நன்றி, கர்சரை ஒரு புலத்தில் வைக்கும்போது அழகான மறைவை நீங்கள் கட்டமைக்கலாம். முன்பு, இது js (ஸ்கிரிப்டுகள்) பயன்படுத்தி செய்யப்பட்டது</p><p>உள்ளீடு::-வெப்கிட்-இன்புட்-பிளேஸ்ஹோல்டர் (ஒளிபுகாநிலை: 1; மாற்றம்: ஒளிபுகாநிலை 0.3 வி ஈஸி;) <br>.input::-moz-placeholder (ஒளிபுகாநிலை: 1; மாற்றம்: ஒளிபுகாநிலை 0.3s எளிதாக;) <br>.input:-moz-placeholder (ஒளிபுகாநிலை: 1; மாற்றம்: ஒளிபுகாநிலை 0.3s எளிதாக;) <br>.input:-ms-input-placeholder (ஒளிபுகாநிலை: 1; மாற்றம்: ஒளிபுகாநிலை 0.3s எளிதாக;) <br>.input:focus::-webkit-input-placeholder (opacity: 0; transition: opacity 0.3s Ease;) <br>.input:focus::-moz-placeholder (ஒளிபுகாநிலை: 0; மாற்றம்: ஒளிபுகாநிலை 0.3s எளிதாக;) <br>.input:focus:-moz-placeholder (ஒளிபுகாநிலை: 0; மாற்றம்: ஒளிபுகாநிலை 0.3s எளிதாக;) <br>.input:focus:-ms-input-placeholder (opacity: 0; transition: opacity 0.3s Ease;)</p><p>அத்தகைய பாணிகளைச் சேர்ப்பது, கர்சரை புலத்தில் வைக்கும் போது, ​​ப்ளேஸ்ஹோல்டரை சீராக மங்கச் செய்யும் <br>.உள்ளீடு என்பது படிவ உறுப்பு வகுப்பாகும். பாணிகள் வேலை செய்ய, படிவ புலக் குறியீடு இப்படி இருக்க வேண்டும்:</p><p><input type="text" class="input" placeholder="புலம் பெயர்"></p><p>அல்லது நீங்கள் உறுப்பு வகுப்பைப் பயன்படுத்தலாம். இந்த வழியில் நீங்கள் ஒவ்வொரு படிவத்திற்கும் வெவ்வேறு பாணிகளை அமைக்கலாம்.</p><p><!-- первым указываем класс контейнера, тег формы и тег вставки поля --><br>.contacts-form form input::-webkit-input-placeholder (color: #2cb04d; font-size: 1.5em; font-weight: 600;) <br>.contacts-form form input::-moz-placeholder (color: #2cb04d; font-size: 1.5em; font-weight: 600;)/*Firefox 19+*/ <br>.contacts-form form input:-moz-placeholder (color: #2cb04d; font-size: 1.5em; font-weight: 600;)/*Firefox 18-*/ <br>.contacts-form form input:-ms-input-placeholder (color: #2cb04d; font-size: 1.5em; font-weight: 600;)</p><p>இந்த எளிய வழிகளில் நீங்கள் மிகவும் அழகான வடிவ வடிவமைப்பை உருவாக்கலாம்.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </article> </div> <div class="sidebar"> <section class="widget"> <div class="textwidget"> </div> </section> </div> <div class="sidebar"> <section class="widget"><h3 class="widget-title">ஆசிரியர் தேர்வு</h3><ul class="rfpw-dropdown-post"> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/ta/kak-ubrat-kompyutera-istoriyu-prosmotrov-istoriya-brauzera-kak-posmotret/"><img style="width: 30%; border-radius: 0;" src="/uploads/318472be0eb2d0a8c6bd7cd6b0782fc1.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/ta/kak-ubrat-kompyutera-istoriyu-prosmotrov-istoriya-brauzera-kak-posmotret/">உலாவி வரலாறு (உலாவி வரலாற்றை எவ்வாறு பார்ப்பது, நீக்குவது மற்றும் மீட்டெடுப்பது)</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">வணக்கம், அன்பான பார்வையாளர்களே! வேறொருவரின் கணினியில் இணையத்தில் பணிபுரியும் போது, ​​நாம் அறியாமல் தடயங்களை விட்டுவிடுகிறோம். IN...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/ta/chto-delat-esli-pole-obekta-ne-obnaruzheno-chto-delat-esli-pole-obekta-ne/"><img style="width: 30%; border-radius: 0;" src="/uploads/0ff2ca9e01bacd4063a818672dfa2da2.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/ta/chto-delat-esli-pole-obekta-ne-obnaruzheno-chto-delat-esli-pole-obekta-ne/">"பொருள் புலம் கண்டறியப்படவில்லை" என்றால் என்ன செய்வது, பொருள் புலம் கண்டறியப்படவில்லை, உற்பத்தி நடவடிக்கைகள் நடந்து வருகின்றன</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">1C பயனர்கள் சந்திக்கும் பிரச்சனை "பிழை: பொருள் புலம் காணப்படவில்லை", பெரும்பாலும் தோன்றும் போது...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/ta/probit-po-nomeru-telefona-vladelca-kak-uznat-gde-nahoditsya-chelovek-po/"><img style="width: 30%; border-radius: 0;" src="/uploads/93701987bbeab63a000d821fce21422a.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/ta/probit-po-nomeru-telefona-vladelca-kak-uznat-gde-nahoditsya-chelovek-po/">மொபைல் எண் மூலம் ஒருவர் எங்கிருக்கிறார் என்பதைக் கண்டுபிடிப்பது எப்படி?</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">சில வாழ்க்கை சூழ்நிலைகளுக்கு ஒரு நபரைக் கண்டுபிடிப்பது, அவரது இருப்பிடத்தை நிறுவுவது அல்லது அவரது கடைசி பெயர் மற்றும் முதல் பெயரைக் கண்டறிவது அவசியம்.</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/ta/karta-gugl-sputnik-podrobnoe-opisanie-servisa-trehmernye/"><img style="width: 30%; border-radius: 0;" src="/uploads/4c5ec417af15f4923ac9ffe5adb9bde2.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/ta/karta-gugl-sputnik-podrobnoe-opisanie-servisa-trehmernye/">Google வரைபடத்தில் 3D வரைபடங்கள்</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">பல விண்வெளி வீரர்களின் கூற்றுப்படி, வெளியில் இருந்து நமது கிரகத்தின் காட்சியை விட அழகாக எதுவும் இல்லை. பூமி பெரியதாகத் தோன்றும்போது...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/ta/kak-nastroit-monitor-dlya-pravilnoi-cvetoperedachi-s-pomoshchyu-po/"><img style="width: 30%; border-radius: 0;" src="/uploads/d37aeee8722a180940b4ee4fe58ba9bb.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/ta/kak-nastroit-monitor-dlya-pravilnoi-cvetoperedachi-s-pomoshchyu-po/">வழிமுறைகள்: மடிக்கணினி திரையை அளவீடு செய்தல் - வண்ண விளக்கத்தை சரிசெய்தல்</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">மடிக்கணினியில் வண்ணத் திட்டத்தை சரியாக சரிசெய்வது எப்படி? மாஸ்டரிடமிருந்து பதில்: சரி, நீங்கள் இறுதியாக ஒரு மடிக்கணினியை வாங்கினீர்கள்! இத்தகைய...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/ta/ploho-rabotaet-sensornyi-ekran-chto-delat-esli-sensor-vashego-gadzheta-ne/"><img style="width: 30%; border-radius: 0;" src="/uploads/dfd76163a4eae7ae9235b963b4cb2d97.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/ta/ploho-rabotaet-sensornyi-ekran-chto-delat-esli-sensor-vashego-gadzheta-ne/">உங்கள் கேஜெட்டின் சென்சார் வேலை செய்யவில்லை என்றால் என்ன செய்வது?</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">நவீன டேப்லெட்டுகள் முதன்மையாக தொடுதிரை மூலம் கட்டுப்படுத்தப்படுகின்றன. உங்கள் டேப்லெட் திடீரென வேலை செய்வதை நிறுத்தினால்...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/ta/pri-vklyuchenii-kompyutera-postoyanno-zapuskaetsya-bios-noutbuk-pri/"><img style="width: 30%; border-radius: 0;" src="/uploads/caa8bac5259bd1cae8d91ab58aa3d711.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/ta/pri-vklyuchenii-kompyutera-postoyanno-zapuskaetsya-bios-noutbuk-pri/">கணினியை இயக்கும்போது பயாஸ் தோன்றும் போது மடிக்கணினி BIOS இல் நுழைகிறது.</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">இன்று நாம் பார்ப்போம்: விண்டோஸ் இயக்க முறைமையின் எந்தப் பதிப்பின் உரிமையாளர்களுக்கும் ஒரு சூழ்நிலை இருக்கலாம்...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/ta/kak-pereustanovit-windows-poshagovaya-instrukciya-kak-pereustanovit/"><img style="width: 30%; border-radius: 0;" src="/uploads/2046ab0e80e33c46398798796860ac54.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/ta/kak-pereustanovit-windows-poshagovaya-instrukciya-kak-pereustanovit/">விண்டோஸை மீண்டும் நிறுவுவது எப்படி: படிப்படியான வழிமுறைகள் வட்டில் இருந்து கணினியில் விண்டோஸ் 7 ஐ நிறுவுதல்</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">இந்த இயக்க முறைமையை நிறுவ பல விருப்பங்கள் உள்ளன, மேலும் அவை அனைத்தும் சிறிய விலகல்களில் மட்டுமே வேறுபடுகின்றன ...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/ta/mdf-chem-otkryt-chem-otkryvat-faily-mdf-i-kak-s-nimi-rabotat-podrobnaya/"><img style="width: 30%; border-radius: 0;" src="/uploads/bda9c17f55759c913b4eb7949ae8e93c.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/ta/mdf-chem-otkryt-chem-otkryvat-faily-mdf-i-kak-s-nimi-rabotat-podrobnaya/">MDF கோப்புகளை எவ்வாறு திறப்பது மற்றும் அவற்றுடன் எவ்வாறு வேலை செய்வது: விரிவான வழிமுறைகள்</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">MDF கோப்பை எவ்வாறு திறப்பது? இந்த கேள்விக்கான பதிலைக் கண்டுபிடிப்பதற்கு முன், அது எந்த வகையான வடிவம் என்பதை நீங்கள் புரிந்து கொள்ள வேண்டும். அன்று...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/ta/raskrutka-aska-besplatnaya-nakrutka-laikov-v-servise-ask-fm-kak/"><img style="width: 30%; border-radius: 0;" src="/uploads/ef662912cb10f5d1986cfe9f8c1aa116.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/ta/raskrutka-aska-besplatnaya-nakrutka-laikov-v-servise-ask-fm-kak/">Ask சேவையில் விருப்பங்களின் இலவச அதிகரிப்பு</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Ask fm இன் ப்ரோமோஷன் தற்போது அதிகரித்து வருகிறது. இது இளைஞர்களின் தொடர்பு மற்றும்...</div> </li> </ul></section> </div> <div class="sidebar"> <section class="widget"> <div class="textwidget"> </div> </section> <section class="widget"> <div class="textwidget"> </div> </section> </div> </div> <div id="copy"> <div class="container"> <div id="logo" class="fl"> <a href="https://ermake.ru/ta/"></a> </div> <nav id="nav" class="fl"> <div class="menu-footer-container"><ul id="menu-footer" class="footer-nav"> <li class="menu-item type-custom object-custom "><a href="">தள தகவல்</a></li> <li class="menu-item type-custom object-custom "><a href="https://ermake.ru/ta/feedback/">பின்னூட்டம்</a></li> <li class="menu-item type-post_type object-page "><a href="https://ermake.ru/ta/sitemap.xml">தள வரைபடம்</a></li> </ul></div> </nav> <div class="clearfix"></div> <p>© 2024 ermake.ru -- PC பழுது பற்றி - தகவல் போர்டல் <span class="counters"> </span> </p> </div> </div> <script type='text/javascript' src='https://ermake.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0441\u043a\u0440\u044b\u0442\u044c","width":"100%"} ; /* ]]> */ </script> <script type='text/javascript' src='https://ermake.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://ermake.ru/wp-content/themes/whattech/js/init.js?ver=4.8.4'></script> <script type='text/javascript' src='https://ermake.ru/wp-content/themes/whattech/js/jquery.flexslider.js?ver=4.8.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.4'></script> </body> </html>