છબીઓ સાથે સીએસએસ મદદથી

સ્ટાઇલમાં તમારી છબીઓ અને છબીઓનો ઉપયોગ કરો

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

છબીને બદલવી

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

• છબીઓની સીમા અથવા બાહ્યરેખા ઉમેરો
• કડી થયેલ છબીઓ આસપાસ રંગીન સરહદ દૂર કરો
• છબીઓની પહોળાઈ અને / અથવા ઊંચાઈને વ્યવસ્થિત કરવી
• ડ્રોપ છાયા ઉમેરો
• છબીને ફેરવો
• શૈલીઓ જ્યારે ઇમેજ પર હોવર થાય છે ત્યારે બદલો

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

img {
સરહદ: 1 પીએક્સ ઘન કાળો;
ગાદી: 5 પીએક્સ;
}

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

img> a {
સરહદ: કોઈ નહીં;
}

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

યાદ રાખો, જ્યારે તમે ઈમેજોનું કદ બદલી દો છો, શ્રેષ્ઠ પરિણામો માટે, તમારે માત્ર એક પરિમાણનું કદ બદલવું જોઈએ - ઊંચાઇ અથવા પહોળાઈ આ વાતની ખાતરી કરશે કે છબી તેના પાસા રેશિયોને જાળવી રાખે છે, અને તે વિચિત્ર લાગતી નથી. અન્ય કિંમતને સ્વયંચાલિત રૂપે સેટ કરો અથવા બ્રાઉઝરને પાસા રેશિયો સુસંગત રાખવા માટે જણાવો.

img {
પહોળાઈ: 50%;
ઊંચાઈ: ઓટો;
}

CSS3 નવી સમસ્યા પદાર્થ-ફિટ અને ઑબ્જેક્ટ-પોઝિશન સાથે આ સમસ્યાનો ઉકેલ આપે છે. આ ગુણધર્મો સાથે તમે ચોક્કસ ઇમેજ ઊંચાઇ અને પહોળાઈને વ્યાખ્યાયિત કરી શકશો અને કેવી રીતે પાસા રેશિયો નિયંત્રિત કરવો જોઈએ. આનાથી તમારી છબીઓની આસપાસ લેટરબોક્સિંગ અસર અથવા છબીને આવશ્યક કદમાં ફિટ કરવા માટે ખેતી થઈ શકે છે

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

બેકગ્રાઉન્ડ્સ તરીકે છબીઓનો ઉપયોગ કરવો

સીએસએસ તમારી છબીઓ સાથે ફેન્સી બેકગ્રાઉન્ડ બનાવવાનું સરળ બનાવે છે.

તમે સમગ્ર પૃષ્ઠ અથવા માત્ર એક વિશિષ્ટ તત્વ પર બેકગ્રાઉન્ડ ઉમેરી શકો છો. બેકગ્રાઉન્ડ છબીની મિલકત સાથે પૃષ્ઠ પર પૃષ્ઠભૂમિ છબી બનાવવાનું સરળ છે:

શરીર {
પૃષ્ઠભૂમિ છબી: url (background.jpg);
}

બેકગ્રાઉન્ડને માત્ર એક ઘટક પર મૂકવા માટે, પૃષ્ઠ પર ચોક્કસ ઘટકમાં શરીર પસંદગીકારને બદલો.

ઈમેજો સાથે તમે કરી શકો તેવી બીજો મનોરંજક વસ્તુ પૃષ્ઠભૂમિ છબી બનાવવી છે જે બાકીના પૃષ્ઠ સાથે સ્ક્રોલ કરતી નથી - વોટરમાર્ક જેવી. તમે ફક્ત શૈલી પૃષ્ઠભૂમિ-જોડાણનો ઉપયોગ કરો છો: નિશ્ચિત; તમારી પૃષ્ઠભૂમિ છબી સાથે તમારા બેકગ્રાઉન્ડમાં માટેના અન્ય વિકલ્પોમાં તેમને પૃષ્ઠભૂમિ-પુનરાવર્તિત મિલકતનો ઉપયોગ કરીને માત્ર આડા અથવા ઊભી ટાઇલ બનાવે છે.

પૃષ્ઠભૂમિ-વારંવાર લખો: પુનરાવર્તન- x; ઇમેજને આડા અને બેકગ્રાઉન્ડ પુનરાવર્તન કરવા માટે ટિપ કરો: repeat-y; ઊભું ટાઇલ કરવા માટે અને તમે બેકગ્રાઉન્ડ-પોઝિશન પ્રોપર્ટી સાથે તમારી પૃષ્ઠભૂમિ છબીને ગોઠવી શકો છો.

અને CSS3 તેમજ તમારા બેકગ્રાઉન્ડમાં માટે વધુ શૈલીઓ ઉમેરે છે. તમે તમારી છબીઓને કોઈ પણ કદની પૃષ્ઠભૂમિમાં ફિટ કરી શકો છો અથવા બૅગની છબીને માપવા માટે પૃષ્ઠભૂમિ છબી સેટ કરી શકો છો. તમે સ્થિતિને બદલી શકો છો અને પછી પૃષ્ઠભૂમિ છબીને ક્લીપ કરી શકો છો. પરંતુ CSS3 વિશે શ્રેષ્ઠ વસ્તુઓ પૈકી એક એવી છે કે તમે હવે બહુવિધ પૃષ્ઠભૂમિ છબીઓને વધુ જટિલ અસરો બનાવવા માટે સ્તર બનાવી શકો છો.

HTML5 પ્રકાર છબીઓ મદદ કરે છે

એચટીએમએલ 5 માં ફિગરેર તત્વ કોઈ પણ ઈમેજોની આસપાસ હોવું જોઈએ જે દસ્તાવેજમાં એકલા ઊભા કરી શકે છે. તે વિશે વિચારવાનો એક રીત એ છે કે જો છબી એપેન્ડિક્સમાં દેખાશે, તો તે FIGURE તત્વની અંદર હોવી જોઈએ. પછી તમે તમારી તસવીરોમાં સ્ટાઇલ ઉમેરવા માટે તે તત્વ અને FIGCAPTION ઘટકનો ઉપયોગ કરી શકો છો.