CSS দিয়ে আরও কয়েটা টেক্সটা স্টাইল

CSS দিয়ে টেক্সটা স্টাইল নিয়ে কদিন আগে লিখেছিলাম। আসলে CSS 3 এর সেডোর নতুন ফিচারটা একেবারে জটিল। যাই হক ফেজবুকে কয়েকজন বলল, তারা এই রকম আরও টিউটোরিয়াল চায়। তাই পরে পার্টি লিখলাম এইটাতেও আরও তিনটা স্টাইল যোগ করেছি। অটোমেটিক ফন্ট লোডিং এর জন্য আর কোডিং করার ইচ্ছা করছে না তাই Showcard Gthic ফন্টটা এইখান থেকে নামিয়ে ইনিস্টল করে নিন।

১. Style 1:

ব্যাবহৃত CSS কোড:

h1{
font-size:40px;
text-align:center;
font-family:Showcard Gothic;
color:#F90;
text-shadow: 0 04px #FF0,
0-5px 4px #F60,
0 05px 07px #F03;
}

২. Style 2:

ব্যাবহৃত CSS কোড:

h2 {
font-size:40px;
text-align: center;
font-family:Showcard Gothic;
color:#470781;
text-shadow:0-6px 2px #ae00ff,
0 5px #960EC9;
}

৩. Style 3:

ব্যাবহৃত CSS কোড:

h3 {
font-size:40px;
text-align:center;
font-family:Showcard Gothic;
color:#A40004;
text-shadow: 0 3px #F00,
0-2px #AA0004;
}

আনলাইন ডেমো | সোর্চ ডাউনলোড

পরিক্ষা চলছে দোয়া চাই।


ফেসবুকের মাধ্যমে মন্তব্য লিখুন

  9 comments for “CSS দিয়ে আরও কয়েটা টেক্সটা স্টাইল

  1. Md. Frioz Mahmud
    May 14, 2011 at 12:08 pm

    text-shadow: 0 3px #F00,
    0-2px #AA0004;

    বিস্তারিত আলোচনা কর।

    • May 15, 2011 at 4:45 pm

      @Md. Frioz Mahmud,
      আপনাকে অসংখ্য ধন্যবাদ ভুল গুলো উল্লেখ করার জন্য। পোষ্ট সম্পাদনা করার অধিকার আমার নাই। তাই এই খানে একটু বর্ণনা করার চেষ্টা করছি।

      0 3px #F00- এটা নিচের দিকে ৩ পিক্সেল এর লাল রং সৃষ্টি করবে এবং একটুও ফাটবে না।

      0-2px #AA0004- এটা উপরের দিকে ২ পিক্সেল এর লাল (গাড়) রং সৃষ্টি করবে এবং নো ফাটা-ফাটি।

      আপনার বোঝার সুবিধার্থে আর একটু:

      0 3px 2px #F00 – এটা ৩ পিক্সেল নিচে নামবে এবং ২ পিক্সেল ফাটবে। কোডে পরিবর্তন লক্ষ্য করুন বুঝতে পারবেন।

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

  2. Md. Frioz Mahmud
    May 14, 2011 at 11:46 am

    ভাই
    সি,এস, এস এর
    margin: 5px 0 15px 15px;
    padding: 5px 0 15px 15px;
    কোন ভেলু টা left, right, top, bottom তা বোঝার উপায় কি?
    এই নিয়ে একটা লেখা লিখেন।

    • May 15, 2011 at 5:13 pm

      @Md. Frioz Mahmud,
      margin: 5px 0 15px 15px;
      ৫ পিক্সেল উপরে, ১৫ পিক্সেল ডান পাসে এবং ১৫ পিক্সেল নিচের দিকে।

      আপনার সুবিধার্থে আরও একটু:
      margin: 25px 50px 75px 100px;
      উপরে ২৫, ডান পাসে ৫০, নিচে ৭৫ এবং বাম পাসে ১০০ পিক্সেল।

      padding এর ক্ষেত্রের ঐ একই ব্যাপার।

      • harunsid
        June 11, 2012 at 5:21 pm

        উপরের ব্যাখ্যা -তে ভুল আছে, আশা করছি লেখক ঠিক করে দিবেন।

  3. তামিমা
    April 20, 2011 at 10:06 pm

    এত ছোট মানুষ হয়ে যে,এত সুন্দর কাজ করেছ..তার জন্য তোমাকে অনেক ধন্যবাদ…দোয়া রইল.. তোমার পরীক্ষা ভাল হোক…আর অবশ্যই আশা করি আরো ভাল ভাল টিউটোরিয়াল আমাদের উপাহার দিবে…

  4. April 20, 2011 at 8:04 pm

    এগুলা দোস্ত তেমন সুন্দর না, ভালো দেখতে সুন্দর এমন কিছু দে না…

    • April 23, 2011 at 5:23 pm

      @ডিজে আরিফ, শুধু কোড দিতে আমার মত পিচ্চি মানুষ আর কত গ্রেস ফুল ডিজাইন করবে? আর অত ভালো ডিজাইন হলে তো ফটোই ব্যাবহার করা যাবে।

Leave a Reply