CSS3 अब - संक्रमण

CSS3 और HTML5 तेजी से और तेजी से विकसित हो रहे हैं, ब्राउज़र अधिक से अधिक नए चिप्स और बन्स का समर्थन करना शुरू कर रहे हैं। इस संबंध में, मैं अपने भविष्य के मेकअप स्वर्ग को देखना चाहता हूं और इन प्रौद्योगिकियों के नए माल और चिप्स पर समीक्षा लेखों की एक श्रृंखला बनाना चाहता हूं।

इस श्रृंखला में, मैं CSS3 की विशेषताओं जैसे संक्रमण , चेतन , अपारदर्शिता, और आरजीबीए () मॉडल पर विचार करना चाहूंगा।

CSS3 का उपयोग करना।

अक्सर आप कई वेब डिज़ाइनर से शब्द सुन सकते हैं "मैं तब तक इंतजार नहीं कर सकता जब तक कि सीएसएस 3 का उपयोग करना संभव नहीं होगा ..."। इस बीच, आप इसे आज उपयोग कर सकते हैं। हां, साइट के महत्वपूर्ण क्षणों के लिए CSS3 का उपयोग करना अब असंभव है। लेकिन परियोजना के लिए छोटे, गैर-महत्वपूर्ण विवरणों को जोड़ने के लिए इसका उपयोग करना काफी यथार्थवादी, संभव और आवश्यक है।





उदाहरण: आपकी साइट पर, जब आप माउस पर जाते हैं तो लिंक रंग मेनू में बदल जाता है। एक चिकनी संक्रमण के बिना, रंग नाटकीय रूप से बदलता है, लेकिन यह साइट की समग्र उपस्थिति, इसकी प्रयोज्य को प्रभावित नहीं करता है। लेकिन रंग के एक चिकनी संक्रमण की उपस्थिति ठीक से उस छोटे विस्तार की सेवा कर सकती है जो आपकी साइट पर थोड़ा "जीवन" जोड़ देगा।



इस लेख में, हम सीएसएस संक्रमण संपत्ति को देखेंगे।

सभी उदाहरण वेबकिट इंजन के लिए दिए गए हैं। नीचे हम इन तरीकों के क्रॉस-ब्राउज़र संगतता पर विचार करते हैं।

संक्रमण

W3C संक्रमणों की निम्नलिखित परिभाषा देता है:

सीएसएस संक्रमण सीएसएस मूल्यों में संपत्ति परिवर्तन होने की अनुमति देता है

एक निर्दिष्ट अवधि में सुचारू रूप से।



सीएसएस संक्रमण आपको सीएसएस संपत्ति परिवर्तनों को सुचारू रूप से और समय के साथ असाइन करने की अनुमति देता है।

आइए सबसे सरल उदाहरण से शुरू करें - लिंक पृष्ठभूमि का एक चिकनी संक्रमण जोड़ें।

क्लासिक कार्यान्वयन:

a.foo { padding: 5px 10px; background: #69f; color: #000; } a.foo:hover { background: #33f; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

जब आप लिंक पर माउस ले जाते हैं, तो पृष्ठभूमि उसका रंग हल्के नीले से गहरे नीले और काले से सफेद तक फ़ॉन्ट रंग बदल देगी। सामान्य स्थिति।

अब CSS बदलावों का उपयोग करके एक चिकनी पृष्ठभूमि परिवर्तन जोड़ें:

 a.foo { padding: 5px 10px; background: #69f; color: #000; -webkit-transition-property: background; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease; } a.foo:hover { background: #33f; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अब हमारी पृष्ठभूमि सुचारू रूप से आधे सेकंड के लिए रंग बदलती है! अन्य सीएसएस गुणों के साथ, हम सभी संक्रमण गुणों को एक में जोड़ सकते हैं:

 a.foo { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: background 0.5s ease; } a.foo:hover { background: #33f; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अब एक चिकनी फ़ॉन्ट रंग परिवर्तन जोड़ें:

 a.foo { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: background 0.5s ease, color 0.3s ease; } a.foo:hover { background: #33f; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह होवर कोड आधे सेकंड के लिए पृष्ठभूमि का रंग और 0.3 सेकंड के लिए फ़ॉन्ट रंग को सुचारू रूप से बदल देगा। यदि हमें सभी तत्वों के लिए समान गुणों की आवश्यकता है, तो हम प्रतिस्थापित कर सकते हैं

 -webkit-transition: background 0.5s ease; -webkit-transition: color 0.3s ease;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

पर

 -webkit-transition: all 0.5s ease;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अब संक्रमण-प्रभाव को उन सभी गुणों पर लागू किया जाएगा जो घटना के साथ और समान मापदंडों के साथ बदलते हैं - 0.5 सेकंड, सहजता-प्रभाव।



इसके अलावा, हम प्रभाव के लिए देरी जोड़ सकते हैं:

 a.foo { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: all 0.5s ease; -webkit-transition-delay: 0.5s; } a.foo:hover { background: #33f; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अब हमारा एनीमेशन माउस पर मंडराने के बाद आधा सेकंड काम करेगा।



आप संक्रमण संपत्ति को किसी भी चीज़ पर लागू कर सकते हैं - पृष्ठभूमि, रंग, लंबाई, फ़ॉन्ट आकार, आदि। मूल रूप से, ये ऐसे गुण हैं जो रंग या गुणों को निर्दिष्ट करते हैं जिन्हें लंबाई (px, em, ex) या प्रतिशत में इकाइयों में व्यक्त किया जा सकता है। एक घटना के रूप में, हम छद्म वर्गों का उपयोग भी कर सकते हैं: ध्यान केंद्रित और: सक्रिय। सामान्य तौर पर - आप किसी भी चयनकर्ताओं के साथ संक्रमण का उपयोग कर सकते हैं।



सारांश धुरी तालिका:

संक्रमण-संपत्ति	संपत्ति जिसके लिए हम एनीमेशन लागू करते हैं	लगभग किसी भी सीएसएस संपत्ति: रंग, पृष्ठभूमि, चौड़ाई, फ़ॉन्ट-आकार, आदि।
संक्रमण अवधि	एनिमेशन की अवधि	सेकंड में समय: 0.5 सेकंड - आधा सेकंड, 60 सेकंड - एक मिनट, आदि।
संक्रमण-समय-समारोह	एनीमेशन के लिए इस्तेमाल किया अस्थायी कार्य	आसानी, रैखिक, आसानी से बाहर, आसानी से, आसानी से बाहर, घन bezier
संक्रमण-विलंब	एनीमेशन में देरी	सेकंड में समय: 0.5 सेकंड - आधा सेकंड, 60 सेकंड - एक मिनट, आदि।

ब्राउज़रों

क्रोम, सफारी, ओपेरा 10.5+, फ़ायरफ़ॉक्स 4+

लेख का पाठ केवल WebKit ब्राउज़रों के लिए एक उपसर्ग के साथ नियमों का उपयोग करता है। अपनी परियोजनाओं में वेंडर प्रीफिक्स -मोज़ और -ओ- को जोड़ना याद रखें। उदाहरण पृष्ठ पर, आप क्रॉस-ब्राउज़र कोड (IE के बिना, निश्चित रूप से) देख सकते हैं।



यदि लेख अपने इच्छुक पाठकों को पाता है, तो अगली पोस्ट में हम keyframe एनीमेशन, अस्पष्टता संपत्ति और rgba () मॉडल पर विचार करेंगे। आपका ध्यान के लिए धन्यवाद!



पुनश्च धन्यवाद lahmatiy टिप्पणियों में सुधार के लिए।