All Articles Web
CSS3 बदलाव के साथ कुछ मज़ा है
Toby Pitman on Mon, July 25th 0 comments
If you are curious about how to create visual nice and responsive roll over effects with transitions in CSS3 then stop here. Toby Pitman, shows you how to implement some very neat CSS3 tricks.

ऐसा लगता है कि ब्राउज़र विक्रेताओं वास्तव में के माध्यम से कर रहे हैं नए CSS3 सुविधाओं CSS2.1 सिर्फ होने के बावजूद एक बहुत तेज गति पर जोर

हालांकि CSS3 सबसे आधुनिक ब्राउज़रों थोड़ी देर के लिए किया गया है इसे लागू करने जा रहा से वर्ष दूर है. इस त्वरित टिप में मैं तुम्हें CSS3 संक्रमण प्रभाव का उपयोग कर एक स्वच्छ छोटी रोल पर दिखाने.


चरण 1

मैं यहाँ कुछ बहुत ही सरल मार्कअप है. बस एक कुछ अंदर लिंक के साथ सूची unordered:


Ive कुछ अवधि के टैग के अंदर लिंक टैग विशुद्ध रूप से पीछे संगतता के लिए डाल दिया. मैं अपनी कड़ाई अर्थ नहीं पता है, लेकिन अगर आप यह IE6 में काम करने के लिए (मुट्ठी हिलाता है!) करना चाहते हैं यह है कि तुम यह IE6 (मुट्ठी हिलाता है!) के रूप में निशान की जरूरत समझ में नहीं होगा: लिंक के अलावा अन्य कुछ भी पर मंडराना टैग. गैर लिंक तत्वों पर काम मंडराना: IE7 के लिए youll करने के लिए एक doctype घोषणा के लिए यह सुनिश्चित करने की जरूरत है. दयनीय है, मैं जानता हूँ!

Ive कुछ सरल स्टाइल लागू करने के लिए एक क्षैतिज नेविगेशन पट्टी बनाने के.


यह परिणाम है:


Ive लागू प्रदर्शन: इनलाइन सूची टैग IE6 में कुछ लेआउट मुद्दों (मुट्ठी हिलाता है!) को रोकने के.


चरण 2

अब मैं मेरे लिंक टैग के लिए एक पृष्ठभूमि छवि को लागू करने जा रहा:


यह परिणाम है:


मैं जानता हूँ कि यह थोड़ा अजीब लग रहा है लेकिन मेरे साथ सहन. छवि पृष्ठभूमि आशुलिपि नियम का उपयोग कर तैनात है.

पृष्ठभूमि: ;


चरण 3

अब मैं अवधि टैग शैली कर सकते हैं.


यह परिणाम है.


तुम नोटिस कि लिंक 'टैग पृष्ठभूमि छवि अब जो यह की चोटी पर बैठा है अवधि टैग की पृष्ठभूमि का रंग से छिपा है. अवधि टैग भी 20px लिंक टैग की तुलना में ऊंचाई में छोटे. यह महत्वपूर्ण है!


चरण 4

मेरे लिंक टैग मंडराना नियम: अब बीमार लागू. यह लिंक टैग पृष्ठभूमि छवि 10px नीचे स्थानांतरित करने के लिए, अनिवार्य रूप से यह लिंक पर जब आप माउस का खुलासा का कारण होगा.


यह परिणाम है.


इस बिंदु पर आप fallback मोड में अनिवार्य रूप से कर रहे हैं. वर्तमान मार्कअप हर ज्ञात ब्राउज़र में काम करना चाहिए. किसी भी कोड मैं अब से जोड़ने CSS3 और समर्थन ब्राउज़र से ब्राउज़र के लिए अलग अलग होगा.


चरण 5

अब बीमार लिंक टैग मेरे CSS3 संक्रमण नियम जोड़ने.


Heres कैसे यह काम करता है.

संक्रमण:

सभी (इस तत्व के सभी सीएसएस गुण के लिए लागू)

0.3 एस (संक्रमण के लिए समय)

रैखिक (संक्रमण के समय वक्र)


अब लिंक टैग के गुणों में कोई बदलाव (मंडराना पर) अपने नए मूल्य को सुचारू रूप से संक्रमण. अर्थात् पृष्ठभूमि स्थिति और पाठ का रंग.

तुम भी है कि वहाँ सीएसएस संक्रमण के लिए काफी कुछ विक्रेता उपसर्गों रहे हैं नोटिस. प्रत्येक ब्राउज़र वर्तमान में अलग अलग तरीकों से इस प्रभाव लागू है तो हम के रूप में कई के रूप में हम कर सकते लक्ष्य की जरूरत है.


- MOZ = मोज़िला फ़ायरफ़ॉक्स

- वेबकिट - = सफारी, क्रोम

-O-= ओपेरा


एक बार यह तय हो गया है यह बस संक्रमण हो जाएगा.


चरण 6

अंत में बीमार कुछ जल्दी गोल कोनों को जोड़ने.


यह परिणाम है:


अनुकूलता

  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


निष्कर्ष

इस अवधारणा को रोल पर प्रभाव के लोड करने के लिए लागू किया जा सकता है. आप नीचे डाउनलोड में जहां और जब आप एक एलबम पर रोल आप स्वरूप, एक अच्छा संक्रमण के साथ सीडी Vinyl से पता चलता है इस प्रभाव सहित कुछ और उदाहरण मिल.


विशेष CSS3 उदाहरण यहाँ डाउनलोड करें.

के बारे में खेलते हैं और कुछ मज़ा है



Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: