শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৪ (CSS দিয়ে বৃত্তাকার, গোলাকার, চারকোনা সহ নানান ধরনের শেপ তৈরি ১)

2
477
এটি 13 পর্বের CSS প্রেক্টিকেল ক্লাশ সিরিজ টিউনের 4 তম পর্ব

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

CSS দিয়ে বৃত্তাকার, গোলাকার, চারকোনা সহ নানান ধরনের শেপ তৈরি ১

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

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

নিজের পিসিতে তৈরি করে দেখে নিন আগে।


যে কোন সিএসএস নিজের পিসিতে তৈরি করতে এই টিপস গুলো মনে রাখবেন। প্রথমে আপনার সিএসএস ফাইলটি একটি নোটপ্যাড খুলে সেখনে পেস্ট করে সেভ করুন style.css নামে এবার আপনার এইচটিএমএল ফাইলের মাঝে <head> এর ঠিক পরেরি এই কোডিং যুক্ত করুন

<link rel =”stylesheet” type text=”text/css” href=”style.css”/>

এখানে দেখুন style.css ফাইলের নামটি দেয়া আছে আপনার ফাইলের নাম অন্য কিছু হলে আপনি এই জায়গায় অন্য কিছু ব্যবহার করুন। আরেকটি কথা মনে রাখুন অবশ্যই style.css এবং HTML ফাইলটি একটি ফোল্ডার এর মাঝে রাখবেন এবং প্রয়োজনীয় ছবি গুলো একি ফোল্ডারে রাখবেন। তবে যদি অনলাইনে আপনার সিএসএস ফাইল আপলোড করা থাকে সেই ক্ষেত্রে ফাইলের লিংক দিবেন যেমন

<link rel =”stylesheet” type text=”text/css” href=”http://www.yoursitename.com/foldername/style.css”/>

আসা করি বুঝতে পেরেছেন প্রতিবার একি ভাবে নিজের কম্পিউটার এ টেস্ট করে দেখে নিবেন। ধন্যবাদ।

CSS3 Shapes শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৪ (CSS দিয়ে বৃত্তাকার, গোলাকার, চারকোনা সহ নানান ধরনের শেপ তৈরি ১)

Square

#square {
   width: 140px; 
   height: 140px; 
   background: blue; 
}

CSS3 Shapes শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৪ (CSS দিয়ে বৃত্তাকার, গোলাকার, চারকোনা সহ নানান ধরনের শেপ তৈরি ১)

Circle

#circle { 
   width: 140px;
   height: 140px;
   background: blue; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

CSS3 Shapes শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৪ (CSS দিয়ে বৃত্তাকার, গোলাকার, চারকোনা সহ নানান ধরনের শেপ তৈরি ১)Oval

#oval {
   width: 200px; 
   height: 100px; 
   background: blue; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}

CSS3 Shapes শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৪ (CSS দিয়ে বৃত্তাকার, গোলাকার, চারকোনা সহ নানান ধরনের শেপ তৈরি ১)Up Triangle

#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

CSS3 Shapes শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৪ (CSS দিয়ে বৃত্তাকার, গোলাকার, চারকোনা সহ নানান ধরনের শেপ তৈরি ১)

Left Triangle

#left-triangle { width: 0; height: 0; border-right: 100px solid blue; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }

CSS3 Shapes শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৪ (CSS দিয়ে বৃত্তাকার, গোলাকার, চারকোনা সহ নানান ধরনের শেপ তৈরি ১)

Down Triangle

#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}
Series Navigation << শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৩ (Vertical CSS Menu তৈরি ১)শর্টকাটে CSS শিখুন প্রেক্টিকেল ক্লাস ৫ (Two Level horizontal মেনু তৈরি) >>
টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

2 মন্তব্য

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

eight + 20 =