35 সত্যই সিএসএস চিত্রের প্রফুল্লতা উপভোগ করে

সিএসএস চিত্রের প্রভাব

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

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

ফ্লুইড টুইস্টিং ইমেজ 3 ডি

3 ডি কিউব

এই চিত্রের প্রভাব সত্যিই আশ্চর্যজনক যখন চিত্রটি 3 ডি কিউবে বিভক্ত করুন যা একটি দুর্দান্ত ভিজ্যুয়াল এফেক্ট তৈরি করতে এর উল্লম্বতার সম্পর্কে ঘোরতে সক্ষম। CSS3D এর ভিত্তিতে, আপনি যদি এটি নিজের ওয়েবসাইটে প্রয়োগ করতে সক্ষম হন তবে দর্শনার্থী নির্বাক হয়ে যাবে।

বিস্ফোরিত প্রভাব
সম্পর্কিত নিবন্ধ:
আপনার ওয়েবসাইটের জন্য আরও 35 সিএসএস পাঠ্য প্রভাব

3 ডি হোভার ইফেক্ট

3 ডি হওর প্রভাব

এটি অর্জনের জন্য আরেকটি দুর্দান্ত ভিজ্যুয়াল এফেক্ট যখন আমরা ইমেজটির উপরে মাউস পয়েন্টারটি রেখে যাই, এটি একই দ্বারা আঘাত হিসাবে যদি পড়ে। অন্য দুর্দান্ত চিত্রের প্রভাবের জন্য দুর্দান্ত অ্যানিমেশন।

সিএসএস 3 ডি প্যানোরামা

সিএসএস 3 ডি প্যানোরামা

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

ক্রিয়েটিভ অনলাইন
সম্পর্কিত নিবন্ধ:
আপনার ওয়েবসাইটের টাইপোগ্রাফির জন্য 27 টি প্রয়োজনীয় সিএসএস পাঠ্য প্রভাব

"কাত" দৃষ্টিভঙ্গিতে চিত্রগুলি

দৃষ্টিভঙ্গি টিল্ট ইমেজিং

Un চাক্ষুষ পরীক্ষা যা ওয়েব অংশ হিসাবে একটি নির্দিষ্ট উদ্দেশ্যে পরিবেশন করতে পারে।

ভিনিশিয়ান ব্লাইন্ড

ভিনিশিয়ান ব্লাইন্ড

প্রতিবার দুর্দান্ত দর্শনীয় প্রভাব মাউস পয়েন্টার ছেড়ে দিন যাতে এটি চিত্রটি দেয় দুটি বৈপরীত্যের মধ্যে পরিবর্তিত হয়।

চিত্র বিভক্ত করুন

চিত্র বিভক্ত করুন

ইমেজটির উপর মাউস পয়েন্টারটি ঘোরাতে এটি এটি এটি নিখুঁতভাবে রচনা করা বর্ধিত করা হবে.

চিত্রের প্রভাব রাখুন

হোভার ইফেক্ট ইমেজ

ই ছাড়ার সময় একটি গ্রিড প্রভাব তৈরি করা হয়একটি নির্দিষ্ট বিন্দু উপর l মাউস পয়েন্টার ছবি থেকে.

আয়না প্রভাব 

Espejo

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

প্রতিবিম্ব প্রভাব সহ চিত্র

রিফ্লেক্স প্রভাব

এমন ক্রিয়া যা সন্ধান করে ইমেজ উপর প্রতিফলন প্রভাব প্রকল্প যা আমরা এই সিএসএস চিত্রের প্রভাবের জন্য ব্যবহার করেছি।

হোভার ইফেক্টে চিত্রটি iltালু

ঝুঁকির প্রভাব

পোছাতে পারবে একটু মাথা ঘোরালাম চিত্রের পক্ষগুলি কীভাবে খুব মারাত্মক দ্বৈত প্রভাব উত্পাদন করে তা দেখতে।

হোভার ব্লার ইফেক্ট

অস্পষ্ট প্রভাব

আমরা ইমেজটির মাধ্যমে পয়েন্টারটি সরানোর সময়, একটি অস্পষ্ট প্রভাব উত্পাদন করে যে সেকেন্ডের মধ্যে অদৃশ্য হয়ে যায়।

চিত্র হোভার

চিত্র হোভার

একটি প্রভাব আছে একই মুহূর্তে স্থানচ্যুতি যেখানে আমরা পয়েন্টারটি রেখেছি ইমেজ উপর মাউস।

এসভিজিতে হোভার ইফেক্ট

এসভিজি হোভার

একটি দুর্দান্ত হোভার ইফেক্ট যা রাখে লুকানো চিত্র উন্মোচিত নামের অধীনেই। সৃজনশীল এবং কৌতূহলী চিত্র গ্যালারী প্রদর্শনের জন্য দুর্দান্ত সমাপ্তি এবং নিখুঁত।

হোভারে টেক্সট থেকে চিত্র পর্যন্ত

এসভিজি প্রভাব

পাঠ্য চিত্রটি প্রকাশ করে যখন আমরা একটি আকর্ষণীয় অ্যানিমেশন সহ মাউস পয়েন্টারটি হোভার করি অন্ধ প্রভাব সহ এটি মাঝ থেকে খোলে।

একটি ব্যাকগ্রাউন্ড চিত্রের অংশ প্রকাশ করছে

ঘোরা প্রকাশ

যেন আমাদের হাতে ছিল একটি টেলিফোটো লেন্সের ক্রসহেইর, মাউস পয়েন্টারটি সরানোর সাথে সাথে পটভূমির চিত্রটির কিছু অংশ প্রকাশিত হবে।

হোভার অ্যানিমেশন

চিত্র হোভার অ্যানিমেশন

দুর্দান্ত প্রভাব, তবে এর রচনায় খুব সহজ। আপনি যদি কিছু খুঁজছেন সরলতাবাদী এবং নূন্যতম, এই প্রভাব আপনাকে প্রেমে পড়বে।

হোভার প্রভাব ট্র্যাকিং

ট্র্যাকিং চিত্র

Otro সহজ প্রভাব একটি নির্দিষ্ট উদ্দেশ্যে।

চিত্র জুম

জুম্

এই হল সাধারণ জুম প্রভাব যে আপনি অবশ্যই এখন আপনার ওয়েবসাইটে নিতে চাইবেন।

জুম হোভার প্রভাব

জুম করুন

অন্য বিকল্প মত জুম প্রভাব যখন আমরা পয়েন্টারটি ছেড়ে যাই ইমেজ উপর মাউস পেরেক।

চৌম্বক কাচের প্রভাব

চৌম্বক কাচের প্রভাব

যেমন এর নাম থেকে বোঝা যায় যে মাউস পয়েন্টারটি চিত্রটি ঘুরে দেখাবে একটি ম্যাগনিফাইং গ্লাসে যা এটিকে প্রশংসিত করে।

কোনও জাভাস্ক্রিপ্ট হোভার নেই

জেএস নেই

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

সিএসএস ওভারলে প্রভাব

বাতাসে ভাসিতে থাকা

Un একটি স্তরের জন্য খাঁটি সিএসএস প্রভাব আমাদের যে ইমেজের উপর মাউন্ট করা আছে।

ইমেজ জন্য Hovy

Hovy ছবি

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

চিত্র ওভারলে

লাইন

উচ্চ মানের লাইন অ্যানিমেশন সহ, চোখ ধাঁধানো লেয়ার বৈশিষ্ট্যযুক্ত। আর একটি যা আপনার প্রিয় হয়ে উঠতে পারে।

চিত্রের প্রভাব ওভারলে

বিজ্ঞপ্তি ঘোরা

আমরা এর অন্য একটি প্রভাব নিয়ে ফিরে আসি এইচটিএমএল এবং সিএসএসে ওভারলে যার মধ্যে বৃত্তাকার রেখাগুলি হলেন প্রধান চরিত্র।

চিত্র ওভারলে প্রভাব

বাতাসে ভাসিতে থাকা

স্ট্রাইকিং ওভারলে এফেক্ট যা বিভিন্ন ওয়েব উপাদানগুলির জন্য ব্যবহার করা যেতে পারে। সঙ্গে একটি সামান্য সৃজনশীলতা সংহত করা যেতে পারে কার্ডে এই নিবন্ধে মত.

আইকন অ্যানিমেশন সহ হোভার ইফেক্ট

হোভার আইকন

একটি আইকন অ্যানিমেশন সহ উচ্চমানের যা আপনাকে প্রথম কয়েকটি পরিবর্তনগুলিতে cajole করবে। ও পারবে পাঠ্যটিকে দুর্দান্ত প্রভাবিত করুন.

সাবটাইটেলগুলি সহ হোভার ইফেক্ট

Subtítulos

এর সাথে আরও একটি দুর্দান্ত হোভার ইফেক্ট খুব মসৃণ অ্যানিমেশন সহ প্রদর্শিত সাবটাইটেলগুলি এবং অর্জন।

3 ডি হোভারের দিকের প্রভাবগুলি

3 ডি দিকনির্দেশ

আপনি পুরো তালিকায় দেখতে পাবেন এমন একটি সবচেয়ে উত্তেজক চিত্রের প্রভাব। দ্য মাউস পয়েন্টারটি «3D কিউব» এর জন্য গাইড হয়ে উঠবে.

চিত্র স্কেল

চিত্র স্কেল

অন্য একটি সহজ প্রভাব, কিন্তু অনেক প্রসারণ ছাড়া খুব শোভিত.

প্রতিক্রিয়া সহ আইওএস ছায়া প্রভাব

আইওএস ছায়া

Un অনেক ধাঁধা ছাড়াই প্রভাব, তবে এটি যে ছায়া প্রভাব তৈরি করে তাতে খুব কংক্রিট, যেহেতু মনে হয় এটি "স্থল" থেকে উত্থাপিত হয়েছিল।

শ্যাডো স্টাইল আইওএস 10

আইওএস ছায়া

মাউস পয়েন্টারটি একটি 'ধাক্কা' প্রভাব মহান বাস্তববাদ উত্পাদন করে যে চিত্র। অনেক আগ্রহব্যাঞ্জক.

চিত্র রূপান্তর প্রভাব

মোজাইক

Un দুর্দান্ত রূপান্তর প্রভাব এতে চিত্রটি গ্রিডের গ্রিডে পচে যায়। আপনি যে সময়টিতে প্রভাবটি পান এবং আরও বেশি সময় নিয়ন্ত্রণ করতে পারেন।

চিত্রের স্থানান্তর স্ক্রোল করুন

স্ক্রোল

Un খুব ট্রেন্ডি এবং সৃজনশীল রূপান্তর প্রভাব আপনার ওয়েবসাইটের জন্য এই সিএসএসে অ্যাপয়েন্টমেন্ট মিস করবেন না।

মাউস চাকা দিয়ে চিত্রটি স্ক্রোল করছে

রূপান্তরটি

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


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

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

*

*

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

      স্যান্ডি হার্নান্দেজ তিনি বলেন

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

      ওমর তিনি বলেন

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

      রজার গ্যাব্রিয়েল তিনি বলেন

    দুর্দান্ত প্রভাব। আমি স্ব-শিক্ষিত, ওয়েব বিকাশের ধারণাটি আমি সর্বদা পছন্দ করি, আমি কীভাবে শুরু করব এবং কীভাবে শিখতে হবে সে সম্পর্কে আপনার পরামর্শটি আমি খুব পছন্দ করব। শ্রদ্ধা

      সংকীর্ণ তিনি বলেন

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

         ম্যানুয়েল রামিরেজ তিনি বলেন

      হ্যালো নাটালিয়া! আপনি এখানে ক্রিয়েটিভোস অনলাইনে রিডিং উপভোগ করে আমি আনন্দিত। শুভকামনা!

      মেন্ডোজা তিনি বলেন

    আরে ভাল প্রভাবগুলির দর্শনীয় তালিকা, এটি কীভাবে এলিমেন্টারের সাথে ওয়ার্ডপ্রেসে প্রয়োগ করা যায় তা দেখতে খুব শীতল হবে