CSS3 सँग वेबपेज तत्वहरू फीड इन र आउट बनाउनुहोस्

CSS3 संक्रमणहरू राम्रो फीका प्रभावहरू सिर्जना गर्नुहोस्

वेब डिजाईजरहरूले लामो समयसम्म पानाहरूमा बढी नियन्त्रण गर्न चाहन्थे जुन तिनीहरू सिर्जना हुँदा थिए जब CSS3 दृश्यमा हिउँदथे। CSS3 मा पेश गरिएको नयाँ शैलीले वेब पेशेवरहरूलाई फोटोशॉप-जस्तै प्रभावहरू तिनीहरूको पृष्ठहरूमा थप्न सक्ने क्षमता प्रदान गर्यो। यसमा ड्रप छाया र चमकहरू , गोलाकार कोनेहरू, र अधिक जस्तै गुणहरू समावेश छन्। CSS3 ले एनिमेसन-जस्तै प्रभावहरू पनि परिचय गरे जुन साइटहरूमा राम्रो अन्तरक्रियात्मकता सिर्जना गर्न प्रयोग गर्न सकिन्छ।

अस्पष्टता र संक्रमणका लागि गुणहरूको संयोजन प्रयोग गरेर CSS3 को प्रयोग गरेर तपाइँले आफ्नो वेबसाइटमा तत्वहरूमा थप्न सक्नुहुन्छ। यो एक साइट र दर्शकले केहि तत्व गर्दछ जब फोकस क्षेत्रहरूमा फोकस क्षेत्रहरू सिर्जना गरेर थप पृष्ठहरूलाई अन्तरक्रियात्मक र राम्रो तरिकाले समर्थन गर्दछ।

तपाईंको वेब पृष्ठमा विभिन्न तत्वहरूमा यो अन्तरक्रियात्मक प्रभाव प्रभाव थप्न कति सजिलो छ भन्ने कुरालाई हेर्नुस्।

होवरमा अस्पष्टता परिवर्तन गर्नुहोस्

ग्राहकले तत्त्वलाई कसरी परिवर्तन गर्ने भनेर हेर्नु भएको छ जब ग्राहकले त्यो तत्व माथि ह्यान्डिंग गर्दैछ। यस उदाहरणका लागि (तल HTML देखाईएको छ) म ग्रीइङ्गआउटको क्लाउड विशेषतासँग छवि प्रयोग गर्दैछु।

यसलाई ग्रीटिङ बनाउनको लागी, हामी हाम्रो सीएसएस शैलसिटमा निम्न शैली नियमहरू थप्नुहोस्ौं:

.greydout {
-webkit-opacity: 0.25;
-मोज-अस्पष्टता: 0.25;
अस्पष्टता: 0.25;
}

यी अस्पष्टता सेटिङहरू 25% मा अनुवाद गर्दछ। यसको अर्थ छवि सामान्य सामान्य पारदर्शिता को 1/4 को रूपमा देखाइनेछ। कुनै पारदर्शितासँग पूर्ण रूपमा ओपेरा 100% र 0% पूर्ण पारदर्शी हुनेछ।

अर्को, छवि बनाउनको लागि माउस आउँदछ (वा बढि सही रूपमा, पूर्ण अपारदर्शी हुन स्पष्ट हुन्छ), तपाइँ थप गर्नुहोस्: hover pseudo-class:

.greydout: hover {
-webkit-opacity: 1;
-मोज-अस्पष्टता: 1;
अस्पष्टता: 1;
}

तपाईले ध्यान दिनुहुनेछ, यी उदाहरणहरूको लागि, म ती ब्राउजरहरूको पुरानो संस्करणहरूको लागि ब्याकवर्ड अनुकूलता सुनिश्चित गर्न नियमको विक्रेताहरू पूर्वनिर्धारित संस्करणहरू प्रयोग गर्दैछु। यो एक राम्रो अभ्यास हो, वास्तविकता यो हो कि अस्पष्टता नियम अब ब्राउज़ ब्राउजर द्वारा समर्थित छ र यो विक्रेताओं पूर्वनिर्धारित रेखाहरु लाई छोडने को लागि धेरै सुरक्षित छ। अझै, त्यहाँ उपसर्ग समावेश गर्न को लागी कुनै पनि कारण छैन यदि तपाईं पुरानो ब्राउजर संस्करणहरूको लागि समर्थन निश्चित गर्न चाहानुहुन्छ। शैली को सामान्य, अन-पूर्वनिर्धारित संस्करण संग घोषणा को समाप्त को स्वीकार गरे जाने वाला सर्वोत्तम अभ्यास को लागी सुनिश्चित गर्नुहोस।

यदि तपाईंले यसलाई साइटमा नियुक्त गर्नुभयो भने, तपाईंले देख्नुहुनेछ कि यो अस्पष्टता समायोजन एकदम अचानक परिवर्तन हो। पहिले यो खैरो छ र त्यसो भएन, ती दुई बीचको अन्तराल राज्यको साथ। यो हल्का स्विच जस्तै छ वा बन्द। यो तपाईं के चाहानुहुन्छ हुन सक्छ, तर तपाईं पनि क्रमशः परिवर्तनको साथ प्रयोग गर्न चाहनुहुन्छ होला।

वास्तवमा राम्रो प्रभाव थप्न र यो छाया क्रमिक बनाउनुहोस्, तपाई लाई हस्तक्षेप सम्पत्ती जोड्न चाहानुहुन्छ .ग्रेडिओआउट कक्षा:

.greydout {
-webkit-opacity: 0.25;
-मोज-अस्पष्टता: 0.25;
अस्पष्टता: 0.25;
-विशेष-संक्रमण: सबै 3 सजिलो;
-मोज-संक्रमण: सबै 3 सजिलो;
-एमएस-संक्रमण: सबै 3 सजिलो;
-ओ-संक्रमण: सबै 3 सजिलो;
संक्रमण: सबै 3 आसान;
}

यो कोडको साथ, परिवर्तन बिस्तारै बदलिनुको सट्टा बिस्तारै परिवर्तन हुनेछ।

एक पटक फेरि, हामी यहाँ विक्रेन्डका केहि पूर्वनिर्धारित नियमहरू प्रयोग गर्दैछौँ। ट्राफिकेशन पनि अस्पष्टताको रूपमा समर्थित छैन, त्यसैले यो उपसर्गले अर्थ बनाउँछ।

यी अन्तरक्रियाको योजना अनुसार सम्झँदा एक चीज हो कि छुँदा स्क्रिन उपकरणहरूमा "होभर" अवस्था छैन, त्यसैले यी प्रभावहरू अक्सर मोबाइल फोन जस्तै टच स्क्रीन उपकरण प्रयोग गरेर कुनै पनि व्यक्तिमा हराउँछन्। संक्रमण अक्सर हुन्छ, तर यो यति छिटो हुन्छ कि तिनीहरू साँच्चै देख्न सकिदैनन्। यो राम्रो छ भने तपाईले यो राम्रो बोनस प्रभावको रूपमा थपिरहनुभएको छ, तर कुनैपनि परिवर्तनहरूबाट बच्न जुन सामग्रीको लागि बुझ्न आवश्यक छ।

फ्लाइङ आउट सम्भव छ

तपाईं फिक्स्ड छविको साथ सुरु गर्न छैन, तपाईं पुरा तरिकाले ओपेरा छविबाट फिड गर्न ट्राफिकेशन र अस्पष्टता प्रयोग गर्न सक्नुहुनेछ। एउटै छवि प्रयोग गरेर, केवल एक श्रेणीको साथ मात्र:

class = "withfadeout">

पहिले जस्तै, तपाईं प्रयोग गरेर अस्पष्टता परिवर्तन: होवर चयनकर्ता:

.withfadeout {
वेबमार्ग-संक्रमण: सबै 2 ईन-इन-आउट;
-मोज-संक्रमण: सबै 2 ईन-इन-आउट;
-एमएम-संक्रमण: सबै 2 ईन-इन-आउट;
-ओ-संक्रमण: सबै 2 ईन-इन-आउट;
संक्रमण: सबै 2 ईन ई-इन-आउट;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-मोज-अस्पष्टता: 0.25;
अस्पष्टता: 0.25;
}

यस उदाहरणमा, छवि पूर्ण रूपमा अपारदर्शी केही हद सम्म पारदर्शी हुन सक्छ - हाम्रो पहिलो उदाहरणको उल्टो।

छविहरूभन्दा बाहिर जाँदै

यो उत्कृष्ट छ कि तपाइँ यी भिजुअल ट्राफिकेशनहरू लागू गर्न सक्नुहुन्छ र तस्विरहरूमा फर्काउन सक्नुहुन्छ, तर तपाईं केवल यी CSS प्रभावहरूसँग छविहरू प्रयोग गर्न सीमित हुनुहुन्न। तपाईँले सजिलै सीएसएस-स्टाइल गरिएका बटनहरू बनाउन सक्नुहुन्छ जुन क्लिक गरेर र आयोजित हुँदा फीका। तपाईले केवल सक्रिय छद्म-वर्गको प्रयोग गरेर अस्पष्टता सेट गर्नुहुनेछ र बटन परिभाषित गर्नुहुने कक्षामा ट्राफिक राख्नुहोस्। यो के हुन्छ भन्ने कुरा हेर्न यो बटन क्लिक गर्नुहोस् र होल्ड गर्नुहोस्।

यो हो कि सम्भवतः कुनै पनि दृश्य तत्व फीड गर्न सम्भव छ जब घुमाईएको वा क्लिक गर्नुहोस्। यस उदाहरणमा म डिभको अस्पष्टता परिवर्तन गर्दछ र माउसको माथि हुँदा पाठको रंग परिवर्तन गर्दछ। यहाँ सीएसएस छ:

#myDiv {
चौडाई: 280px;
पृष्ठभूमि रंग: # 557A47;
रंग: #dfdfdf;
padding: 10px;
-विकास-संक्रमण: सबै 4s आराम-आउट 0s;
-मोज-संक्रमण: सबै 4s आराम-आउट 0s;
-एमएस-एन्फ्रान्स: सबै 4s आसान-आउट 0s;
-ओ-संक्रमण: सबै 4s आराम-आउट 0s;
संक्रमण: सबै 4s आराम-आउट 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-मोज-अस्पष्टता: 0.25;
अस्पष्टता: 0.25;
रंग: # 000;
}

नेभिगेसन मेनुहरू दुर्गम पृष्ठभूमि रंगबाट लाभ उठाउन सकिन्छ

यस साधारण नेभिगेसन मेनुमा पृष्ठभूमि रङ मेनु वस्तुहरू मा माउसको रूपमा बिस्तारै र बाहिर निस्कन्छ। यहाँ एचटीएमएल हो:

• • घर
  • • CSS3 ट्यूटोरियल
    • • CSS3 गुणहरू

र यहाँ सीएसएस हो:

ul # sampleNav {सूची शैली: कुनै पनि होइन; }
ul # sampleNav li {
प्रदर्शन: इनलाइन;
फ्लोट: बायाँ;
padding: 5px 15px;
मार्जिन: 0 5px;
-विवाह-संक्रमण: सबै 2 रैखिक;
-मोज-संक्रमण: सबै 2 रैखिक;
-एमएस-संक्रमण: सबै 2 रैखिक;
-ओ-संक्रमण: सबै 2 रैखिक;
संक्रमण: सबै 2 रैखिक;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
पृष्ठभूमि रंग: # DAF197;
}

ब्राउजर समर्थन

मैले पहिले नै केहि समय छुटेको छु, यी शैलीहरूसँग धेरै राम्रो ब्राउजर समर्थन छ, त्यसैले तपाईंले तिनीहरूलाई कुनै पनि खराबी बिना प्रयोग गर्न महसुस गर्नुपर्छ। यसका लागि मात्र अपवाद इन्टरनेट एक्सप्लोररको धेरै पुरानो संस्करणहरू छन्, तर माइक्रोसफ्टको हालैको 11 संस्करणको सबै संस्करणहरूको लागि समर्थन अन्त्य गर्ने निर्णयले यी पुराना ब्राउजरहरू कम र कम मुद्दामा छन् - र वास्तविक रूपमा, यदि पुरानो ब्राउजर होइन यो फीका संक्रमण हेर्नुहोस्, त्यो ठूलो समस्या हुनु पर्दैन। जबसम्म तपाइँ यी प्रकारका प्रभावहरूलाई मनोरञ्जनपूर्ण अन्तरक्रियामा सीमित गर्न र कार्यक्षमता चलाउन वा कुञ्जी सामग्रीहरू प्रकट गर्नमा भरोसा राख्नुभएन भने पुरानो ब्राउजरहरूले प्रभावको समर्थन गर्दैनन् तर कम मनोरञ्जन अनुभव पाउनेछ, तर ती ब्राउजरहरूमा प्रयोगकर्ता पनि हुनेछैनन्। फरक जान्नुहोस्, खास गरी यदि तिनीहरूले साइटको रूपमा सामान्य प्रयोग गर्न र उनीहरूलाई आवश्यक जानकारी प्राप्त गर्न सक्छन्।

थप मजा; दुई छविहरू स्वाप गर्नुहोस्

यहाँ एउटा छवि कसरी अर्कोमा फ्याक्ड गर्ने उदाहरण हो। एचटीएमएल प्रयोग गर्नुहोस्:

र सीएसएस जुन एक पुरा तरिकाले पारदर्शी बनाउछ जबकि अन्य पुरा तरिकाले ओपेरा छ र तब संक्रमण दुई बदल्नुहोस:

.swapMe img {-विभागी-संक्रमण: सबै 1s सजिलै-इन-आउट; -मोज-संक्रमण: सबै 1 ईन-इन-आउट; -एमएस-संक्रमण: सबै 1 ई-मेल-आउट; -ओ-संक्रमण: सबै 1 सजिलो ई-आउट; संक्रमण: सबै 1 ईन ई-इन-आउट; } .swap1, .swapMe: hover .swap2 {-web-opacity: 1; -मोज-अस्पष्टता: 1; अस्पष्टता: 1; } .swapMe: hover .swap1, .swap2 {-web-opacity: 0; -मोज-अस्पष्टता: 0; अस्पष्टता: 0; }