Tag Archive for সিএসএস

সিএসএস৩ দিয়ে রাউন্ড এবং ইলিফটিকাল কর্নারের ব্যবহার

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

সিএসএস দিয়ে লেখায় ব্লার ইফেক্ট যুক্ত করুন!

আসসালামু আলাইকুম। সবাইকে সিএসএস ট্রিক্স এ স্বাগতম। গত টিউটোরিয়ালে দেখিয়েছিলাম কিভাবে মেনুবারে গ্রোয়িং ইফেক্ট যুক্ত করবেন সিএসএস দিয়ে। এবার দেখাবো কিভাবে সিএসএস ব্যবহার করে লেখার মধ্যে ব্লার ইফেক্ট দেওয়া যায়। তো চলুন কোডগুলো দেখে নিই- নরমাল টেক্সট, ফন্ট, কালার এবং সাইজ ইত্যাদির জন্য নিচের কোডগুলো h3 সিলেক্টরে বসাতে হবে – font: bold 80px Helvetica, Sans-Serif;…

সিএসএস কি? [পর্ব-০১]

সবাইকে সালাম এবং শুভেচ্ছা জানিয়ে শুরু করছি আমার আজকের এই টিউটোরিয়াল । আজ থেকে আমি একটি নতুন পর্বভিত্তিক টিউটোরিয়াল শুরু করতে যাচ্ছি । আমার গত পর্বভিত্তিক টিউটোরিয়াল ছিল সার্চ ইঞ্জিন অপটিমাইজেশন (এসইও) নিয়ে । আজ থেকে আমরা সিএসএস এর উপর টিউটোরিয়াল শুরু করবো । এমন এক সময় ছিল যখন শুধুমাত্র এইচটিএমএল দিয়েই একটি ওয়েব পেইজ…

সিএসএস দিয়ে খাজকাটা বর্ডার তৈরি করবেন যেভাবে।

আসসালামু আলাইকুম। সবাইকে সিএসএস ট্রিক্স এ স্বাগতম। গত টিউটোরিয়ালে দেখিয়েছিলাম কিভাবে  বর্ডারসহ ত্রিভুজ তৈরি করা যায় সিএসএস দিয়ে। এবার দেখাবো কিভাবে সিএসএস৩ ব্যবহার করে খাজকাটা বর্ডার তৈরি করা যায়। তো চলুন কোডগুলো দেখে নিই- <html><head><style> .header{ color:white; background-color:#2B3A48; text-align:center; } .header:after { content: ” “; display:block; position: relative; top:0px;left:0px; width:100%; height:36px; background: linear-gradient(#2B3A48 0%, transparent…

যেভাবে বর্ডারসহ ত্রিভুজ তৈরি করবেন সিএসএস দিয়ে।

সিএসএস আসায় ইমেজের ব্যবহার অনেকাংশে কমে গেছে। সিএসএস দিয়ে ইমেজ বানানো যায়,এখন css3 আসাতে সে কাজ আরও সহজ হয়েছে। css দিয়ে কিভাবে  ত্রিভুজের বর্ডার তৈরি করা যায় তা দেখাবো আজকে। আমরা সাধারনত যে সকল বর্ডার তৈরি করি তা সরল রৈখিক এবং আয়তাকার, বর্গাকার। দেখুন কিভাবে  ত্রিভুজ বর্ডার তৈরি করছি- [css] <html><head> <style> .triangle { width:…

সিএসএস এর বিভিন্ন শেপের কালেকশনসমূহ!

আজকে আপনাদের জন্য নিয়ে এলাম  সিএসএস এর শেপের কালেকশন! এই টিউটরিয়ালের মাধ্যমে দেখাব কিভাবে সিএসএস এবং এইচটিএমএল ব্যবহার করে বিভিন্নন প্রকার শেপ গঠন করা যায়। তো চলুন দেখি নিচে- বর্গ শেপ এর জন্য সিএসএস [css]#square { width: 100px; height: 100px; background: red; } [/css] আয়তাকার [css]#rectangle { width: 200px; height: 100px; background: red; }[/css] গোলাকার…

সিএসএস এ টেক্সট এনিমেশন!

আশা করি সবাই ভালই আছেন। আমার আজকের আর্টিকেলও সিএসএস নিয়ে। আজকে লিখব সিএসএস এনিমেশন। কোন টেক্সটে কিভাবে এনিমেশন দেওয়া যায় তাই দেখাব আজকে।  কিছু শব্দ পর্যায়ক্রমে পরিবর্তন হবে। এবং এভাবে হতে থাকবে চক্রাকারে। সিএসএস এনিমেশন ব্যবহার করে কাজটি কিভাবে করেছি তার বর্ননা নিচে দেখুন। তো চলুন কোডগুলো দেখে নিই- এইচটিএমএল কোড- [css]<section> <h2> <span>Real poetry…

সিএসএস৩ এর মাধ্যমে গ্র্যাডিয়েন্ট ইফেক্ট

সিএসএস৩  মাধ্যমে ফটোশপের মত গ্র্যাডিয়েন্ট  ইফেক্ট যেমন- linear , radial  এসব ধরণের ইফেক্ট ই দেওয়া যায়।এগুলো  আজকে আমার টিউটোরিয়াল এ দেখাব  কিভাবে এই ইফেক্টগুলোর কোড লিখতে হয় ।এক্ষেত্রে সকল ব্রাউজারের জন্য আলাদা আলাদা কোড উল্লেখ করে দিতে হয়। সকলের জন্য আলাদা আলাদা কোড হলেও সবার জন্য একটি  স্ট্যান্ডার্ড কোড হবে। সেটি নিচে উল্লেখ করা হল-…

সিএসএস-৩ এর মাধ্যমে বক্স-শেডো তৈরি

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

টেক্সট এলাইনমেন্ট (Text Alignment): সি এস এস (পর্ব-১১)

ওয়েব পেজে টেক্সটকে সাজানোর জন্য টেক্সট এলাইনমেন্ট ব্যবহার করা হয়। টেক্সটকে পেজের বাম পাশে রাখার জন্য Declaration করতে হবে text-align:left; অনুরূপভাবে ডান পাশে রাখার জন্য Declaration করতে হবে text-align:right; মধ্যস্থানে রাখার জন্য Declaration করতে হবে text-align:center; । যদি টেক্সট এর প্রতিটা লাইন একই আকারে সাজাতে চাই তাহলে Declaration করতে হবে text-align:justify । অনুশীলন প্রজেক্ট <html>…

টেক্সট (Text) : সি এস এস (পর্ব-১০)

ওয়েব সাইটের প্রধান উপাদান হচ্ছে টেক্সট। সৌন্দর্য বৃদ্ধির জন্য এবং বিশেষ কিছু সুবিধা পাবার জন্য css এর মাধ্যমে টেক্সট এর স্টাইল তৈরি করা হয়। টেক্সট এর স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়। এগুলো হচ্ছে টেক্সট কালার (Text Color) টেক্সট এলাইনমেন্ট (Text Alignment) টেক্সট ডেকরেশন (Text Decoration) টেক্সট ট্রান্সফরমেশন (Text Transformation)…

ব্যাকগ্রাউন্ড (Background) : সি এস এস (পর্ব-৯)

ওয়েবপেজের বিভিন্ন উপাদান যেমন Body, Pragaph, Table ইত্যাদির জন্য ব্যাগ্রাউন্ড একটি অপরিহার্য উপাদান।এ সকল উপাদান সমূহের ব্যাকগ্রাউন্ড হিসেবে কালার অথবা ইমেজ ব্যবহার করা্ যায়। ব্যাকগ্রাউন্ড হিসেবে কালার ব্যবহার ব্যাকগ্রাউন্ড হিসেবে কালার ব্যবহারের জন্য Declaration হতে পারে background:#900; অথবা background-color:#900; । যেমন body{ background-color:#900; } । ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহার ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহারের জন্য Declaration…

ইন-লাইন স্টাইল শীট (পর্ব-৮)

ইন-লাইন স্টাইল শীট এ পদ্ধতিতে এইচ টি এম এল এর প্রতিটা ট্যাগের এট্রিবিউটস হিসেবে style এট্রিবিউটস যুক্ত করে এর মধ্যে সি এস এস এর জন্য প্রয়োজনীয় Declaration সমূহ যুক্ত করা হয়। যেমন<p style="color:#066; font-family:Tahoma; text-align:justify;"> অনুশীলন প্রজেক্ট HTML Code <html> <head> <title> Selectors</title> </head> <body > <h1>www.tutohost.com</h1> <p style="color:#066; font-family:Tahoma; text-align:justify;"> We are bangladeshi Hostgator…

এক্সটার্নাল স্টাইল শীট : সি এস এস (পর্ব-৭)

এ পদ্ধতিতে সি এস এস এর জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ আলাদা স্ক্রিপ্টে রাখা হয় এবং স্ক্রিপ্টটিকে বা স্টাইল শীটটিকে style.css বা এর অনুরূপ নামে save করা হয়। <head>………….</head> এর মধ্যে <link rel=”stylesheet” type=”text/css” href=”css.css”> যুক্ত করে এক্সটার্নাল স্টাইল শীট এর সাথে এইচ টি এম এল এর লিংক তৈরি করা হয়।     অনুশীলন…

ইমবেডেড স্টাইল শীট : সি এস এস (পর্ব-৬)

এইচ টি এম এল এর সাথে সি এস এস যুক্ত করার বিষয়টি খুবই গুরুত্বপূর্ণ। এইচ টি এম এল এর সাথে সি এস এস যুক্ত করার জন্য তিনটি পদ্ধতি রয়েছে। যথা ইমবেডেড স্টাইল শীট ইন-লাইন স্টাইল শীট এক্সটার্নাল স্টাইল শীট ইমবেডেড স্টাইল শীট এ পদ্ধতিতে <head>………….</head> এর মধ্যে <style>..</style> বা স্টাইল ট্যাগ ব্যাবহার করা হয়। এবং…