सीएसएस आकार

आइए आगे बढ़ते हैं और कुछ मज़ेदार CSS आकार बनाते हैं! सभी कोड के लिए मेरे कोडपेन को फॉलो करें। आइए इसे करते हैं।

आयत और वर्ग

हमारे सभी आकार एक डिव में लपेटे जाएंगे। सबसे बुनियादी आकार वर्ग और आयत है क्योंकि डिफ़ॉल्ट रूप से div चौड़ाई और ऊंचाई के गुणों के आधार पर एक वर्ग या आयत है। तो वर्ग की चौड़ाई और ऊँचाई समान होती है जबकि आयत में नहीं:

.rectangle {
  width: 2rem;
  height: 4rem;
  background-color: violet;
}

.square {
  width: 5rem;
  height: 5rem;
  background-color: lime;
}

अनुस्मारक :हम रेम का उपयोग करते हैं जो मूल फ़ॉन्ट-आकार पर आधारित है और आसान पैमाने की अनुमति देता है। यह ब्राउज़र पर डिफ़ॉल्ट है (आमतौर पर 16px)। हमने अपना फ़ॉन्ट-आकार 20px पर सेट किया है, इसलिए 2rem 40px है।

मंडली

हम आगे बढ़ेंगे और एक प्रोफ़ाइल छवि के लिए एक मंडली बनाएंगे। एक वृत्त बनाने के लिए वर्ग के समान है लेकिन हमें सीमा-त्रिज्या निर्दिष्ट करने की आवश्यकता है। कोनों को गोल करने के लिए, इसे 50% पर करना होगा। अगर हम अंडाकार चाहते हैं तो हम आयत के समान चौड़ाई/ऊंचाई को संशोधित करेंगे।

आइए अपनी प्रोफाइल इमेज बनाएं:

.profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url("https://user-images.githubusercontent.com/15071636/91342237-57ad9a00-e7a0-11ea-97bc-606a5998b29a.jpg");
  background-position: center center;
  background-size: cover;
}

नोट :पृष्ठभूमि गुण छवि को प्राप्त करने, उसे आकार देने और उसे केंद्र में रखने के लिए हैं।

समांतर चतुर्भुज

हम एक समांतर चतुर्भुज भी बना सकते हैं। शांत पाठ प्रभाव जोड़ते समय यह आकृति उपयोगी हो सकती है। यहां हम ट्रांसफॉर्म प्रॉपर्टी का उपयोग करेंगे और हम 20 या -20 डिग्री के साथ समांतर चतुर्भुज के रूप में आकार (और अंदर कुछ भी) को बदलने के लिए तिरछा मान का उपयोग करेंगे।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

.parallelogram {
  color: ivory;
  width: 6rem;
  height: 1.5rem;
  transform: skew(-20deg);
  background: indianred;
}

सही लग रहा है 😎

अन्य आकार

अब जब हमें CSS आकृतियों और इसके उपयोगों के बारे में कुछ जानकारी हो गई है, तो हम अन्य आकृतियों पर एक नज़र डाल सकते हैं। उन सभी को आप मेरे कोडपेन पर अपने लिए खेल सकते हैं।

.triangle {
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 5rem solid hotpink;
}

जबकि दिल करने के कई तरीके हैं, और आप इसके कई पुनरावृत्तियों को ऑनलाइन पा सकते हैं, यह बहुत सीधा है।

.heart {
  width: 10rem;
  background: radial-gradient(circle at 60% 65%, goldenrod 64%, transparent 65%)
      top left, radial-gradient(
        circle at 40% 65%,
        goldenrod 64%,
        transparent 65%
      ) top right,
    linear-gradient(to bottom left, goldenrod 43%, transparent 43%) bottom left,
    linear-gradient(to bottom right, goldenrod 43%, transparent 43%) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.heart::before {
  content: "";
  display: block;
  padding-top: 100%;
}

आगे बढ़ो और प्रतिशत के साथ खेलो और रंग बदलो। आप देख सकते हैं कि दिल कैसे बनाया जा रहा है। तो हम देख सकते हैं कि कैसे ::पहले और साथ में ::छद्म तत्वों के बाद हम कुछ शांत आकृतियाँ बना सकते हैं।

साथ ही, polygon() . के साथ फ़ंक्शन हम अपनी सीमाओं का विस्तार करते हुए अन्य आकार निर्दिष्ट कर सकते हैं।

.letter-t {
  width: 5rem;
  height: 5rem;
  margin: 0 1rem;
  shape-outside: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 100%,
    40% 20%,
    0 20%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 80%,
    40% 20%,
    10% 20%
  );
  background: navajowhite;
}

इस क्लिप-पथ निर्माता की जांच अवश्य करें , एक अच्छा टूल जो आपके लिए आकृतियों के एक समूह के लिए कोड उत्पन्न करेगा!