छवियों को सुधारते समय हम इसे फ़ोटोशॉप के साथ चुन सकते हैं और फिर इसे वेब पेज पर माउंट कर सकते हैं या हम विकल्प बी भी चुन सकते हैं: एचटीएमएल, सीएसएस और जावास्क्रिप्ट तकनीकों के साथ करें जो उपलब्ध हैं।
छलांग के बाद छवियों को बेहतर बनाने के लिए कई तकनीकें हैं, उनमें से लगभग सभी को मुख्य आधार के रूप में या CSS3 के साथ jQuery के साथ बनाया गया है नवीनतम वेब मानकों का लाभ उठाते हुए, हालांकि मैं आपको याद दिलाता हूं कि उस स्थिति में हम कुछ ब्राउज़रों के साथ संगतता खो देते हैं।
वे अंग्रेजी में हैं, लेकिन वे मक्खी पर पकड़े गए, वादा किया गया :)
स्रोत | पहला डब्ल्यूडी
CSS3 गोल छवि jQuery के साथ
गोल छवियों को प्राप्त करने के लिए छवि तत्व के चारों ओर एक स्पैन टैग लपेटना सीखें जो सभी आधुनिक ब्राउज़रों में सही प्रदर्शित किया जाएगा।
2.
सीएसएस 2.1 के साथ कई पृष्ठभूमि और सीमाएँ
जानें कि कैसे सीएसएस 2.1 छद्म तत्वों का उपयोग करने के लिए 3 पृष्ठभूमि कैनवस, 2 निश्चित आकार के प्रस्तुति चित्र, और एक HTML तत्व के लिए कई जटिल सीमाएँ प्रदान की जाती हैं।
3.
त्वरित युक्ति: सरल सीएसएस के साथ कई सीमाएँ
त्वरित दिखाता है कि आप सरल सीएसएस के साथ कई सीमाओं को कैसे प्राप्त कर सकते हैं जो आपके डिजाइनों में अधिक गहराई जोड़ते हैं। पिछले ट्यूटोरियल का बहुत सरल संस्करण।
4.
CSS2 के साथ गतिशील रूप से आकार वाले तत्वों पर एकाधिक सीमाएँ
का तीसरा संस्करण निकोलस गैलाघर यदि आप तत्व का आकार नहीं दिखाते हैं तो आपको क्या करना है।
5.
मज़ा w / सीमाएँ - Beveled, दबाया, और अधिक!
विभिन्न प्रभावों को प्राप्त करने के लिए सीएसएस और कुछ सरल बॉर्डर स्टाइल ट्रिक्स के साथ दबाया गया प्रभाव प्राप्त करना सीखें।
6.
CSS3 के साथ पोलारॉयड
पोलरॉइड चित्रों के पूर्ण-विकसित सेट में छवियों की अन्यथा अनुपलब्ध सूची को चालू करने के लिए कुछ भयानक CSS2 और CSS3 का उपयोग करना सीखें।
7.
परफेक्ट फुल पेज बैकग्राउंड इमेज
सीएसएस के साथ पृष्ठभूमि छवि जोड़ना सीखें जो पूरे पृष्ठ को छवि के साथ भर देता है, कोई सफेद स्थान नहीं, छवि को आवश्यकतानुसार, स्क्रॉलबार और बहुत कुछ नहीं करता है।
8.
CSS3 बॉक्स छाया और छवि हॉवर प्रभाव
सिर्फ एक स्टाइल शीट को संपादित करके ड्रॉप शैडो इफेक्ट्स को जोड़ने का एक नया तरीका खोजें।
9.
फैंसी थंबनेल हॉवर प्रभाव w / jQuery
सीएसएस और jQuery के साथ स्वच्छ फ्लैश शैली प्रभाव प्राप्त करें।
10.
कैसे सरल सीएसएस छवि रोलओवर प्रभाव बनाने के लिए
इस ट्यूटोरियल में आप मूल HTML और सीएसएस स्टाइल के साथ सरल सीएसएस छवि रोलओवर प्रभाव बनाने का तरीका जानने जा रहे हैं।
11.
तैरने की क्रिया
फ़्लोटिफ़ायर आपको फ़्लोटिंग तत्वों जैसे कि इमेज, ड्रॉप कैप, नेक्स्ट और बैक बटन, इमेज गैलरी, इनलाइन लिस्ट और मल्टी-कॉलम लेआउट के मूल के माध्यम से ले जाता है। चल छवि के लिए समर्पित 4 ट्यूटोरियल देखें।
12.
सीएसएस का उपयोग कर Snazzy हॉवर प्रभाव
इस ट्यूटोरियल में, आप CSS2.1 गुणों का उपयोग करके लचीली उन्नत होवर तकनीक बनाने जा रहे हैं।
13.
फास्ट रोलओवर के बिना
प्रीलोड
सीएसएस छवि रोलओवर का उपयोग करते समय, दो, तीन, या अधिक छवियों को लोड किया जाना चाहिए (और अक्सर सर्वोत्तम परिणामों के लिए पहले से लोड किया जाना चाहिए)। जानें कि सभी राज्यों को एक छवि में कैसे रखा जाए, यह गतिशील परिवर्तन को तेज करता है और इसके लिए किसी भी प्रकार का कोई बोझ नहीं होना चाहिए।
14.
jQuery के गोल कोनों
गोल कोनों और बहुत अधिक पैटर्न के लिए बहुत सारे jQuery के प्रभाव।
15.
सबसे आसान टूलटिप और छवि पूर्वावलोकन jQuery का उपयोग कर
JQuery रोलओवर पूर्वावलोकन स्क्रिप्ट का उपयोग करने के 3 उदाहरण देखें। इस सरल स्क्रिप्ट को कई उद्देश्यों के लिए लागू किया जा सकता है।
16.
Supersized - पूर्ण स्क्रीन पृष्ठभूमि /
स्लाइड शो
jQuery प्लगइन
Superzided एक jQuery प्लगइन है जो छवि आयाम अनुपात को बनाए रखते हुए ब्राउज़र को भरने के लिए छवियों का आकार बदलता है और बदलावों और प्रीलोडिंग के साथ स्लाइडशो के माध्यम से छवियाँ / पृष्ठभूमि को चक्रित करता है।
17.
पीएनजी ओवरले
क्या आपने कभी क्लाइंट द्वारा दी गई तस्वीरों के साथ साइट बनाने की समस्या में भाग लिया है, केवल बाद में खोजने के लिए जब वे अपनी फोटोग्राफी को मूल रूप से अपडेट करते हैं और महसूस नहीं किया जाता है? इस समाधान में एक पारदर्शी पीएनजी ओवरले बनाना शामिल है जिसे नियमित जेपीईजी या जीआईएफ के आसपास मास्क / फ्रेम के रूप में उपयोग किया जा सकता है। इस तरह, एक विशिष्ट सीएमएस इंस्टॉलेशन को कॉन्फ़िगर किया जा सकता है ताकि उपयोगकर्ता फ़िल्टर लागू करने के लिए किसी भी ग्राफिक्स प्रोग्राम का उपयोग करने के बारे में चिंता किए बिना फोटो अपलोड कर सकें।
18.
बेजूम
lighweight
JQuery
ज़ूम प्लगइन
बेजूम इसके लिए एक सरल और हल्का विकल्प है जेक्यूज़ूम। यह हल्का है और इसका उपयोग करना आसान है।
19.
पृष्ठभूमि छवि एनिमेशन के लिए jQuery का उपयोग करना
JQuery के साथ खेलें और आप जिस प्रकार के प्रभाव की तलाश कर रहे हैं, उसे बनाने के लिए पृष्ठभूमि छवि की स्थिति बदलें। एक नया लेख है, "मैं सक्रिय राज्यों को कैसे संभाल सकता हूं?" - JQuery एनिमेटेड पृष्ठभूमि के लिए सक्रिय राज्य को संभालना.
20.
सीएसएस के साथ अपनी छवियों को मसाला करने के 5 तरीके
अपनी विशिष्ट ब्लाॅंड छवियों में कुछ स्वाद जोड़ने के लिए यहां कुछ सरल ट्रिक्स दिए गए हैं। फ़ोटोशॉप का उपयोग करके प्रत्येक छवि को लंबे समय तक बनाए रखने के लिए थकाऊ और कठिन हो सकता है। निम्नलिखित सीएसएस तकनीकें आपको उस दर्द को कम करने में मदद करेंगी।
21.
कैसे:
resizeable
पृष्ठभूमि छवि
जानें कि सीएसएस के साथ रेजिजेबल बैकग्राउंड इमेज कैसे सेट करें। आपके पास चुनने के लिए 3 विकल्प हैं।
22.
स्टाइल योर इमेज लिंक्स
उपयोगकर्ताओं को यह बताना कि हमारी वेबसाइट के विशेष खंड पर क्लिक करने का मतलब है कि माउस को प्रभाव के माध्यम से सबसे अच्छा हासिल किया गया है। उन "क्लिक करने योग्य" अनुभागों में निश्चित रूप से सामग्री चित्र शामिल हैं। छवि लिंक एक स्क्रिप्ट है जो आपको अपनी छवि लिंक पर अतिरिक्त स्टाइल लागू करने में सक्षम बनाती है।
23.
सीएसएस के साथ एकाधिक पृष्ठभूमि छवियाँ
कई बार, पृष्ठभूमि चित्रों को सीधे पेज में डालने की तुलना में इसका उपयोग करना अधिक समझ में आता है। और जब प्रत्येक तत्व - जैसे आपका शरीर टैग - केवल एक पृष्ठभूमि छवि को पकड़ सकता है, तो उन्हें कई तत्वों पर लागू किया जा सकता है।
24.
छवि सीमाओं सीएसएस के साथ
सीएसएस का उपयोग करके छवियों को ठोस सीमा जोड़ने के लिए वास्तव में आसान ट्यूटोरियल आपको दिखा रहा है।
25.
पृष्ठभूमि छवियों का उपयोग किए बिना सीएसएस स्प्राइट्स
सीएसएस स्प्राइट्स के बारे में बहुत सारे ज्ञान के बिना होवर प्रभाव को लागू करने का तरीका जानें।
