CSS और CSS3 में क्या अंतर है?
CSS3, CSS का advanced version है | इसमें कई नए features डाले गएँ हैं जिससे वेब डिजाईन करना और भी ज्यादा आसान हो गया है |
Feature जैसे की text-shadow, box-shadow, css variable डालें गए हैं |
CSS
- CSS से डिजाईन की वेबसाइट responsive नहीं होती थी |
- CSS Color लगाने के लिए RGB, color name और hexadecimal code का इस्तेमाल होता है |
- CSS में 3D animation बनाना मुस्किल होता था | jquery, javascript code के जरिये 3D animation लगाया जाता था |
- CSS code को madule में बाटां नहीं जा सकता था |
- CSS सारे नए ब्राउज़र को support नहीं करता है |
CSS3
- पर CSS3 से वेबसाइट को responsive बनायीं जा सकती है | responsive मतलब वेबसाइट का लुक अलग अलग device के हिसाब से सेट हो जाना | अगर कोई mobile में वेबसाइट को देख रहा है, तो वेबसाइट mobile के screen के हिसाब से सेट होकर दिखेगी और अगर कोई user desktop या laptop में देख रहा है तो उसके हिसाब से screen सेट होकर खुलेगी |
- पर CSS3 में CSS color में कुछ नए features जोडें गए हैं, जैसे rgba, hsla, hsl और gradient colors |
- CSS3 में 3D animation बनाना बहोत ही आसान हो गया है |
- पर CSS3 code को module में बाटां जा सकता है |
- पर CSS3 सारे नए ब्राउज़र को support करता है |
Features of CSS3
CSS3 में कई सारे नए features को introduce किये गएँ हैं, जिससे वेबसाइट डिजाईन करना और उसे ज्यादा आकर्षित बनाया जा सकता है
1)Borders
पेहले css से प्लेन बॉर्डर लगायी जा सकती थी | पर css3 में कुछ नए properties लायें गएँ हैं जिससे border का pattern बदला जा सकता है | rounded border दिया जा सकता है या फिर border image लगाया जा सकता है |
2) Text-Effects
text-shadow, text-overflow, text-wrap जैसे नए properties से text को handle और भी आसान हो गया है |
3) Selectors
नए selectors जैसे की attribute selectors, root pseudo class selectors के मदद से html element को select किया जा सकता है और उसमे css लगायी जा सकती है |
4) Colors
CSS3 में कुछ नए color features दिये गयें हैं जैसे की HSL, HSLA, RGBA जिससे color selection करना और उसे कितना गाढ़ा या फीका रखना है वो भी सेट किया जा सकता है |
5) Transition and Animation
ppt में हम text और image को कई तरह के transition effect देतें हैं | वैसे ही css में transition लगाना या फिर animation लगाने के लिए नए feature जोड़े गएँ हैं |
6) Box-Shadow
box-shadow feature से text और image को और ज्यादा अच्छी लुक दी जा सकती है |
7) Media-Query
अभी के समय में user अलग अलग device का इस्तेमाल करते हैं | इसीलिए वेबसाइट की layout और design अलग अलग device के हिसाब से सेट होनी चाहिए | तभी user को किसी वेबसाइट को देखने में आसानी होगी | इसे responsive design केहतें हैं |
CSS3 में media-query के मदद से content और layout को कैसे display करनी है वो सेट किया जा सकता है |