How to create css ribbon? কিভাবে সিএসএস
রিবন তৈরি করতে হয়?
Tutorial-1 (টিটোরিয়াল - ১)
প্রথমে একটি Html ডকুমেন্ট তৈরি করুন।
তারপর নিচের কোডটুকু কপি করে পেষ্ট
করুন। তার পর সেভ করে ফাইল ওপেন করে
প্রিভিউ দেখুন।
কোডঃ
.
<!DOCTYPE HTML>
<html lang="bn">
<head>
<title>How to make a triangle</title>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: serif;
}
.top{
width: 300px;
margin: 100px auto 0px auto;
font-family: Georgia;
font-style: italic;
text-align: center;
}
.fold{
width: 447px;
margin: 2% auto;
padding: 10px;
background: # 91E22C ;
color: # fff;
position: relative;
text-align: center;
font-size: 19px;
font-family: Georgia;
font-style: italic;
}
.fold:after{
content: ' ';
border-left: 10px solid transparent;
border-bottom: 20px solid # 6BA81E ;
height: 0;
width: 0;
position: absolute;
top: 0px;
right: 100%;
}
.fold:before{
content: ' ';
border-right: 10px solid transparent;
border-bottom: 20px solid #6BA81E;
height: 0;
width: 0;
position: absolute;
top: 0px;
left: 100%;
}
.developer{
width: 400px;
font-family: Georgia;
font-style: italic;
margin: 0 auto;
text-align:center;
color: # E84A40 ;
}
</style>
</head>
<body>
<div class="fold">
<p>ওয়েব ডিজাইন শিখুন খুব সহজে -
HTML-5 and CSS3</p>
</div>
<div class="developer">
<p>Designer : Ar Mahide Hasan Anik</p>
<p>ওয়েব ডিজাইন শিখুন খুব সহজে-Html5
& Css3</p>
</div>
</body>
</html>
-- বিশ্লেষণ
প্রথমে একটি div নেওয়া হয়েছে তারপর
এই div তে একটি class="fold" নেওয়া
হয়েছে।
তারপর সিএসএস দিয়ে উক্ত div এর ক্লাস
অনুসারে ডিজাইন করা হয়েছে।
এখানে সিএসএস :before and :after pseudo
code ব্যবহার করা হয়েছে। নিজে
নিজে অনুশীলন করুন এবং নিজের
পছন্দের টেক্সট দিয়ে কোডটিকে
মোডিফাই করুন।
ধন্যবাদ
রবিবার, ৩০ আগস্ট, ২০১৫
How to create css ribbon? কিভাবে সিএসএস রিবন তৈরি করতে হয়?
এতে সদস্যতা:
মন্তব্যগুলি পোস্ট করুন (Atom)
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন