সিএসএস এবং jQuery সহ চিত্রগুলি উন্নত করার জন্য 25 টি টিউটোরিয়াল

CSS-3-বক্স-ছায়া-চিত্র-হোভার-ইফেক্টস-ইমেজ-স্টাইলিং-ব্যাকগ্রাউন্ডস-উপস্থিতি-অনুপ্রেরণা-ছায়া-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট

চিত্রগুলির উন্নতি করার সময় আমরা ফটোশপের সাথে এটি করতে বেছে নিতে পারি এবং তারপরে এটি ওয়েব পৃষ্ঠায় মাউন্ট করতে পারি বা আমরা বি বিকল্পটিও বেছে নিতে পারি: এটি উপলব্ধ যে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কৌশলগুলি দিয়ে তা করুন।

জাম্পের পরে, চিত্রগুলি উন্নত করার জন্য অনেকগুলি কৌশল রয়েছে, প্রায় সবগুলিই jQuery দিয়ে মূল বেস হিসাবে বা CSS3 দিয়ে তৈরি হয়েছিল সর্বশেষতম ওয়েব স্ট্যান্ডার্ডগুলির সুবিধা গ্রহণ করা, যদিও আমি আপনাকে মনে করিয়ে দিচ্ছি যে সেক্ষেত্রে আমরা কিছু ব্রাউজারের সাথে সামঞ্জস্যতা হারাব।

তারা ইংরেজিতে তবে তারা উড়তে ধরা পড়েছে, প্রতিশ্রুতি দিয়েছে :)

উত্স | ১ ম ডাব্লুডি

CSS3 বৃত্তাকার চিত্র jQuery সহ

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

সিএসএস -3-বৃত্তাকার-ইমেজ-সাথে jquery- চিত্র-হোভার-ইফেক্ট-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-মেক-ইমেজ-স্ট্যান্ড-আউট

2.

সিএসএস 2.1 সহ একাধিক পটভূমি এবং সীমানা

একক এইচটিএমএল উপাদানের জন্য 2.1 টি ব্যাকগ্রাউন্ড ক্যানভ্যাস, 3 স্থির আকারের উপস্থাপিত চিত্র এবং একাধিক জটিল সীমানা সরবরাহ করতে কীভাবে CSS 2 সিউডো-এলিমেন্টগুলি ব্যবহার করবেন তা শিখুন।

একাধিক-ব্যাকগ্রাউন্ডস-বর্ডারস-সিএসএস-2-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-তৈরি করুন-চিত্রগুলি স্ট্যান্ড-আউট

3.

দ্রুত টিপ: সাধারণ সিএসএস সহ একাধিক সীমানা

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

সিম্পল-সিএসএস-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ডের সাথে দ্রুত-টিপ-একাধিক-সীমানা-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-তৈরি করুন-চিত্রগুলি স্ট্যান্ড-আউট

4.

CSS2 সহ গতিময় আকারের উপাদানগুলির একাধিক সীমানা

তৃতীয় সংস্করণ নিকোলাস গালাগের যদি আপনি উপাদানটির আকার না পান তবে আপনাকে কী করতে হবে তা আপনাকে দেখায়।

সিএসএস -2-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-চেহারা-অনুপ্রেরণা-ছায়া-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট

5.

মজা করুন w ​​/ সীমানা - beveled, টিপুন, এবং আরও!

বিভিন্ন প্রভাব পেতে সিএসএস এবং কিছু সাধারণ সীমান্ত শৈলীর কৌশলগুলি দিয়ে কীভাবে চাপিত প্রভাব অর্জন করবেন তা শিখুন।

সীমানা-বেভেলড-চাপা-হওয়া-আরও-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-সাথে-মজা করুন-ছায়া-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট-যুক্ত করুন

6.

সিএসএস 3 সহ পোলারয়েডস

পোলারয়েড ছবিগুলির একটি সম্পূর্ণরূপে উত্থিত সেটগুলিতে চিত্রের অন্যথায় দৃ un়চেতা তালিকাতে পরিণত করতে কীভাবে দুর্দান্ত কিছু CSS2 এবং CSS3 ব্যবহার করবেন তা শিখুন।

পোলারয়েডস-সিএসএস -3-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-মেক-ইমেজ-স্ট্যান্ড-আউট

7.

নিখুঁত পূর্ণ পৃষ্ঠা ব্যাকগ্রাউন্ড চিত্র

সিএসএসের সাথে কীভাবে পটভূমি চিত্র যুক্ত করা যায় তা পুরো পৃষ্ঠাকে চিত্রের সাথে পূরণ করে, কোনও সাদা স্থান নেই, প্রয়োজন মতো চিত্র স্কেল করে, স্ক্রোলবারগুলি তৈরি করে না এবং আরও অনেক কিছু করে।

নিখুঁত-পূর্ণ পৃষ্ঠা-পটভূমি-চিত্র-হোভার-ইফেক্ট-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ডস-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-তৈরি করুন-চিত্রগুলি স্ট্যান্ড-আউট

8.

CSS3 বক্সের ছায়া এবং চিত্রের হোভার ইফেক্টস

কেবল একটি স্টাইল শীট সম্পাদনা করে ড্রপ শ্যাডো এফেক্ট যুক্ত করার একটি নতুন উপায় অন্বেষণ করুন।

CSS-3-বক্স-ছায়া-চিত্র-হোভার-ইফেক্টস-ইমেজ-স্টাইলিং-ব্যাকগ্রাউন্ডস-উপস্থিতি-অনুপ্রেরণা-ছায়া-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট

9.

অভিনব থাম্বনেইল হোভার এফেক্ট ডাব্লু / জিকুয়েরি

CSS এবং jQuery এর সাথে ঝরঝরে ফ্ল্যাশ-স্টাইলের প্রভাব অর্জন করুন।

জ্যাকোরি-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ডের সাথে অভিনব-থাম্বনেইল-হোভার-ইফেক্ট-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-তৈরি করুন-চিত্রগুলি স্ট্যান্ড-আউট

10.

কীভাবে সহজ সিএসএস ইমেজ রোলওভার এফেক্ট তৈরি করবেন

এই টিউটোরিয়ালে আপনি বেসিক এইচটিএমএল এবং সিএসএস স্টাইলিং সহ কীভাবে সহজ সিএসএস ইমেজ রোলওভার এফেক্ট তৈরি করবেন তা শিখতে চলেছেন।

কীভাবে সিম্পল-সিএসএস-ইমেজ-রোলওভার-ইফেক্ট-ইমেজ-হোভার-ইফেক্ট-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-মেক-ইমেজ-স্ট্যান্ড-আউট

11.

ভাসমান টিউটোরিয়াল

ভাসমান টিউটোরিয়াল আপনাকে ভাসমান উপাদানগুলির মূল বিষয়গুলি যেমন চিত্র, ড্রপ ক্যাপ, পরবর্তী এবং পিছনের বোতাম, চিত্র গ্যালারী, ইনলাইন তালিকা এবং মাল্টি-কলাম লেআউটগুলি নিয়ে যায়। ভাসমান চিত্রটি উত্সর্গীকৃত 4 টি টিউটোরিয়াল দেখুন।

ভাসমান-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-মেক-ইমেজ-স্ট্যান্ড-আউট

12.

সিএসএস ব্যবহার করে স্নাজি হোভার ইফেক্টস

এই টিউটোরিয়ালে, আপনি CSS2.1 বৈশিষ্ট্য ব্যবহার করে নমনীয় অ্যাডভান্সড হোভার কৌশলগুলি তৈরি করবেন।

স্ন্যাজি-হোভার-এফেক্ট-সিএসএস-ইমেজ-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট

13.

দ্রুত রোলওভার ছাড়াই

লোড

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

প্রি-লোড-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট-ফাস্ট-রোলওভারগুলি

14.

jQuery বৃত্তাকার কোণে

বৃত্তাকার কোণ এবং আরও অনেক ধরণের জন্য প্রচুর jQuery প্রভাব।

বৃত্তাকার-কোণগুলি-জেকুরি-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-তৈরি করুন-চিত্রগুলি স্ট্যান্ড-আউট

15.

JQuery ব্যবহার করে সবচেয়ে সহজ টুলটিপ এবং চিত্র প্রাকদর্শন

JQuery রোলওভার প্রিভিউ স্ক্রিপ্ট ব্যবহারের 3 টি উদাহরণ দেখুন। এই সাধারণ স্ক্রিপ্টটি বিভিন্ন উদ্দেশ্যে প্রয়োগ করা যেতে পারে।

সহজ-টুলটিপ-পূর্বরূপ-ব্যবহার-জ্যাকোরি-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট

16.

সুপারসাইজড - পূর্ণ পর্দার পটভূমি /

Slideshow

jQuery প্লাগইন

সুপারজিড হ'ল একটি জিকুয়েরি প্লাগইন যা চিত্রের মাত্রা অনুপাত এবং চক্রগুলি চিত্রগুলি / ব্যাকগ্রাউন্ডগুলি ট্রানজিশন এবং প্রিলোডিং সহ স্লাইডশোর মাধ্যমে বজায় রাখার ক্ষেত্রে ব্রাউজারটি পূরণ করতে চিত্রগুলিকে আকার দেয়।

সুপারসাইজড-পূর্ণ-স্ক্রিন-ব্যাকগ্রাউন্ড-স্লাইডশো-জুউয়েরি-প্লাগইন-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-তৈরি করুন-চিত্রগুলি স্ট্যান্ড-আউট

17.

পিএনজি ওভারলে

ক্লায়েন্টের দেওয়া ছবি সহ কোনও সাইট তৈরির সমস্যাটি কি আপনি কখনও চালিয়েছেন, কেবলমাত্র তাদের ফটোগ্রাফিটি মূল চেহারাটি এবং আপডেট বজায় রাখার পরে তা আপডেট করার পরে তা খুঁজে পেতে? এই সমাধানটির মধ্যে একটি স্বচ্ছ পিএনজি ওভারলে তৈরি করা জড়িত যা নিয়মিত জেপিইজি বা জিআইএফ এর চারপাশে একটি মাস্ক / ফ্রেম হিসাবে ব্যবহার করা যেতে পারে। এইভাবে, একটি সাধারণ সিএমএস ইনস্টলেশন কনফিগার করা যায় যাতে ব্যবহারকারীরা ফিল্টার প্রয়োগ করতে কোনও গ্রাফিক্স প্রোগ্রাম ব্যবহার করার চিন্তা না করেই ফটো আপলোড করতে পারে।

পিএনজি-ওভারলে-ইমেজ-স্টাইলিং-ব্যাকগ্রাউন্ডস-উপস্থিতি-অনুপ্রেরণা-শ্যাডো-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট

18.

বেজুম

লাইটওয়েট

JQuery

জুম প্লাগইন

বেজুম এর জন্য একটি সহজ এবং হালকা ওজনের বিকল্প জিকিউজুম। এটি হালকা এবং এটি ব্যবহার করা সহজ।

বেজুম-লাইটওয়েট-জেকুরি-জুম-প্লাগ-ইমেজ-স্টাইলিং-ব্যাকগ্রাউন্ডস-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-তৈরি করুন-চিত্রগুলি স্ট্যান্ড-আউট

19.

পটভূমি চিত্র অ্যানিমেশনগুলির জন্য jQuery ব্যবহার করা

JQuery দিয়ে খেলুন এবং আপনি যে ধরণের প্রভাব সন্ধান করছেন তা তৈরি করতে পটভূমির চিত্রের অবস্থান পরিবর্তন করুন। "আমি কীভাবে সক্রিয় রাষ্ট্রগুলি পরিচালনা করব?" এর উত্তর দেওয়ার জন্য একটি নতুন নিবন্ধ রয়েছে - JQuery অ্যানিমেটেড পটভূমির জন্য সক্রিয় স্থিতি পরিচালনা করা.

ব্যাকগ্রাউন্ড-ইমেজ-অ্যানিমেশন-ইমেজ-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট-এর জন্য jquery- ব্যবহার করা হচ্ছে

20.

সিএসএসের সাহায্যে আপনার চিত্রগুলি স্পাইস করার 5 টি উপায়

আপনার সাধারণ বেল্ট চিত্রগুলিতে কিছু গন্ধ যুক্ত করার জন্য কয়েকটি সহজ কৌশল এখানে রইল। প্রতিটি চিত্রকে স্টাইল করতে ফটোশপ ব্যবহার করা ক্লান্তিকর এবং দীর্ঘমেয়াদে বজায় রাখা কঠিন হতে পারে। এই নিম্নলিখিত সিএসএস কৌশলগুলি আপনাকে সেই ব্যথা সহজ করতে সহায়তা করবে।

সিএসএস-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-সহ-মশালার আপ-ইমেজ-আপ-প্রেরণা-ছায়া-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট

21.

কিভাবে:

আকার পরিবর্তনযোগ্য

পটভূমি চিত্র

CSS এর মাধ্যমে পুনরায় আকার পরিবর্তনযোগ্য পটভূমি চিত্র কীভাবে সেট আপ করবেন তা শিখুন। আপনার কাছে বেছে নিতে 3 টি বিকল্প রয়েছে।

কীভাবে পুনরায় আকার-পরিবর্তনযোগ্য-পটভূমি-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-তৈরি করুন-চিত্রগুলি স্ট্যান্ড-আউট

22.

আপনার চিত্রের লিঙ্কগুলি স্টাইল করুন

ব্যবহারকারীদের আমাদের ওয়েবসাইটের নির্দিষ্ট বিভাগটি ক্লিক করে বোঝানো বোঝাতে কার্যকরভাবে মাউস ওভার এফেক্টের মাধ্যমে অর্জন করা সম্ভব। এই "ক্লিকযোগ্য" বিভাগগুলিতে অবশ্যই সামগ্রী চিত্র অন্তর্ভুক্ত রয়েছে। চিত্র লিঙ্ক একটি স্ক্রিপ্ট যা আপনাকে আপনার চিত্রের লিঙ্কগুলিতে অতিরিক্ত স্টাইলিং প্রয়োগ করতে সক্ষম করে।

স্টাইল-আপনার-চিত্র-লিংক-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-শ্যাডো-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট

23.

সিএসএস সহ একাধিক পটভূমি চিত্র

অনেক সময় পটভূমির চিত্রগুলি সরাসরি পৃষ্ঠায় সন্নিবেশ করানোর চেয়ে পটভূমির চিত্রগুলি ব্যবহার করা আরও বোধগম্য হয়। এবং প্রতিটি উপাদান যেমন - আপনার বডি ট্যাগ - কেবল একটি পটভূমি চিত্র ধারণ করতে পারে তবে সেগুলি বেশ কয়েকটি উপাদানগুলিতে প্রয়োগ করা যেতে পারে।

সিএসএস-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট-সহ একাধিক-পটভূমি-চিত্রসমূহ

24.

সিএসএস সহ চিত্র সীমানা

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

সিএসএস-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-চিত্র-সীমানা-চিত্র-স্ট্যান্ড-আউট-শ্যাডো-বর্ডার-মেক-ইমেজ-স্ট্যান্ড-আউট

25.

ব্যাকগ্রাউন্ড চিত্র ব্যবহার না করে CSS স্প্রিটস

সিএসএস স্প্রাইটস সম্পর্কে প্রচুর জ্ঞান ছাড়াই কীভাবে হোভার এফেক্ট প্রয়োগ করবেন তা শিখুন।

CSS-sprites- ব্যতীত ব্যাকগ্রাউন্ড-চিত্রগুলি-চিত্র-স্টাইলিং-ব্যাকগ্রাউন্ড-উপস্থিতি-অনুপ্রেরণা-ছায়া-সীমানা-তৈরি করুন-চিত্রগুলি স্ট্যান্ড-আউট


আপনার মন্তব্য দিন

আপনার ইমেল ঠিকানা প্রকাশিত হবে না। প্রয়োজনীয় ক্ষেত্রগুলি দিয়ে চিহ্নিত করা *

*

*

  1. ডেটার জন্য দায়বদ্ধ: মিগুয়েল অ্যাঞ্জেল গাটান
  2. ডেটার উদ্দেশ্য: নিয়ন্ত্রণ স্প্যাম, মন্তব্য পরিচালনা।
  3. আইনীকরণ: আপনার সম্মতি
  4. তথ্য যোগাযোগ: ডেটা আইনি বাধ্যবাধকতা ব্যতীত তৃতীয় পক্ষের কাছে জানানো হবে না।
  5. ডেটা স্টোরেজ: ওসেন্টাস নেটওয়ার্কস (ইইউ) দ্বারা হোস্ট করা ডেটাবেস
  6. অধিকার: যে কোনও সময় আপনি আপনার তথ্য সীমাবদ্ধ করতে, পুনরুদ্ধার করতে এবং মুছতে পারেন।