TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কীভাবে একটি কাস্টম বুটস্ট্র্যাপ স্কুইড কার্ড তৈরি করবেন?

2

আমাদের বুটস্ট্র্যাপ টিউটোরিয়ালে, আমরা কার্ড উপাদানগুলিকে বিস্তারিতভাবে ব্যাখ্যা করেছি । যেহেতু কার্ড উপাদানটি সবচেয়ে আকর্ষণীয় উপাদানগুলির মধ্যে একটি, তাই আপনি ইন্টারনেটে প্রচুর বৈচিত্র দেখতে পারেন। আমরা একটি কাস্টমাইজেশন হিসাবে ফ্লিপ কার্ড উইজেট এবং ব্যবহারকারী প্রোফাইল উইজেট ব্যাখ্যা করেছি। এই নিবন্ধে, আসুন আমরা বিভিন্ন শৈলীতে কাস্টম বুটস্ট্র্যাপ তির্যক কার্ড তৈরি করি।

স্কুইড কার্ড কি?

স্কুইনেস X বা Y দিকের একটিতে মোড়ানো উপাদান ছাড়া আর কিছুই নয়। CSS ট্রান্সফর্ম প্রপার্টি ব্যবহার করে এটি অর্জন করা খুব সহজ। আমাদের উদাহরণে, আসুন আমরা নিম্নলিখিত বৈচিত্রগুলি তৈরি করি:

  • এক্স অক্ষে নেগেটিভ ডিগ্রী সহ স্কুইড কার্ড
  • X অক্ষের মধ্যে স্কুইড কার্ড পজিটিভ ডিগ্রী
  • Y অক্ষের মধ্যে তির্যক কার্ড দৃষ্টিকোণ নেতিবাচক ডিগ্রী
  • Y অক্ষের মধ্যে তির্যক কার্ড দৃষ্টিকোণ ইতিবাচক ডিগ্রী
  • সরল পাঠ্য এবং শিরোনাম সহ তির্যক কার্ড

ব্যবহৃত শৈলীগুলি নির্দেশ করার জন্য আমরা ইনলাইন CSS ব্যবহার করব, যদি আপনার বুটস্ট্র্যাপ থিমের একটি থাকে তবে আপনি একটি বহিরাগত CSS- তে সমস্ত শৈলী সংজ্ঞায়িত করতে পারেন । সকল প্রকারে, আপনাকে কেবল বিদ্যমান ".card" শ্রেণীতে "রূপান্তর: skewX()" বা "রূপান্তর: skewY ()" যোগ করতে হবে। উপরন্তু, আমরা মার্জিনের জন্য 1rem (20px) এবং এর জন্য 20rem ব্যবহার করেছি সঠিক সারিবদ্ধতার জন্য প্রস্থ।

নেতিবাচক এক্স দিকনির্দেশ সহ তির্যক কার্ড

আসুন এক্স অক্ষের দিক -8 ডিগ্রি সহ একটি তির্যক কার্ড তৈরি করি, নীচে একই কোড রয়েছে:

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewX(-8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

ফলাফলটি ব্রাউজারে নীচের মত দেখাবে:

কীভাবে একটি কাস্টম বুটস্ট্র্যাপ স্কুইড কার্ড তৈরি করবেন?

পজিটিভ এক্স দিকনির্দেশ সহ স্কুইড কার্ড

এখন skewX () তে negativeণাত্মক ডিগ্রী পরিবর্তন করে ধনাত্মক দিক পরিবর্তন করুন।

<div class="row" style="margin:20px;"> <div class="card" style="width:20rem;transform: skewX(8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

এটি নীচের আউটপুট উত্পাদন করা উচিত:

কীভাবে একটি কাস্টম বুটস্ট্র্যাপ স্কুইড কার্ড তৈরি করবেন?

নেতিবাচক Y অক্ষের মধ্যে দৃষ্টিকোণ কার্ড

এখন skewX () কে skewY () -এ পরিবর্তন করে -8 ডিগ্রী সহ একটি দৃষ্টিকোণ কার্ড তৈরি করুন।

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewY(-8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

নেতিবাচক কোণ সহ দৃষ্টিকোণ কার্ডটি নীচের মত হওয়া উচিত:

কীভাবে একটি কাস্টম বুটস্ট্র্যাপ স্কুইড কার্ড তৈরি করবেন?

ইতিবাচক Y অক্ষের মধ্যে দৃষ্টিকোণ কার্ড

একইভাবে, skewY () +8 ডিগ্রিতে পরিবর্তন করে ইতিবাচক দৃষ্টিকোণ কার্ড তৈরি করুন।

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewY(8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

এটি নিম্নলিখিত ফলাফল উত্পাদন করবে:

কীভাবে একটি কাস্টম বুটস্ট্র্যাপ স্কুইড কার্ড তৈরি করবেন?

প্লেইন টেক্সট এবং টাইটেল সহ স্কুইড কার্ড

উপরের সমস্ত উদাহরণে, শিরোনাম, পাঠ্য এবং বোতাম পাঠ্যও তির্যক কারণ কার্ড স্তরে তির্যকতা প্রয়োগ করা হয়। এটি দৃষ্টিকোণ (Y অক্ষ) ক্ষেত্রে জ্ঞান করে, কিন্তু যখন X অক্ষের উপর তির্যক প্রয়োগ করা হয় তখন পাঠ্যের বিষয়বস্তু তির্যক করার প্রয়োজন হয় না। পাঠ্যটিকে স্বাভাবিক অবস্থায় ফিরিয়ে আনতে, বিপরীত দিকে একই ডিগ্রী প্রয়োগ করুন।

নীচে একটি উদাহরণ কোড, কার্ড লেভেলে +8 ডিগ্রী প্রয়োগ করা এবং কার্ড বডি লেভেলে -8 ডিগ্রী প্রয়োগ করে কার্ড বডির ভিতরে টেক্সট স্বাভাবিক করতে।

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewX(8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body" style="transform: skewX(-8deg);"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

প্লেইন টেক্সট সহ স্কুইড কার্ডটি দেখতে হবে পাঠ্যটি আরও পাঠযোগ্য বিন্যাসে তৈরি করার জন্য।

কীভাবে একটি কাস্টম বুটস্ট্র্যাপ স্কুইড কার্ড তৈরি করবেন?

মোবাইল ডিভাইসে সমন্বয়

উপরের তির্যক কার্ডগুলি ডেস্কটপ ডিভাইসে ভালভাবে দেখতে পারে। কিন্তু তারা মোবাইল ডিভাইসের পর্দার বাইরে চলে যাবে এভাবে একটি অনুভূমিক স্ক্রোল বার তৈরি করবে। 480px এর কম মোবাইল ডিভাইসে কার্ডকে স্বাভাবিক দেখানোর জন্য নীচের CSS মিডিয়া ক্যোয়ারী ব্যবহার করুন। এর মূল অর্থ হল, আমরা মোবাইল ডিভাইসে স্কুইনেস ছাড়াই কার্ড তৈরি করি যখন বড় ডিভাইসে স্কুইনেস দেখানো হয়।

<style> @media screen and (max-width: 480px) { .card { width:20rem !important; margin: 0 !important; flex-direction: column !important; -ms-flex-direction: column !important; transform: skewX(0deg) !important; transform: skewY(0deg) !important; border-radius: 0 !important; } .card-body { transform: skewX(0deg) !important; } } </style>

অতিরিক্ত কাস্টমাইজেশন

আপনি যদি লক্ষ্য করে থাকেন, উপরের সব কোডের বোতাম এলিমেন্টের সাথে একটি অতিরিক্ত "btn-md" ক্লাস সংযুক্ত আছে। এটি একটি ডিফল্ট বুটস্ট্র্যাপ ক্লাস নয়, আমরা বক্স শ্যাডো ইফেক্ট দেখানোর জন্য যোগ করেছি। এছাড়াও সীমানার ব্যাসার্ধ হভার এবং অপসারণের জন্য কিছু অতিরিক্ত প্রভাব যোগ করা যেতে পারে।

<style> .card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.19),0 0.3rem 0.3rem rgba(0,0,0,.23); } .btn-md { border-width: 0; outline: none; border-radius: 0 !important; box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, .6); cursor: pointer; } .btn-md:hover { background-color: black; } .card, .card-img-top { border-radius: 0 !important; } </style>

আপনি বাহ্যিক স্টাইলশীটে মিডিয়া প্রশ্ন এবং অতিরিক্ত কাস্টমাইজেশন শৈলী ব্যবহার করতে পারেন। আপনি যদি আপনার পৃষ্ঠার প্রধান অংশের ভিতরে শৈলী যুক্ত করছেন তাহলে কম্বিন ব্যবহার করতে ভুলবেন না এবং সমস্ত কোড ভিতরে রাখুন … ট্যাগগুলি। প্রতিটি। " অন্যথায় পৃষ্ঠার সমস্ত কার্ড উপাদান ক্ষতিগ্রস্ত হয় যদি আপনি হেড বিভাগে বা বহিরাগত স্টাইলশীটে শৈলী ব্যবহার করেন।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত