CSS3 अनुवाद चांगले फेड प्रभाव तयार करा
जेव्हा वेबसाईटने सीझन पाहिला तेव्हा ते तयार होत असलेल्या पृष्ठांवर वेब डिझायनर्सना अधिक नियंत्रण हवे होते. CSS3 मध्ये ओळखल्या जाणार्या नवीन शैलींनी वेब प्रोफेशन्सला फोटोशॉप सारख्या प्रभावाने त्यांच्या पृष्ठांवर जोडण्याची क्षमता दिली. यात ड्रॉप छाया आणि ग्लो , गोलाकार कोपर्स आणि अधिक सारख्या गुणधर्मांचा समावेश आहे. CSS3 ने अॅनिमेशनसारखी प्रभाव देखील तयार केले ज्या साइटवर छान परस्परसक्रियता निर्माण करण्यासाठी वापरल्या जाऊ शकतात.
आपण CSS3 वापरुन आपल्या वेबसाइटवरील घटकांमध्ये जोडू शकता हे एक अतिशय छान दृश्यास्पद प्रभाव म्हणजे अपारदर्शकतेसाठी आणि संक्रमणाच्या गुणधर्मांच्या संयोगाचा वापर करून त्यांना फिकट आणि बाहेर काढा. साइट अभ्यागत काही करतो तेव्हा त्या विषयावर घिरट्यांप्रमाणे फलनाच्या क्षेत्रास बनवून आपल्या पृष्ठांना अधिक परस्परसंवादी बनविण्याचा हा एक सोपा आणि उत्कृष्ट आधार आहे.
आपल्या वेब पृष्ठांवरील विविध घटकांपर्यंत हे संवाद दृश्य प्रभाव जोडणे किती सोपे आहे ह्यावर एक नजर टाकूया ..
होव्हरवरील 'ऑप्सीसी' बदलू या
जेव्हा ग्राहक त्या घटकावर फिरत असतो तेव्हा आम्ही एका प्रतिमेची अस्पष्टता कशी बदलावी हे पाहणार आहोत. या उदाहरणासाठी (HTML खाली दर्शविले आहे) मी ग्रेडआउटच्या क्लास विशेषतासह एक प्रतिमा वापरत आहे.
ते गुंतागुंतीचे बनविण्यासाठी, आम्ही आमच्या सीएसएस स्टाइलशीटमध्ये खालील शैली नियम जोडतो:
.greydout {
-विबिट-अपारदर्शकता: 0.25;
-मोज-ऑपॅटीसी: 0.25;
अपारदर्शकता: 0.25;
}
या अपारदर्शकता सेटिंग्ज 25% मध्ये अनुवादित करतात याचाच अर्थ आहे की ही प्रतिमा तिची सामान्य पारदर्शकता 1/4 असे दर्शविली जाईल. पारदर्शकता नसलेले संपूर्ण अपारदर्शक 100% असेल तर 0% संपूर्णपणे पारदर्शक असतील.
पुढे, प्रतिमा स्पष्टपणे स्पष्ट (किंवा अधिक अचूकपणे, पूर्णपणे अपारदर्शक होण्यासाठी) तयार करण्यासाठी जेव्हा माउस त्यावरून घेईल, तेव्हा आपण: हॉझर स्यूडो-क्लास जोडू:
.greydout: होव्हर {
-webkit-opacity: 1;
-मोज-ऑपॅटीसी: 1;
अपारदर्शकता: 1;
}
आपण हे लक्षात येईल की, या उदाहरणांसाठी, मी ब्राउझरच्या जुन्या आवृत्तीसाठी बॅकअप सुसंगतता सुनिश्चित करण्यासाठी नियमांच्या विक्रेत्याच्या प्रिफिक्समध्ये वापरत आहे. हे एक चांगले सराव असले तरी, वास्तविकता म्हणजे अपारदर्शकता नियम आता ब्राऊझर्सद्वारे समर्थीत आहे आणि त्या विक्रेता प्रिफिक्स रेषा ड्रॉप करणे खूपच सुरक्षित आहे. अद्याप, आपण जुन्या ब्राउझर आवृत्त्यांकरिता समर्थन सुनिश्चित करू इच्छित असल्यास या प्रिफिक्सचा समावेश न करण्याचे काही कारण नाही. शैलीची नेहमीची, पूर्व-प्रीफिक्स्ड आवृत्तीसह घोषणा समाप्त होण्याची स्विकृष्ट पध्दत मागे घ्या.
आपण एखाद्या साइटवर उपयोजित केल्यास, आपण पाहू की हे अपारदर्शक समायोजन अत्यंत अकस्मात बदल आहे. प्रथम तो राखाडी आहे आणि नंतर नाही, त्या दोन दरम्यान अंतरिम राज्यांसह नाही. हा प्रकाश स्विच चालू आहे - चालू किंवा बंद आहे हे आपल्याला पाहिजे ते असू शकते परंतु आपण हळूहळू बदलत असलेल्या प्रयोगाचा देखील वापर करू शकता.
खरोखर छान परिणाम जोडण्यासाठी आणि या हळूहळू फिकट करण्यासाठी, आपण संक्रमण मालमत्तेस .greydout श्रेणीमध्ये जोडू इच्छिता:
.greydout {
-विबिट-अपारदर्शकता: 0.25;
-मोज-ऑपॅटीसी: 0.25;
अपारदर्शकता: 0.25;
-webkit-transition: सर्व 3s सोई;
-मोझ-संक्रमण: सर्व 3s सहजपणे;
-एमएमएस-संक्रमण: सर्व 3s सोई;
-o- संक्रमण: सर्व 3s सोई;
संक्रमण: सर्व 3s सोई;
}
या कोडसह, बदल फक्त एकाएकी हलविण्याऐवजी हळूहळू बदल होईल.
पुन्हा एकदा, आपण येथे अनेक विक्रेता प्रिफिक्स नियमांचा वापर करीत आहोत. संक्रमण तसेच अपारदर्शकता म्हणून समर्थित नाही, त्यामुळे हे प्रत्यये अर्थ तयार करतात.
आपण या संवादाची आखणी करतांना एक गोष्ट लक्षात ठेवा की टच स्क्रीन डिव्हाइसेसमध्ये "होव्हर" स्थिती नाही, म्हणून ही प्रभाव एखाद्या मोबाईल फोन सारख्या टच स्क्रीन उपकरण वापरून कोणासही गमावतात. संक्रमण बर्याचदा घडेल, परंतु इतके वेगाने घडते की ते खरोखर पाहिलेच जाऊ शकत नाहीत. हे एक चांगले बोनस परिणाम म्हणून जोडत असल्यास ते ठीक आहे, परंतु सामग्रीस समजून घेण्यासाठी आवश्यक असलेले कोणतेही बदल टाळा.
लुप्त होत आहे हे संभव आहे
आपण एक अस्पष्ट प्रतिमेसह प्रारंभ करण्याची गरज नाही, आपण पूर्णपणे अपारदर्शक प्रतिमा पासून कोमेजण्यासाठी संक्रमणे आणि अपारदर्शक वापरु शकता. समान प्रतिमा वापरणे, फक्त withfadeout च्या एका वर्गसह:
वर्ग = "withfadeout">
अगदी पूर्वीप्रमाणेच, आपण वापरलेले अपारदर्शकता: होव्हर निवडकर्ता:
.withfadeout {
-webkit-transition: सर्व 2 ए-इन-आऊट;
-मोझ-संक्रमण: सर्व 2 ए-इन-आऊट;
-एमएमएस-संक्रमण: सर्व 2 ए-इन-आऊट;
-o- संक्रमण: सर्व 2s सहज इन-आउट;
संक्रमण: सर्व 2s सोई इन-आऊट;
}
.withfadeout: होव्हर {
-विबिट-अपारदर्शकता: 0.25;
-मोज-ऑपॅटीसी: 0.25;
अपारदर्शकता: 0.25;
}
या उदाहरणात, प्रतिमा पूर्णपणे अपारदर्शकांकडून थोड्याशा पारदर्शक होईल - आमच्या प्रथम उदाहरणाच्या उलट.
प्रतिमा पलीकडे जाणे
हे उत्कृष्ट आहे की आपण या व्हिज्युअल ट्रांझिशन आणि फॅदेस प्रतिमा वापरु शकता, परंतु आपण या सीएसएस प्रभाव असलेल्या प्रतिमा वापरण्यास मर्यादित नाही. आपण क्लिक आणि धरला तेव्हा फिकट होणारी CSS- स्टाइल बटणे सहजपणे करू शकता आपण फक्त सक्रिय स्यूडो-क्लासचा वापर करून अपारदर्शकता ठरवू शकता आणि बटण परिभाषित करणार्या वर्गावर संक्रमण ठेवा. काय होते ते पाहण्यासाठी हे बटण क्लिक करा आणि धरून ठेवा.
अनिवार्यपणे कोणत्याही दृश्य घटक फेडला गेल्यावर किंवा त्यावर क्लिक केल्याने शक्य होऊ शकते. या उदाहरणामध्ये मी डिव्ह चे अपारदर्शकता आणि त्यातील माउसचा रंग बदलतो. येथे सीएसएस आहे:
#myDiv {
रूंदी: 280px;
पार्श्वभूमी-रंग: # 557A47;
रंग: # डीएफडीएफडीएफ;
पॅडिंग: 10 पीएक्स;
-webkit-transition: सर्व 4s सोयीस्कर 0s;
-मोझ-संक्रमण: सर्व 4s सोयीस्करपणे 0 से;
-एमएमएस-संक्रमण: सर्व 4s सोयीस्करपणे 0 से;
-o- संक्रमण: सर्व 4s सोयीस्करपणे 0s;
संक्रमण: सर्व 4s सोयीस्करपणे 0 से;
}
#myDiv: होव्हर {
-विबिट-अपारदर्शकता: 0.25;
-मोज-ऑपॅटीसी: 0.25;
अपारदर्शकता: 0.25;
रंग: # 000;
}
नॅव्हिगेशन मेनू विसर्जित पार्श्वभूमी रंगांपासून लाभ घेऊ शकतात
या साध्या नेव्हीगेशन मेनूमध्ये बॅकग्राउंड कलर हळू हळू वर आणि बाहेर पडतो कारण मी मेनू आयटमवर माऊस. येथे HTML आहे:
- घर
- CSS3 ट्यूटोरियल
- CSS3 गुणधर्म
आणि इथे सीएसएस आहे:
ul # sampleNav {list-style: none; }
उल # sampleNav li {
प्रदर्शन: इनलाइन;
फ्लोट: डावे;
पॅडिंग: 5 पीएक्स 15 पीएक्स;
समास: 0 5px;
-webkit-transition: सर्व 2s linear;
-मोझ-संक्रमण: सर्व 2 रेषेतील;
-एमएमएस-संक्रमण: सर्व 2s रेखीय;
-o- संक्रमण: सर्व 2s रेषेचा;
संक्रमण: सर्व 2s रेषेचा;
}
ul # sampleNav li {text-decoration: none; }
ul # sampleNav li: होव्हर {
पार्श्वभूमी-रंग: # DAF197;
}
ब्राउझर समर्थन
मी आधीच काही वेळा स्पर्श केला आहे म्हणून, या शैलींमध्ये खूप चांगला ब्राउजर समर्थन आहे, त्यामुळे आपण कोणत्याही भीतीचा उपयोग न करता मोकळ्या मनाने त्यांचा वापर करावा. याचे एकमात्र अपवाद इंटरनेट एक्सप्लोररच्या बर्याच जुन्या आवृत्त्या आहेत, परंतु मायक्रोसॉफ्टने 11 वर्षाखालील IE च्या सर्व आवृत्त्यांना समर्थन देण्याचा नुकताच निर्णय दिला आहे, हे जुन्या ब्राऊझर समस्या कमी आणि कमी होत आहेत - आणि वास्तविकपणे, जर जुने ब्राउझर नाही तर हे फेडे संक्रमण पहा, ही एक मोठी समस्या असू नये. जोपर्यंत आपण या प्रकारच्या प्रभावांना आनंददायक संवादात मर्यादित करतो आणि कार्यक्षमतेवर काम करण्यास किंवा त्यावरील सामग्रीवर विश्वास ठेवू नका, त्यापुढील जुन्या ब्राऊजर जे परिणामांना समर्थन देत नाहीत त्यांना कमी आनंददायक अनुभव मिळेल, परंतु त्या ब्राऊजर्सवरील वापरकर्त्यांनाही फरक ओळखणे, खासकरून जर ते साइट सामान्य मानतात आणि त्यांना आवश्यक असलेली माहिती मिळवू शकतात.
अतिरिक्त मजा; दोन प्रतिमा स्वॅप करा
कसे एक प्रतिमा दुसर्या मध्ये फिकट कसे उदाहरण आहे. HTML वापरा:
आणि सीएसएस जे एक पूर्णपणे पारदर्शक बनविते आणि इतर पूर्णपणे अपारदर्शक आहे आणि नंतर संक्रमण दोन अदलाबदल करते:
.swapMe img {-webkit-transition: सर्व 1s सहजपणे इन-आउट; -मोझ-संक्रमण: सर्व 1s सहजपणे आउट-आऊट; -हल-संक्रमण: सर्व 1s सोयीस्करपणे इन-आऊट; -ओ-संक्रमण: सर्व 1s सोयीस्करपणे इन-आऊट; संक्रमण: सर्व 1s सोयीस्कर बनवा; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -मोज-ऑपॅटीसी: 1; अपारदर्शकता: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -मोज-ऑपॅटीसी: 0; अपारदर्शकता: 0; }