ওয়েব ডেভোলপমেন্ট- CSS পর্ব - ৪ ।। 10% for shy-fox

in আমার বাংলা ব্লগ • 2 years ago

◾️ ১৮ মে
▪️ বুধবার

আসসালামু আলাইকুম বন্ধুরা, কেমন আছেন সবাই? আশা করছি সকলে সুস্থ ও ভালো আছেন। বেশ কয়েকদিন আগে আমি আপনাদের মাঝে HTML এর একটি সিরিজ নিয়ে এসেছিলাম। এবার CSS এর উপর আর্টিকেল লেখা শুরু করেছি। ইতিমধ্যে তিনটি পর্ব শেষ করেছি। যারা ওয়েব সাইট ডেভোলপ করতে চান আমার এই আর্টিকেল গুলো পড়লে আশা করছি বেসিক একটি ধারনা নিতে পারবেন এবং সেই সাথে আমি আশা করবো আপনারা আমার পাশে থেকে আমাকে উৎসাহিত করে যাবেন। গত সিরিজের সব লিংক আমি নিচে দিয়ে দিচ্ছি আপনারা চাইলে ভিজিট করে আসতে পারেন। গত পর্বে আমি বলেছিলাম এর পরের পর্বে CSS এর Color Values নিয়ে লেখার চেষ্টা করবো । তো চলুন তবে কম্পিউটার ওপেন করে ভি এস কোড নিয়ে বসে পড়া যাক।
HTML পর্বের লিংক

CSS পর্বের লিংক

banner.png

সোর্স

আজকের আলোচ্য বিষয়

  • CSS Borders

    ▪️ Border
    ▪️ Border width
    ▪️ Border color
    ▪️ Border sides
    ▪️ Border shorthands

divider.png

CSS Borders

▪️ Border

বর্ডার বলতে আমরা বুঝি যেকোন জিনিস এর সীমানা যা চারদিক দিকে ঘেরা থাকে। কোন ইলিমেন্টস এর চারদিক দিয়ে এর সীমানা বেধে দেয়ার ক্ষেত্রে এই বর্ডার প্রপার্টি ব্যবহার করা হয়। বর্ডার এর বিভিন্ন ধরন রয়েছে । যেমন- সলিড বর্ডার, ডটেড বর্ডার, ড্যাশ বর্ডার ইত্যাদি। নিচে বর্ডার স্টাইল এর ভ্যালু গুলো দেয়ে হলোঃ


  • dotted - এটি দিয়ে বুঝানো হয় বর্ডারটি ডট ডট আকারে হবে।

  • dashed - এটি দিয়ে বুঝানো হয় বর্ডারটি ড্যাশ আকারে হবে।

  • solid - এটি দিয়ে বুঝানো হয় বর্ডারটি একদম সলিড লাইন আকারে হবে।

  • double - এটি দিয়ে বুঝানো হয় বর্ডারটি ডাবল লাইনের সলিড লাইন আকারে হবে।

  • groove - এটি দিয়ে থ্রি ডি গ্রোভ বর্ডার বুঝানো হয়। এটির ইফেক্ট নির্ভর করে বর্ডার এর যে কালার ভ্যালু আপনি সেট করবেন তার উপরে।

  • ridge - এটি দিয়ে থ্রি ডি রিডস বর্ডার বুঝানো হয়। এটি গ্রোভ বরডার এর চেয়ে আরও চিকন আকারে দেখায়। এটির ইফেক্ট নির্ভর করে বর্ডার এর যে কালার ভ্যালু আপনি সেট করবেন তার উপরে।

  • inset - এটি একটি ইন্সেট বর্ডার। এর বাম দিকের এবং উপরের লাইনটা স্পষ্ট থাকে বাকি নিচের এবং ডান পাশের বর্ডার টি অস্পষ্ট থাকে। এটির ইফেক্ট নির্ভর করে বর্ডার এর যে কালার ভ্যালু আপনি সেট করবেন তার উপরে।

  • outset - এটি একটি আউটসেট বর্ডার। এর ডান দিকের এবং নিচের লাইনটা স্পষ্ট থাকে বাকি উপরের এবং বাম পাশের বর্ডার টি অস্পষ্ট থাকে। এটির ইফেক্ট নির্ভর করে বর্ডার এর যে কালার ভ্যালু আপনি সেট করবেন তার উপরে।

  • none - এটি দিয়ে বর্ডার কে সরিয়ে ফেলা হয়।

  • hidden - এটি দিয়ে বর্ডার কে হাইড করে রাখা হয়।

কোড এবং এর আউটপুট লক্ষ্য করুন।

1.PNG

2.PNG

divider.png

▪️ Border width

Border width property দিয়ে আমরা বর্ডার এর width ঠিক করে দিতে পারি। এর বিভিন্ন মান আছে সেগুলো আমরা লিখে দিতে পারি আবার পিক্সেল আকারেও এর মান দিতে পারি। Border width property দেয়ার আগে বর্ডার স্টাইল এর মধ্যে বরডারটি আগে সেট করে নিতে হবে। না হলে এটি কাজ করবে না। নিচের কোডটি লক্ষ করুন।

3.PNG

4.PNG

5.PNG

divider.png

▪️ Border color

Border-color property ব্যবহার করে আমরা যেকোন কালার দিতে পারি। RGB, HEX, HSL, Name-color এর প্রত্যেকটি কালার কোডই এখানে ব্যবহার করা যাবে। কাস্টম কালার দেয়ার ক্ষেত্রে সাধারনত এইসব কালার ব্যবহার করা হয়। কোডটি দেখুন।

6.PNG

7.PNG

divider.png

▪️ Border sides

Border sides দিয়ে ইনডিভিজুয়াল ভাবে বর্ডার এর স্টাইল দেয়া যায়। অর্থাৎ আপনি চাইলে বাম পাশে একরকম স্টাইল, ডান পাশে আরেকরকম, উপরে এবং নিচে অন্যরকম এভাবে স্টাইল করতে পারেন। এখানে মুলত চারটি ভ্যালু ব্যবহার করা হয়। আপনি চাইলে আলাদা আলাদা ভাবে ডিক্লার করতে পারেন আবার একটি, দুইটি, তিনটি, চারটি এভাবেও ডিক্লার করতে পারেন। যদি বর্ডার স্টাইল এর মধ্যে (dotted, solid, double, dashed) এভাবে ডিক্লার করেন তবে প্রথমটি হবে টপ বর্ডার এর জন্য, সলিড হবে ডান পাশেরটি জন্য, ডাবল হবে নিচের বা বটম বর্ডার এর জন্য এবং ড্যাশ হবে বাম পাশের বর্ডার এর জন্য। অনুরুপভাবে যদি তিনটি ভ্যালু দেন (dotted, solid, double) তবে প্রথমটি হবে টপের জন্য। মাঝেরটি হবে বাম এবং ডান পাশের জন্য এবং শেষেরটি হবে নিচের জন্য। দুইটি দিলে (dotted, solid) প্রথমটি টপ এবং বোটম এবং পরেরটি লেফট এবং রাইট। একটি ভ্যালু দিলে (dotted) তা চারপাশেই একই স্টাইল এড হবে। নিচের কোডটি লক্ষ্য করুন।

8.PNG

9.PNG

divider.png

▪️ Border shorthands

Border shorthands বলতে বুঝায় border-style property ব্যবহার না করে শুধুমাত্র border property ব্যবহার করে border-style property এর সকল কাজ একবারে করে ফেলা যায়। আলাদা আলাদাভাবে এখানে আর প্রপার্টি ডিক্লার করা লাগে না। নিচের কোডটি লক্ষ্য করুন।

10.PNG

11.PNG

divider.png

আজ এখানেই শেষ করছি। আগামিকাল CSS এর অন্য টপিক্স নিয়ে লেখার চেষ্টা করবো। ভালো থাকবেন সবাই। আল্লাহ হাফেজ।

আমার পরিচয়

santo.jpg

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

শুভেচ্ছান্তে
@rokibulsanto

tnq.png

Mybanner.png


blogPng.gif

#fintech #computing #science #webdevelopment #amarbanglablog #shy-fox #club75
2 years ago in আমার বাংলা ব্লগ by
$2.40
  • Past Payouts $2.40, 0.00 TRX
  • - Author $1.14, 0.00 TRX
  • - Curators $1.26, 0.00 TRX
6 votes
Reply 9
Sort:  
  • Trending
    • [-]
     2 years ago 

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

    $0.00
      Reply
      [-]
       2 years ago 

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

      $0.00
        Reply
        [-]
         2 years ago 

        বিষয়গুলো প্রথম ধাক্কায় বুঝে একটি মুশকিল। তবে কয়েকবার মন দিয়ে পড়লে আয়ত্তে আসে। তার সাথে প্যাকটিস ও চালিয়ে যেতে হয়। ধন্যবাদ আপনাকে

        $0.00
          Reply
          [-]
           2 years ago 

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

          $0.00
            Reply
            [-]
             2 years ago 

            জি অবশ্যই ধারাবাহিকতা বজায় রাখছি। পোস্টে ভিজিট করবেন আশা করছি। আপনাদের সুন্দর সুন্দর কমেন্ট পেলে মনে অনেক উৎসাহ পাই আর্টিকেল লেখার জন্য। ভালবাসা রইল

            $0.00
              Reply
              [-]
               2 years ago 

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

              $0.00
                Reply
                [-]
                 2 years ago 

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

                $0.00
                  Reply
                  [-]
                   2 years ago 
                  Your post has been successfully curated by our team via @pelon53 at 40%. Thank you for your committed efforts, we invite you to do more and keep posting high quality posts for a chance to win valuable upvotes from our team of curators and why not be selected for an additional upvote later this week in the Top Seven.


                  Note : You must enter the tag #fintech for your post to be reviewed.

                  $0.00
                    Reply
                    [-]
                     2 years ago 

                    Thank you so much for supporting me ❤

                    $0.00
                      Reply

                      Coin Marketplace

                      STEEM 0.16
                      TRX 0.16
                      JST 0.030
                      BTC 59207.83
                      ETH 2464.61
                      USDT 1.00
                      SBD 2.43