CSS আকার

চলুন এগিয়ে যাই এবং কিছু মজার CSS আকার তৈরি করি! সমস্ত কোডের জন্য আমার কোডপেন অনুসরণ করুন। আসুন এটি করি।

আয়তক্ষেত্র এবং বর্গক্ষেত্র

আমাদের সমস্ত আকার একটি div মধ্যে আবৃত করা হবে. সবচেয়ে মৌলিক আকৃতি হল বর্গক্ষেত্র এবং আয়তক্ষেত্র যেহেতু ডিফল্টরূপে div হল প্রস্থ এবং উচ্চতার বৈশিষ্ট্যের উপর নির্ভর করে একটি বর্গক্ষেত্র বা আয়তক্ষেত্র। সুতরাং বর্গক্ষেত্রের সমান প্রস্থ এবং উচ্চতা রয়েছে যেখানে আয়তক্ষেত্রের নেই:

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

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

অনুস্মারক :আমরা rem ব্যবহার করি যা রুট ফন্ট-আকারের উপর ভিত্তি করে এবং সহজ স্কেলের জন্য অনুমতি দেয়। এটি ব্রাউজারে ডিফল্ট (সাধারণত 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;
}

ডানদিকে শান্ত দেখাচ্ছে 😎

অন্যান্য আকার

এখন যেহেতু আমাদের সিএসএস আকার এবং এর ব্যবহার সম্পর্কে কিছু জ্ঞান আছে, আমরা অন্যান্য আকারগুলি দেখতে পারি। তাদের সব আপনি আমার কোডপেন নিজের জন্য খেলতে পারেন.

.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%;
}

এগিয়ে যান এবং শতাংশের সাথে খেলুন এবং রং পরিবর্তন করুন। আপনি দেখতে পারেন কিভাবে হৃদয় নির্মিত হচ্ছে. তাই আমরা দেখতে পারি কিভাবে ::before এবং also ::after pseudo-elements দিয়ে আমরা কিছু ঠাণ্ডা আকার তৈরি করতে পারি।

এছাড়াও, 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;
}

এই ক্লিপ-পাথ মেকারটি পরীক্ষা করুন৷ , একটি দুর্দান্ত সরঞ্জাম যা আপনার জন্য একগুচ্ছ আকারের কোড তৈরি করবে!