Rasel khan web programming

সোমবার, ৩০ এপ্রিল, ২০১২

সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল (CSS Background)


সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল (CSS Background)

লেখক  রাসেল খান  
আপনার সাইটের background অনেক বেশি গুরুত্ত্বপুর্ন তাই এই টিউটোরিয়াল টি আপনাদের মনোযোগ সহকারে দেখা উচিতআপনি যদি professional website তৈরী করতে চান তাহলে  light background এর মধ্যে dark টেক্স ব্যবহার করা উচিতআর যদি শুধু শখের জন্য তৈরী করতে চান তাহলে যেকোন কালারের সমন্নয় গ্রহনযোগ্য
সিএসএস এর মাধ্যমে আপনি যেকোন সিএসএস এলিমেন্ট এর background color or image  সেট করতে পারেনতাছাড়া  background image কিভাবে প্রর্দশিত হবে সে বিষয়টি আপনি নিয়ন্ত্রন করতে পারবেনআপনি পছন্দমত এটিকে horizontally, vertically repeat করতে পারেনতাছাড়া আপনি  background কে fixed position এ রাখতে পারেন বা scroll করতে পারেন
নিচে সিএসএস background এর ঊদাহরন দেয়া হলো
1.h4 { background-color: white; }
2.p  { background-color: #1078E1; }
3.ul { background-color: rgb( 149, 206, 145); }
প্রদর্শন

This is a <h4> with a white background

This is a <p> with a background using the hexadecimal value of #1078E1
  • This is an unordered list
  • with an RGB value of 149, 206, 145

সিএসএস Background Image:

gradient background এর মত image কে left-to-right  করা যায়অথবা যখন ইউজার স্ক্রল করবে তখন আপনি image কে fixed  অবস্থায় রাখতে পারেন
1.p { background-image: url(smallPic.jpg); }
2.h4{ background-image: url(http://
3.www.webforbd.blogspot.com/pics/cssT/smallPic.jpg); }
This <p> has a background image using a local path to the picture.

This <h4> has a background image using the complete url path.

01.p {
02.background-image: url(smallPic.jpg);
03.background-repeat: repeat; }
04.h4 {
05.background-image: url(smallPic.jpg);
06.background-repeat: repeat-y;}
07.ol {
08.background-image: url(smallPic.jpg);
09.background-repeat: repeat-x;}
10.ul {
11.background-image: url(smallPic.jpg);
12.background-repeat: no-repeat;}
প্রদর্শন:
This <p> has a background image repeating in both directions (default repeat). If you use this option, make sure that your image was designed to be repeated.

This <h4> has a background image repeating vertically (y). You could this to add a style to the side of your element.

  1. This is an ordered list
  2. With a background that repeats
  3. Horizontally (x)
  • This is an unordered list
  • With a background that repeats
  • in neither direction.

সিএসএস Background Image এর অবস্থান:

আপনি যদি নির্দিষ্ট করতে চান যে এইচটিএমএল এলিমেন্ট এর মধ্যে কোথায় image টি প্রদর্শিত হবে তাহলে সেটা CSS's background-position এর মাধ্যমে করা যায়নিচে তিন (length, percentages, keywords) প্রকারের নির্দিষ্ট করার ঊপায় দেখানো হলো
1.p {
2.background-image: url(smallPic.jpg);
3.background-position: 20px 10px;
4.}
5.h4 {
6.background-image: url(smallPic.jpg);
7.background-position: 30% 30%;
8.}
প্রদর্শন:

সিএসএস Gradient Background:

যদি gradient background  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে
Image:
Background Image
ঊপরের image টি খুব সাধারন আমরা এটাকে horizontal ভাবে রেখেছি এই image টি 1 pixel এরrepeat attribute এর মাধ্যমে এর value       repeat-x   সেট করেছি  যার ফলে image টি নির্দিষ্ট এর বাম হতে ডান দিকে বিস্তৃতি লাভ করবে নিচে উদাহরনে paragraph এলিমেন্ট এ gradient background যোগ হয়েছে
1.p {
2.background-image: url(http://www.webforbd.blogspot.com/
3.images/stories/back_image.jpg);
4.background-repeat: repeat-x;
5.}

প্রদর্শন:
এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু ল কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা

কোন মন্তব্য নেই:

একটি মন্তব্য পোস্ট করুন