आपल्या प्रतिमा शैली आणि शैली मध्ये प्रतिमा वापरा
बरेच लोक मजकूर समायोजित करण्यासाठी, फॉन्ट बदलून, रंग, आकार आणि अधिकसाठी सीएसएस वापरतात. पण एक गोष्ट जी बहुतेक लोक विसरतात ती म्हणजे तुम्ही सीएसएस सोबत चित्रांचा उपयोग करू शकता.
प्रतिमा स्वतः बदलत आहे
सीएसएस आपल्याला पृष्ठावरील प्रतिमा कसे दर्शविते हे समायोजित करण्याची परवानगी देते. हे आपले पृष्ठ सुसंगत ठेवण्यासाठी खरोखर उपयोगी असू शकते. सर्व प्रतिमांवर शैली सेट करून, आपण आपल्या प्रतिमासाठी मानक देखावा तयार करा आपण करू शकता त्यापैकी काही गोष्टी:
- प्रतिमाभोवती सीमा किंवा बाह्यरेखा जोडा
- लिंक केलेल्या छायाचित्रंभोवती रंगीत सीमा काढा
- प्रतिमांची रूंदी आणि / किंवा उंची समायोजित करणे
- एक ड्रॉप सावली जोडा
- प्रतिमा फिरवा
- प्रतिमा जेव्हा वर दिसते तेव्हा शैली बदला
आपली प्रतिमा एक सीमा प्रदान करणे प्रारंभ करण्यासाठी एक उत्तम जागा आहे. परंतु आपण फक्त सीमापेक्षा अधिक विचार करावा - आपल्या प्रतिमेच्या संपूर्ण काठावर विचार करा आणि मार्जिन आणि पॅडिंग देखील समायोजित करा. पातळ काळ्या किनारसह असलेली प्रतिमा छान दिसते, परंतु सीमा आणि प्रतिमा दरम्यान काही पॅडिंग जोडणे आणखी चांगले दिसू शकते.
img {
सीमा: 1 पीएक्स घन काळा;
पॅडिंग: 5px;
}
जेव्हा शक्य असेल तेव्हा गैर-सजावटी प्रतिमा नेहमी जोडणे एक चांगली कल्पना आहे परंतु जेव्हा आपण हे कराल, तेव्हा लक्षात ठेवा की बर्याच ब्राउझरमध्ये प्रतिमाभोवती रंगीत सीमा जोडली जाते. जरी आपण सीमा बदलण्यासाठी वरील कोडचा वापर करीत असला तरीही दुवा आपण अधिलिखित करेल किंवा जोपर्यंत आपण दुव्यावर सीमा हटवत नाही किंवा बदलत नाही तोपर्यंत हे करण्यासाठी आपण जोडलेल्या प्रतिमांवरील सीमा काढण्यासाठी किंवा बदलण्यासाठी सीएसएस बाल नियम वापरणे आवश्यक आहे:
img> a {
सीमा: काहीही नाही;
}
आपल्या चित्रांची उंची आणि रुंदी बदलण्यासाठी किंवा सेट करण्यासाठी आपण सीएसएस वापरू शकता. डाउनलोड स्पीडमुळे फोटो आकार समायोजित करण्यासाठी ब्राऊझर वापरणे ही चांगली कल्पना नसली तरी, प्रतिमा प्रतिमांवर अधिक चांगले मिळत आहे जेणेकरून ते अजूनही छान दिसतील. आणि CSS सह आपण आपल्या प्रतिमा सर्व एक मानक रूंदी किंवा उंची सेट करू शकता किंवा अगदी कंटेनर संबंधित परिमाण सेट.
लक्षात ठेवा, जेव्हा आपण प्रतिमांचे आकार बदलतो, तेव्हा उत्कृष्ट परिणामांसाठी, आपण फक्त एक आकारमान - उंची किंवा रुंदीचे आकार बदलले पाहिजे. हे प्रतिरूप करेल की प्रतिमा त्याच्या पक्ष अनुपात कायम करते, आणि म्हणून विचित्र दिसत नाही. इतर मूल्य स्थिर करण्यासाठी सेट करा किंवा ब्राउझरला पक्ष अनुपात अनुपालन ठेवण्यासाठी सांगा.
img {
रुंदीः 50%;
उंची: स्वयं;
}
CSS3 या समस्येचा नवीन गुणधर्म वस्तू-तंदुरुस्त आणि ऑब्जेक्ट-पोझिशनसह निराकरण करते. या गुणधर्मांसह आपण अचूक इमेजची उंची, रुंदी आणि पक्ष अनुपात कसे हाताळले जावे हे स्पष्ट करू शकता. हे आवश्यक असलेल्या आकारात फिट होण्यास प्रतिमा मिळविण्यासाठी आपल्या प्रतिमांभोवतीच्या लेटरबॉक्सिंग प्रभाव किंवा क्रॉपिंग तयार करू शकते.
CSS3 ऑब्जेक्ट-फिट आणि ऑब्जेक्ट-पॉझिटी गुणधर्म अद्याप मोठ्या प्रमाणावर समर्थित नसले तरी, इतर CSS3 गुणधर्म आहेत जे बहुतांश आधुनिक ब्राऊजरमध्ये समर्थित आहेत जे आपण आपल्या प्रतिमा सुधारित करण्यासाठी वापरू शकता. ड्रॉप छाया, गोलाकार कोप, आणि परिवर्तनासारख्या गोष्टी फिरवण्याकरिता, तिरका, किंवा आपल्या प्रतिमा हलविण्यासाठी सर्व आधुनिक ब्राउझरमध्ये सध्या कार्य करतात. आपण नंतर वेळोवेळी, किंवा क्लिक केल्यावर, किंवा फक्त काही काळानंतर प्रतिमा बदलण्यासाठी सीएसएस संक्रमणे वापरू शकता.
पार्श्वभूमी म्हणून प्रतिमा वापरणे
सीएसएस आपल्या प्रतिमा सह फॅन्सी पार्श्वभूमी तयार करणे सोपे करते.
आपण संपूर्ण पृष्ठावर किंवा केवळ एका विशिष्ट घटकास बॅकग्राउंड जोडू शकता. पार्श्वभूमी-प्रतिमा मालमत्तेसह पृष्ठावर पार्श्वभूमी प्रतिमा तयार करणे सोपे आहे:
शरीर {
पार्श्वभूमी-प्रतिमा: यूआरएल (background.jpg);
}
पार्श्वभूमीवर फक्त एका घटकास ठेवण्यासाठी पृष्ठावर एका विशिष्ट घटकासाठी शरीर निवडकर्ता बदला.
इमेजसह आपण आणखी एक मजेदार गोष्ट तयार करू शकता जी एक पार्श्वभूमी तयार करणारी आहे जी उर्वरित पृष्ठावर स्क्रोल करीत नाही - वॉटरमार्कसारखी. आपण फक्त शैलीतील पार्श्वभूमी-संलग्नक: निश्चित; आपल्या पार्श्वभूमी प्रतिमेसह आपल्या पार्श्वभूमीसाठी इतर पर्याय पार्श्वभूमी-पुनरावृत्ती गुणधर्म वापरून फक्त क्षैतिज किंवा अनुलंब टाइल बनविणे यात समाविष्ट करतात
पार्श्वभूमी-पुनरावृत्ती लिहा: repeat-x; प्रतिमा क्षैतिज आणि पार्श्वभूमी पुन्हा टाइल करण्यासाठी: पुनरावृत्ती- y; अनुलंब टाइल करण्यासाठी आणि आपण आपल्या पार्श्वभूमीच्या प्रतिमेला पार्श्वभूमी-स्थितीतील मालमत्ता देऊन ठेऊ शकता.
आणि CSS3 आपल्या पार्श्वभूमीसाठी तसेच अधिक शैली जोडते. आपण आपली प्रतिमा कोणत्याही आकाराच्या पार्श्वभूमीवर फिट करू शकता किंवा पार्श्वभूमी प्रतिमा विंडो स्केलसह मोजण्यासाठी सेट करू शकता. आपण स्थान बदलू शकता आणि नंतर पार्श्वभूमी प्रतिमा क्लिप करू शकता. परंतु CSS3 बद्दल सर्वोत्तम गोष्टींपैकी एक म्हणजे आपण अधिक जटिल प्रभाव निर्माण करण्यासाठी आता एकाधिक पार्श्वभूमी प्रतिमा आणू शकता.
HTML5 प्रतिमा शैलींना मदत करते
HTML5 मधील फिगरेन्ट घटकास कोणत्याही प्रतिमाभोवती ठेवावे जे डॉक्युमेंटमध्ये एकटे उभे राहतील. त्याबद्दल विचार करण्याचा एक मार्ग आहे की प्रतिमा एखाद्या परिशिष्टात दिसू शकते, तर ती FIGURE घटकांच्या आत असली पाहिजे. आपण आपल्या प्रतिमांमधे शैली जोडण्यासाठी त्या घटक आणि FIGCAPTION घटक वापरू शकता.