ব্লগের কোণগুলোকে বাঁকা করার পদ্ধতি — Javascript সমূহ ১৬

[ছবি: cu8Sq.png]

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

# আমাদেরকে এই কাজটি করার জন্য ব্লগের ড্যাশবোর্ডে লগইন হয়ে Layout> Edit HTML ট্যাবে কাজ করতে হবে। Make your blogger/ blogspot blog's corner round or curve with css code.
আপনার ব্লগের কোন অংশের কর্ণারকে গোলাকার করতে চান? তা আগে চিন্তা করে ঠিক করে নিন। তাহলে কাজ করা সহজ হবে।
১। মূল ব্লগশরীরের বাহিরের অংশকে বাঁকিয়ে ফেলার পদ্ধতিঃ
এরকম  ব্লগে রয়েছে। #outer-wrapper লেখাটিকে খুঁজে বের করুন। এই লেখাটির ঠিক নিচে বিভিন্ন কোড রয়েছে। শেষে একটি দ্বিতীয় ব্রাকেট } রয়েছে। এই দ্বিতীয় ব্রাকেটের ঠিক উপরে নিচের কোডটি লিখে দিয়ে PREVIEW দেখুন। পছন্দ হলে SAVE TEMPLATE লেখাতে ক্লিক করে পরিবর্তনগুলো সংরক্ষণ করুন।

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

এখানে 10px মানটি পরিবর্তন করে 15, 20 ইত্যাদি করে নিয়ে পরীক্ষা করে দেখুন।

২। সাইডবারের কোণগুলিকে বাঁকা করার পদ্ধতিঃ
তাহলে #sidebar-wrapper1 লেখাটি খুঁজে বের করুন। এখানে 1 অথবা 2 অথবা 3 অথবা 4 যে কোন নম্বরের সাইডবার হতে পারে। এখানে থাকা কোডগুলোর নিচে দ্বিতীয় ব্রাকেট শেষ হবার আগে একই কোড বসিয়ে দিন।

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

এখানে 10px মানটি পরিবর্তন করে দেখুন কোনটা পছন্দ হয়।

৩। পোস্ট পাতার কোণগুলিকে গোলাকার করার পদ্ধতিঃ
তাহলে #main-wrapper { অংশের নিচে দ্বিতীয় ব্রাকেট শেষ হবার আগে একই কোড বসাতে হবে।

# যদি নির্দিষ্ট কোন একটি কোণকে বাঁকা করতে চান, তাহলে নিচের কোড ব্যবহার করুন।

-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;

এই কোড ব্যবহার করলে উপরের বামপাশের কোন গোলাকার হয়ে যাবে। এভাবে শুধুমাত্র উপরের ডানপাশ, কিংবা নিচের ডান অথবা বামপাশ গোলাকার করতে পারবেন।

ব্লগবডির বিভিন্ন অংশের কোনগুলিকে বাঁকা করার পরে আরও একটি ইফেক্ট যোগ করা যায়। আপনি ইচ্ছে করলে "ছায়া" (Shadow) দিতে পারেন। এর জন্য উপরের কোডের নিচেই আবারো কিছু কোড যোগ করতে হবে।

-moz-box-shadow:0 0 15px #FFFF00;-webkit-box-shadow:0 0 15px #FFFF00;

আপনি ও আমার বন্ধুকে পরিচয় করিয়ে এবং রেজিস্টেশন করুন আমার ফোরামে

 

Level New

আমি শুভ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 184 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমাকে ফেসবুকে পেতে http://www.facebook.com/shuvobd1020


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

ভাই কিছুই বুঝলাম না ( অল্প জানতাতো তাই ) । আরেকটু সহজ , সুন্দর এবং পাররে স্কীনশটে দিয়ে করবেন যাতে আমার মত নতুনদের বুঝতে একটু সুবিথা হয় । ধন্যবাদ ।

    @সাব্বির আলম: ভাই এই সাইট টা দেখতে পারেন যদি শিখার ইচ্ছা থাকে! পুরাপুরি বাংলায় ভিডিও টিউটোরিয়াল দেওয়া আছে!

ভালই লেখছেন কিন্তু আরেকটু টাইম দিলে ভালো করতেন! আর আরো কয়েকটা প্রপারটি ভালো কইরা ব্যাখ্যা করলে ভালো হইতো!

আপনি CSS3 এর Border-Radius প্রপার্টি ব্যবহার করেছেন ঠিক কিন্তু আমার মনে হয় এই ধরনের ছোট ছোট Tutorial না দিয়ে বড় এবং কাজের (আর অবশ্যই সহজে বুঝার মত) করে দিলে ভাল হত।
যাই হোক, ধন্যবাদ

Level 0

শুভ ভাই অনেক ভাল লাগল টিউনটি পড়ে ,কিন্তু #outer-wrapper কীভাবে সহজে খুজে পেতে পারি বললে অনেক উপকৃৎ হতাম………

Level 0

ভাই আমার ব্লগ লাগবে না আমার ওয়েব সাইটে কিভাবে এমন করতে পারি বা ছায়া যোগ করতে পারি CSS কোড টা দিলে উপকার হত।