સાદા સીએસએસમાં હોવર છબી સાથે લિંક કેવી રીતે બનાવવી

લેખ દ્વારા લખાયેલ:
  • વેબસાઇટ ડિઝાઇન
  • સુધારાશે: ઑગસ્ટ 02, 2013

હ aવર શું છે? માંથી વ્યાખ્યાયિત વ્યાખ્યા UWStout.edu:

'હોવર' એ એક અસર છે જે ત્યારે થાય છે જ્યારે તમે કર્સરને કોઈપણ પ્રકારની લિંક પર મૂકી દો છો. કલરને રંગ બદલીને, નવો ગ્રાફિક બતાવીને અથવા ધ્વનિ ફાઇલ વગાડીને હોવરના પ્રતિસાદ માટે કોડેડ કરી શકાય છે.

હોવર અસર વેબ ઉપયોગીતાને સુધારે છે અને વેબ માલિકોને તેમના વેબ ટ્રાફિકને દિશામાન કરવામાં સહાય કરે છે. જ્યારે તમે ઇચ્છો છો કે તમારા વેબ વપરાશકર્તાઓ વિશેષ લિંક પર વધારે ધ્યાન આપતા હોય, તો આકર્ષક હોવર પ્રભાવ સાથે લિંક બનાવવાનો આ એક સારો રસ્તો છે. સરળ હોવર અસર આ જેમ (એક સરળ રેખાંકિત અને ટેક્સ્ટ રંગનો ફેરફાર) તે ટેક્સ્ટ 'ક્લિક-સક્ષમ' છે અને વેબ ક્રિયાપ્રતિક્રિયામાં સુધારો સૂચવે છે. જો કે, ટેક્સ્ટ કલર અને સ્ટાઇલ (અંડરલાઈન / overવરલાઇન / બોલ્ડ) ને બદલવું એ ખૂબ જ બેઝિક્સ છે અને હોવર સાથે ઘણું વધારે કરી શકાય છે.

આ લેખમાં, હું બતાવવા જઈ રહ્યો છું કે તમે હોવર ઇફેક્ટ સાથે સારી દેખાતી લિંક્સ કેવી રીતે બનાવી શકો છો.

ઉદાહરણ 1: હોવર બટન સાથે લિંક કરો

સૌ પ્રથમ, કામના ઉદાહરણ પર એક નજર (તે કેવી રીતે કાર્ય કરે છે તે જોવા માટે લિંક પર માઉસ મૂકો - બાજુ પર આયકન બદલવું).

ઉદાહરણ 1 - હોવર બટન છબી સાથે લિંક કરો

આ ઉદાહરણમાં જે બનાવશે તે આ પૂર્ણ સંસ્કરણ છે.

આપણે તેને સાદા સીએસએસમાં કેવી રીતે બનાવીએ?

બટન છબી

પગલું 1, જેમ તમે જોઈ શકો છો, આપણને બે જુદા જુદા સંસ્કરણોમાં એક તીર આઇકોનની જરૂર છે. અમારા ઉદાહરણમાં, મેં લાલ (#CC3300) ડિફૉલ્ટ લિંક બટન તરીકે ઉપયોગ કર્યો હતો; અને હૉવર પ્રભાવ માટે ગ્રે (#333333). આવા બટનને કોઈપણ ઇમેજ એડિટિંગ સૉફ્ટવેરનો ઉપયોગ કરીને સરળતાથી બનાવી શકાય છે.

હવે આપણી પાસે લાલ રંગનું બટન છે (કહો, b1.png) અને રે રંગ (બટન કહો, b2.png). B1.png ની ટોચ પર b2.png સાથે આ બેને એક છબી ફાઇલમાં મર્જ કરો. લિંક માટે આ અમારી અંતિમ છબી હશે. નામ આપો (કહો, x.png) અને ઇચ્છિત સ્થાન અપલોડ કરો (મારા કેસ માટે, મેં તેને મારા WP ટેમ્પલેટ ફોલ્ડરમાં મૂક્યું છે).

આપના સંદર્ભ માટે:

b1.png , b2.png , અને x.png

સીએસએસ કોડ

આગળ, CSS કોડ પર. મૂળભૂત રીતે આપણે જે પ્રાપ્ત કરવા માંગીએ છીએ તે બટન માટે જગ્યા બનાવવા માટે લિંક ટેક્સ્ટને સહેજ જમણી બાજુએ ઇન્ડેંટ કરવું છે; અને તે જ સમયે, જ્યારે લિંક હોવર સ્થિતિમાં હોય ત્યારે એક અલગ છબી પ્રદર્શિત કરો. આ ખૂબ જ મૂળભૂત સામગ્રી છે સિવાય કે અમને પૃષ્ઠભૂમિ સ્થિતિ પર થોડું વળાંક જોઈએ. યુક્તિ મૂળ લિંક માટે ઇમેજ (લાલ બટન) ના ટોચના ભાગ બતાવવા માટે છે; અને જ્યારે હોવર કરો, ગ્રે બટનને બતાવવા માટે પૃષ્ઠભૂમિ છબીને એક -11px (તે તમારી વેબસાઇટ પર અલગ હોઈ શકે છે) સાથે વિખેરવું.

.xa {રંગ: # સીક્સએક્સએક્સએક્સ; પેડિંગ-ડાબે: 3300px; ફોન્ટ-વજન: બોલ્ડ; પૃષ્ઠભૂમિ-છબી: URL (છબીઓ / x.png); પૃષ્ઠભૂમિની સ્થિતિ: 14 0PX; પૃષ્ઠભૂમિ-પુનરાવર્તન: પુનરાવર્તિત; }
.xa: હોવર {રંગ: #333333; પેડિંગ-ડાબે: 14px; ફોન્ટ-વજન: બોલ્ડ; પૃષ્ઠભૂમિ-છબી: URL (છબીઓ / x.png); પૃષ્ઠભૂમિ સ્થિતિ: 0-11Px; પૃષ્ઠભૂમિ-પુનરાવર્તન: પુનરાવર્તિત; }

અમલીકરણ

આ હોવર ઇફેક્ટ બતાવવા માટે, નિયુક્ત ક્ષેત્રમાં ફક્ત ક્લાસ X દાખલ કરો. તમે કેવી રીતે કરી શકો છો તેના માટે અહીં એક ઉદાહરણ છે.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> મુખપૃષ્ઠ </a> </ p>

ઉદાહરણ 2: હોવર પૃષ્ઠભૂમિમાં લિંક કરો

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

ઉદાહરણ 2 - હોવર પૃષ્ઠભૂમિમાં લિંક

આ ઉદાહરણમાં, હું શું કરીશ બટનને પસંદ કરેલ હાયપરલિંક બનાવવા માટે જ્યાં વપરાશકર્તાઓ તેમના માઉસને તેના પર મૂકશે ત્યારે પૃષ્ઠભૂમિ બદલાશે.

આપણે તેને સાદા સીએસએસમાં કેવી રીતે બનાવીએ?

પૃષ્ઠભૂમિ છબીઓ

પ્રથમ, ગોળાકાર લંબચોરસની બે છબીઓ બનાવો. નિદર્શન હેતુ માટે, અમે આ ઉદાહરણમાં આ બે છબીઓને મર્જ કરીશું નહીં. અમે લાલ (# સીસીએક્સએનએમએક્સ) લંબચોરસને b3300.png તરીકે નામ આપીશું; અને મરૂન (#1F9) લંબચોરસ b2800.png તરીકે.

સીએસએસ કોડ

આગળ, અહીં તમારી શૈલી શીટ માટેનાં કોડ્સ છે (અમે આ બીજા ઉદાહરણમાં વર્ગ 'વાય' નામ આપીએ છીએ).

આય {પહોળાઈ: 280PX; ઊંચાઈ: 42Px; રંગ: #000000; ગાદી: 10px; લખાણ-સુશોભન: કંઈ નહીં; પ્રદર્શન: બ્લોક; ફોન્ટ-વજન: બોલ્ડ; પૃષ્ઠભૂમિ-છબી: URL (છબીઓ / b1.png); પૃષ્ઠભૂમિ-પુનરાવર્તન: પુનરાવર્તિત; }
આય: હોવર {પહોળાઈ: 280PX; ઊંચાઈ: 42Px; રંગ: # એફએફએફએફએફએફ; ગાદી: 10px; ફોન્ટ-વજન: બોલ્ડ; લખાણ-સુશોભન: કંઈ નહીં; પ્રદર્શન: બ્લોક; પૃષ્ઠભૂમિ-છબી: URL (છબીઓ / b2.png); પૃષ્ઠભૂમિ-પુનરાવર્તન: પુનરાવર્તિત; }

અમલીકરણ

લિંક પ્રદર્શિત કરવા માટે, વર્ગ (વાય) ને તમારા સ્રોત કોડમાં <a href> ટેગમાં શામેલ કરો. ઉદાહરણ:

<a href="http://www.webhostingsecretrevealed.com" class="y"> મુખપૃષ્ઠ </a>

લપેટવું

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

વધુ સીએસએસ ટ્યુટોરિયલ્સ

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

જેરી લો વિશે

WebHostingSecretRevealed.net (WHSR) ના સ્થાપક - હોસ્ટિંગ સમીક્ષા વિશ્વસનીય અને 100,000 ના વપરાશકર્તાઓ દ્વારા ઉપયોગમાં લેવાય છે. વેબ હોસ્ટિંગ, એફિલિએટ માર્કેટિંગ અને એસઇઓ માં 15 વર્ષથી વધુનો અનુભવ. ProBlogger.net, Business.com, SocialMediaToday.com અને વધુ માટે ફાળો આપનાર.

n »¯