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

CSS का उपयोग करके y-axis के साथ स्क्यू ट्रांसफॉर्म्स परिभाषित करें


CSS का उपयोग करके y-axis के साथ स्क्यू ट्रांसफॉर्म्स परिभाषित करने के लिए निम्नलिखित कोड आज़माएं:

उदाहरण

<html>    <head>       <style>          div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#skewDiv {             /* IE 9 */             -ms-transform: skewY(20deg);                         /* Safari */             -webkit-transform: skewY(20deg);                         /* मानक सिंटैक्स */             transform: skewY(20deg);          }       </style>    </head>    <body>       <div>          Tutorials point.com.       </div>       <div id = "skewDiv">          Tutorials point.com       </div>    </body> </html>

आउटपुट

CSS का उपयोग करके y-axis के साथ स्क्यू ट्रांसफॉर्म्स परिभाषित करें


  1. एडवांस CSS लेआउट फ्लेक्सबॉक्स के साथ एडवांस CSS लेआउट फ्लेक्सबॉक्स के साथ

    CSS3 फ्लेक्सबॉक्स (Flexible Box) जटिल लेआउट के लिए शक्तिशाली मोड है। कंटेनर प्रॉपर्टी: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content। आइटम प्रॉपर्टी: flex-grow, flex-shrink, flex-basis, align-self, order। उदाहरण div { background-color: #f1f1f1; margin: 10

  1. CSS3 से क्रॉस एक्सिस पर फ्लेक्स आइटम्स को अलाइन करना CSS3 से क्रॉस एक्सिस पर फ्लेक्स आइटम्स को अलाइन करना

    CSS3 से क्रॉस एक्सिस पर फ्लेक्स आइटम्स को अलाइन करने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .container {    height: 200px;    dis

  1. प्योर CSS के साथ स्मूथ स्क्रॉलिंग प्योर CSS के साथ स्मूथ स्क्रॉलिंग

    परिचय CSS scroll-behavior प्रॉपर्टी हमें स्क्रॉल के व्यवहार को बदलने की अनुमति देती है। जावास्क्रिप्ट के बिना, हम एंकर लिंक्स और प्रोग्रामेटिक स्क्रॉलिंग के लिए स्मूथ स्क्रॉलिंग सक्षम कर सकते हैं। उदाहरण 1: वर्टिकल स्मूथ स्क्रॉल <!DOCTYPE html> <html> <head> <style> h