કેવી રીતે IFrames વેબસાઇટ ડિઝાઇનમાં કામ કરે છે તે સમજવું
જ્યારે તમે તમારા HTML માં તત્વને એમ્બેડ કરો છો, ત્યારે તમારી પાસે CSS સ્ટાઇલ ઉમેરવાની બે તક છે:
- તમે જાતે IFRAME શૈલી કરી શકો છો
- તમે IFRAME (ચોક્કસ શરતો હેઠળ) ની અંદર પૃષ્ઠને સ્ટાઇલ કરી શકો છો.
IFRAME એલિમેન્ટને પ્રકાર આપવા CSS નો ઉપયોગ કરવો
તમારા iframes સ્ટાઇલ કરતી વખતે તમારે પ્રથમ વસ્તુ આઇએફઆરએઇ (IFRAME) છે તે વિચારવું જોઈએ. જ્યારે મોટા ભાગના બ્રાઉઝર્સમાં અતિરિક્ત શૈલીઓ વિના આઇફ્રમ્સનો સમાવેશ થાય છે, તેમ છતાં તે સતત રાખવા માટે કેટલીક શૈલીઓ ઉમેરવાનો એક સારો વિચાર છે
અહીં કેટલીક સીએસએસ સ્ટાઇલ છે જે હું હંમેશા મારા iframes પર શામેલ કરું છું.
- હાંસિયો: 0;
- પેડિંગ: 0;
- સરહદ: કોઈ નહીં;
- પહોળાઈ: મૂલ્ય ;
- ઊંચાઈ: મૂલ્ય ;
મારા ડોક્યુમેન્ટમાં બંધબેસતા માપને પહોળાઈ અને ઊંચાઈ સાથે સુયોજિત કરો. અહીં કોઈ શૈલીઓ ધરાવતી ફ્રેમના ઉદાહરણો નથી અને એક જ રીતની મૂળભૂત શૈલીઓ છે. જેમ તમે જોઈ શકો છો, આ શૈલીઓ મોટે ભાગે ફક્ત iframe ની આસપાસ સરહદને દૂર કરે છે, પરંતુ તેઓ એ પણ સુનિશ્ચિત કરે છે કે બધા બ્રાઉઝર્સ તે જ માર્જિન, પેડિંગ અને પરિમાણો સાથે iframe દર્શાવે છે.
HTML5 ભલામણ કરે છે કે તમે સ્ક્રોલ બારને દૂર કરવા માટે ઓવરફ્લો ગુણધર્મનો ઉપયોગ કરો છો, પરંતુ તે વિશ્વસનીય નથી. તેથી જો તમે સ્ક્રોલ બારને દૂર કરવા અથવા બદલવા માંગો છો, તો તમારે તમારા iframe પર સ્ક્રોલિંગ એટ્રીબિટનો ઉપયોગ કરવો જોઈએ. સરકાવનાર લક્ષણનો ઉપયોગ કરવા માટે, તેને અન્ય કોઈ વિશેષતા તરીકે ઉમેરો અને પછી ત્રણ મૂલ્યોમાંથી એક પસંદ કરો: હા, ના, અથવા સ્વતઃ હા, બ્રાઉઝરને હંમેશા સ્ક્રોલ બારને શામેલ કરવા માટે કહે છે, જો તે જરૂરી નથી. જરૂરી નથી કે નહી તે બધા સ્ક્રોલ બારને દૂર કરવા માટે નહીં.
ઓટો ડિફોલ્ટ છે અને જ્યારે જરૂર પડે ત્યારે સ્ક્રોલ બાર શામેલ કરે છે અને જ્યારે તે ન હોય ત્યારે તેમને દૂર કરે છે.
સ્ક્રોલિંગ વિશેષતા સાથે સ્ક્રોલિંગને કેવી રીતે બંધ કરવું તે અહીં છે:
સરકાવનાર = "ના" >
આ એક iframe છે.
HTML5 માં સ્ક્રોલિંગને બંધ કરવા માટે તમે ઓવરફ્લો પ્રોપર્ટીનો ઉપયોગ કરવા માટે માનવામાં આવે છે પરંતુ જેમ તમે આ ઉદાહરણોમાં જોઈ શકો છો તેમ તે હજુ સુધી તમામ બ્રાઉઝર્સમાં વિશ્વસનીય રીતે કામ કરતું નથી.
ઓવરફ્લો સંપત્તિ સાથે તમે કેવી રીતે સ્ક્રોલિંગ કરો છો તે અહીં છે:
શૈલી = "ઓવરફ્લો: સ્ક્રોલ;" >
આ એક iframe છે.
ઓવરફ્લો સંપત્તિ સાથે સ્ક્રોલિંગને સંપૂર્ણપણે બંધ કરવાની કોઈ રીત નથી.
ઘણાં ડિઝાઇનરો ઇચ્છે છે કે તેમના આફ્રેમ્સને પૃષ્ઠ પરની પૃષ્ઠભૂમિની સાથે મિશ્રણ કરવું પડે, જેથી વાચકોને ખબર ન હોય કે આફ્રીમ્સ ત્યાં પણ છે. પરંતુ તમે તેમને ઊભા કરવા માટે શૈલીઓ પણ ઉમેરી શકો છો. સરહદો સમાયોજિત કરો જેથી આઈફ્રેમ વધુ સહેલાઇથી દેખાય. માત્ર સીમા શૈલીની મિલકતનો ઉપયોગ કરો (અથવા તે સીમા-સરહદ, સરહદ-સરહદ, સરહદ-ડાબે અને સરહદ-તળિયાની સંપત્તિઓ સાથેની સરહદોને શૈલીમાં):
iframe {
સરહદની ટોચ: # c00 1px ડોટેડ;
સરહદ-જમણે: # c00 2px ડોટેડ;
સરહદ-ડાબે: # c00 2px ડોટેડ;
સીમા-નીચે: # c00 4px ડોટેડ;
}
પરંતુ તમારે તમારા શૈલીઓ માટે સ્ક્રોલિંગ અને કિનારીઓ સાથે બંધ ન થવું જોઈએ. તમે તમારા iframe પર અન્ય ઘણી CSS શૈલીઓ અરજી કરી શકો છો. આ ઉદાહરણ આઇફ્રેમ શેડો, ગોળાકાર ખૂણાઓ આપવા માટે CSS3 શૈલીઓનો ઉપયોગ કરે છે અને તેને 20 ડિગ્રી ફેરવાય છે
iframe {
માર્જિન-ટોચ: 20 પીએક્સ;
હાંસિયો નીચે: 30px;
-મોઝ-સીમા-ત્રિજ્યા: 12px;
-વેબકીટ-સીમા-ત્રિજ્યા: 12 પીએક્સ;
સરહદ-ત્રિજ્યા: 12px;
-મોઝ-બૉક્સ-છાયા: 4 પીએક્સ 4px 14px # 000;
-વેબકીટ-બોક્સ-શેડો: 4 પીએક્સ 4px 14px # 000;
બોક્સ-શેડો: 4 પીએક્સ 4px 14px # 000;
-મોઝ-ટ્રાન્સફોર્મ: ફેરવો (20 ડિગ્રી);
-વેબકીટ-ટ્રાન્સફોર્મ: ફેરવો (20 ડિગ્રી);
-ઓ-પરિવર્તન: ફેરવો (20 ડિગ્રી);
-એમએસ-ટ્રાન્સફોર્મ: ફેરવો (20 ડિગ્રી);
ફિલ્ટર: પ્રોગિડ: DXImageTransform.Microsoft.BasicImage (રોટેશન = .2);
}
જો ઇફ્રામ સામગ્રીઓનું સ્ટાઇલ
એક iframe ની સામગ્રીને સ્ટાઇલ કરવું એ કોઈ અન્ય વેબ પૃષ્ઠને સ્ટાઇલ કરવાનું છે પરંતુ, તમારી પાસે પૃષ્ઠ સંપાદિત કરવાની ઍક્સેસ હોવી આવશ્યક છે . જો તમે પૃષ્ઠને સંપાદિત કરી શકતા નથી (ઉદાહરણ તરીકે, તે બીજી સાઇટ પર છે)
જો તમે પૃષ્ઠને સંપાદિત કરી શકો છો, તો પછી તમે તમારી સાઇટ પર કોઈપણ અન્ય વેબ પૃષ્ઠને શૈલીની જેમ જ દસ્તાવેજમાં બાહ્ય શૈલી શીટ અથવા શૈલીઓ ઉમેરી શકો છો.