Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS3 ग्रेडिएंट्स का उपयोग करके दो या अधिक रंगों को रैखिक प्रारूप में व्यवस्थित करें


लीनियर ग्रेडिएंट्स का उपयोग दो या अधिक रंगों को रैखिक प्रारूप में व्यवस्थित करने के लिए किया जाता है।

उदाहरण

CSS3 में लीनियर ग्रेडिएंट्स लागू करने के लिए निम्नलिखित कोड आज़माएं:

<html>    <head>       <style>          #grad1 {             height: 100px;             background: -webkit-linear-gradient(pink,green);             background: -o-linear-gradient(pink,green);             background: -moz-linear-gradient(pink,green);             background: linear-gradient(pink,green);          }       </style>    </head>    <body>       <div id = "grad1">       </div>    </body> </html>

आउटपुट

CSS3 ग्रेडिएंट्स का उपयोग करके दो या अधिक रंगों को रैखिक प्रारूप में व्यवस्थित करें


  1. CSS में एंगल्स का उपयोग करके लीनियर ग्रेडिएंट्स की दिशा सेट करना CSS में एंगल्स का उपयोग करके लीनियर ग्रेडिएंट्स की दिशा सेट करना

    ग्रेडिएंट की दिशा पर अधिक नियंत्रण के लिए, नीचे दिए गए सिंटैक्स में एंगल परिभाषित करें -background-image: linear-gradient(angle, color-stop1, color-stop2);CSS में एंगल्स का उपयोग करके लीनियर ग्रेडिएंट्स की दिशा सेट करने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style

  1. CSS3 लीनियर और रेडियल ग्रेडिएंट्स का उपयोग करना CSS3 लीनियर और रेडियल ग्रेडिएंट्स का उपयोग करना

    ग्रेडिएंट्स दो या अधिक रंगों का संयोजन प्रदर्शित करते हैं। लीनियर ग्रेडिएंट्स का उपयोग दो या अधिक रंगों को लीनियर फॉर्मेट में व्यवस्थित करने के लिए किया जाता है जैसे टॉप टू बॉटम। रेडियल ग्रेडिएंट्स केंद्र पर दिखाई देते हैं।CSS3 में लीनियर और रेडियल ग्रेडिएंट्स के उपयोग को दिखाने वाला कोड निम्न है -उ

  1. CSS3 से एलिमेंट्स का 2D ट्रांसफॉर्मेशन CSS3 से एलिमेंट्स का 2D ट्रांसफॉर्मेशन

    2D ट्रांसफॉर्म्स का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल, और स्क्यू के रूप में पुनः बदलने के लिए किया जाता है।निम्न कुछ 2D ट्रांसफॉर्म फंक्शन्स हैं -क्र.सं.मान और विवरण1matrix(n,n,n,n,n,n)छह मानों के साथ मैट्रिक्स ट्रांसफॉर्म्स परिभाषित करता है2translate(x,y)x-axis और y-axis के साथ एलि