TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

CSS অনুভূমিক ফ্লিপ ইমেজ উইজেট

1

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

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

টেক্সট ডিসপ্লে সহ অনুভূমিক ফ্লিপ ইমেজ তৈরির কোড

এই ধরনের একটি অনুভূমিক ফ্লিপ ইমেজ উইজেট তৈরি করতে দুটি অংশ আছে।

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

এখানে একটি এইচটিএমএল কোড আছে, আপনি টার্গেট ইউআরএল, ইমেজ এবং আপনার নিজের ডিসপ্লে টেক্সট প্রতিস্থাপন করতে পারেন।

<div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <a href=https://www.webnots.com/step-by-step-seo-tutorial/search-engine-optimization-guide/><Img data-src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88474-613212da8701a.png"> </div> <div class="backside"><br> <p align=justify> <font face=arial size=5 color=brown>Search engine optimization is a technique of making your site search engine friendly. Download free SEO guide here to improve your site's ranking...</font> </p></a> </div> </div> </div>

এখানে একটি CSS কোড আছে, আপনি আপনার প্রয়োজন অনুযায়ী ছবির আকার, ঘূর্ণন কোণ এবং পটভূমির রঙ কাস্টমাইজ করতে পারেন:

<style type="text/css"> /* Start: Suport for IE */ .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } /* End: Support for IE */ .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .image-flip, .frontside, .backside { width: 300px; height: 250px; } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .frontside { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); background: grey; z-index: 2; } .backside { background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } </style>

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত