আপনার ব্লগ বা ওয়েবসাইটের জন্য 29 সিএসএস শিরোনাম এবং পাদচরণ

সিএসএস পাদলেখ

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

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

সূচক

বাঁকা শিরোনাম

বাঁকা শিরোনাম

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

শিরোনাম চিত্র প্যারালাক্স

লম্বন

দুর্দান্ত প্যারালাক্স চিত্রের প্রভাবের সাথে, এই শিরোনামটি নিজেকে সনাক্ত করে সিএসএস পটভূমি-চিত্র অবস্থান ব্যবহার করুন। শিরোনাম চিত্রটি দুর্দান্ত প্রভাব কোডের জন্য পৃষ্ঠার শীর্ষে অবস্থান করবে।

শিরোনাম কোণযুক্ত স্থির

Angled Header

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

স্কিউড হেডার

স্কেউড

এই শিরোলেখের জন্য সিএসএস এবং এইচটিএমএল যে প্রদত্ত উদাহরণটিতে বৈশিষ্ট্যযুক্ত যে তির্যক রেখা বরাবর যা পুরো পর্দাটি একপাশ থেকে অন্য দিকে অতিক্রম করে।

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

বাঁকা এস.জি.জি.

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

ডিভের সাথে স্থির শিরোনাম

ডিভ ফিক্সড

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

প্যারাল্যাক্স মাল্টি-লেয়ার ইলাস্ট্রেশন

মাল্টি-লেয়ার

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

স্থির পোস্ট হেডার

স্থির পোস্ট

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

অ্যানিমেশন সহ পূর্ণ স্ক্রীন শিরোনাম

অ্যানিমেটেড তরঙ্গ

একটি শিরোনাম যা একটি অ্যানিমেশন সরবরাহ করে দীর্ঘস্থায়ী পদক্ষেপ এবং এটি দর্শকের উপর শিথিল প্রভাব তৈরি করে।

পূর্ণ পর্দার হিরো চিত্র

হিরো ছবি

বিরূদ্ধে একটি জুম প্রভাব, এই শিরোনাম পূর্ণ পর্দা এটি দুর্দান্ত মৌলিকত্ব হিসাবে প্রকাশিত হয়েছে। যে ওয়েবসাইটটিতে ভিজিটর ঘুরে বেড়াতে স্ক্রোলিংয়ের দুর্দান্ত ব্যবহার করতে চলেছে তার জন্য উপযুক্ত।

বোতাম সহ ফ্লেক্সবক্স 

বোতাম সহ ফ্লেক্সবক্স

একটি শিরোনাম যা বোতামটি প্রদর্শন করতে পর্দার পুরো প্রস্থ নেয়। ল্যান্ডিং পৃষ্ঠাগুলির জন্য উপযুক্ত সিএসএস ফ্লেক্সবক্স সহ।

ফ্লেক্সবক্স হিরো শিরোনাম

ফ্লেক্সবক্স নায়ক

প্রভাব সহ একটি শিরোনাম প্যারালাক্স এবং ফ্লেক্সবক্স বেশ সহজ এটি মূলত এর নকশার কমনীয়তার জন্য দাঁড়িয়েছে।

স্ক্রোলটিতে স্টিকি শিরোলেখ

স্টিকি হেডার

এর নাম অনুসারে, একটি নির্দিষ্ট শিরোনাম যখন চলার সময় আমরা মাউস দিয়ে স্ক্রোল করি ওয়েব পৃষ্ঠা বাকী দেখতে।

প্রতিক্রিয়াশীল স্ক্রোলিং স্টিকি

প্রতিক্রিয়াশীল স্ক্রোল

মেনু পৃষ্ঠার শীর্ষে পৌঁছায় কেন, দুর্দান্ত প্রভাবের আর একটি স্থির শিরোনামএবং এই মুহুর্তে এটি স্থির থাকে এবং আমরা সাইটটি স্ক্রোল করে রাখতে পারি।

স্ক্রোল শিরোনাম

স্ক্রোল শিরোনাম

এটি বাকী থেকে পৃথক সঠিক এবং সূক্ষ্ম অ্যানিমেশন আমরা সরানো হিসাবে এটির শেষে, হেডবোর্ডটি শীর্ষে স্থির থাকে।

প্রতিক্রিয়াশীল স্ক্রোল শিরোনাম

প্রতিক্রিয়াশীল স্ক্রোল শিরোনাম

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

শিরোনাম ইন / আউট

শিরোনাম শিরোনাম

একটি শিরোনাম যা প্রভাব দ্বারা পৃথক করা হয় স্ক্রোল করার পরে / বাইরে এবং এটি প্রতিক্ষেপ সংবেদন উত্পাদন করে।

শিরোনাম বিবর্ণ

শিরোনাম বিবর্ণ

আর একটি অ্যানিমেশন প্রভাব কৌতূহলী এবং খুব মার্জিত এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট এ।

শিরোনামটি লুকানো আছে

স্বয়ংক্রিয় লুকান

অনুযায়ী লুকানো যখন একটি ভিন্ন শিরোনাম আমরা অ্যানিমেশন সহ স্ক্রোলিং ব্যবহার করি এটি লক্ষ করা যায় না কিন্তু দুর্দান্ত মানের।

প্যারালাক্স ফুটার

প্যারালাক্স ফুটার

এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট সহ একটি স্থির বা স্থির পাদলেখ। এর শেড সহ দুর্দান্ত মানের কার্যকর.

সামগ্রী স্কেল সহ পাদলেখ

পাদদেশ স্কেল

এর জন্য একটি উচ্চ মানের এবং মূল পাদচরণ দর্শক অবাক এই ওয়েব স্পেসটি প্রদর্শনের সুদৃ .় উপায়ের জন্য।

সামাজিক মিডিয়া পাদলেখ

সোশ্যাল মিডিয়া

একটি পাদচরণ যা দাঁড়ানো বোতামগুলি যা সামাজিক নেটওয়ার্কগুলিতে বাড়ে সেরা পরিচিত. আপনি যখন প্রতিটি সামাজিক নেটওয়ার্কের উপর মাউস পয়েন্টারটি রেখে যান তখন অ্যানিমেশনটি ঘটে।

অ্যানিমেটেড মোবাইল পাদলেখ মেনু

অ্যানিমেটেড ফুটার মোবাইল

এই পাদলেখটি দেখতে ওয়েব ব্রাউজার উইন্ডোটি হ্রাস করে আপনি সক্ষম হবেন 2-3 বিভাগগুলি সন্ধান করুন যা ব্যবহারকারী একটি মোবাইল ডিভাইসে খুঁজে পেতে পারেন। এটি 767px এ প্রদর্শিত হবে।

পাদলেখ সহজ সরল

সরল স্থির

এইচটিএমএল এবং সিএসএস তৈরি একটি খুব উত্সাহ এবং প্রসারণ ছাড়া সহজ পাদলেখ.

প্রতিক্রিয়া ভিডিও শিরোনাম

প্রতিক্রিয়া ভিডিও শিরোনাম

সাথে একটি শিরোনাম সাধারণ ভিডিও React.js.

ভিডিও শিরোনাম

ভিডিও শিরোনাম

Otro সরল ভিডিও সহ শিরোনাম এবং দুর্দান্ত মানের।

মিক্স-ব্লেন্ডের সাথে পূর্ণ স্ক্রিন ভিডিও শিরোনাম

পূর্ণ পর্দা

দেখান একটি পূর্ণ স্ক্রিন ভিডিও মিশ্রণ-মিশ্রণ মোড ব্যবহার করে স্তরটিতে পাঠ্য সহ।

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

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

অ্যানিমেশন ছিল প্রভাব পরে অ্যাডোব সঙ্গে কাস্টমাইজড সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হতে। এটি মোবাইলে কাজ করে না।

গ্রেডিয়েন্ট সহ প্রতিক্রিয়াশীল ভিডিও শিরোলেখ

প্রতিক্রিয়াশীল

El গ্রেডিয়েন্ট যা দাঁড়িয়ে আছে বাকি থেকে এই ভিডিও শিরোনামে।


নিবন্ধটির বিষয়বস্তু আমাদের নীতিগুলি মেনে চলে সম্পাদকীয় নীতি। একটি ত্রুটি রিপোর্ট করতে ক্লিক করুন এখানে.

2 মন্তব্য, আপনার ছেড়ে

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

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

*

*

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

  1.   টেকনুকু তিনি বলেন

    তারা সবাই আমাকে বোঝায়। ধন্যবাদ