ডিজাইন
সিএসএস গ্রাফিক্স (CSS Shapes)
ওয়েব ডিজাইনের জন্য সেভ বা গ্রাফিক্স অনেক গুরুত্বপূর্ণ হয়ে থাকে। সিএসএস দিয়ে খুব সহজে বিভিন্ন সেভ তৈরী করা যায়। ওয়েব পেজের মধ্য কিছু সেভ পেজ'কে অনেক আকর্শনীয় করে তুলে। কোথায় কেমন সেভ হলে দেখতে সুন্দর দেখাবে সেটা নির্ভর করে ডিজাইনারের নিজস্ব রুচিপূর্ণ আবেগে। আমি এখানে কিছু সেভ এবং তাদের সিএসএস কোড দিয়েছি। এগুলি দেখে, বুঝে, শিখে, নিজে নিজে আরো নতুন কিছু সেভ বানাবার চেষ্টা করবেন। আরো জানতে ভিডিও টিউটোরিয়ালটি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Shapes</title>
<style>
.main{
height:300px;
width:770px;
border:1px solid #eee;
padding:0;
margin:0;
}
.left {
float: left;
shape-outside: polygon(0 0, 0 300px, 200px 300px);
clip-path: polygon(0 0, 0 300px, 200px 300px);
background:aliceblue;
height: 300px;
width: 300px;
}
.left img{
height:150px;
width:170px;
position:absolute;
bottom:0;
left:3px;
}
.right {
float: right;
shape-outside: polygon(200px 300px, 300px 300px, 300px 0, 0 0);
clip-path: polygon(200px 300px, 300px 300px, 300px 0, 0 0);
background-image: url("images/web-development.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
height: 300px;
width: 300px;
}
p{
text-align:justify;
font-size:16px;
}
h3{margin-top:0;}
</style>
</head>
<body>
<div class="main">
<div class="left"><img src="images/markup-logo.png" alt="Markup School Logo"></div>
<div class="right"></div>
<h3>হয়ে উটুন দক্ষ ওয়েব ডেভেলপার</h3>
<p>যেকোন ধরনের ওয়েবসাইট ডিজাইন, ডেভেলপমেন্ট ও হালনাগাদ করতে দরকার প্রচুর দক্ষ জনবল । তাই প্রযুক্তি বিষয়ক প্রশিক্ষণের কথা ভাবলে ওয়েব ডেভেলপমেন্ট হতে পারে একটি স্মার্ট ক্যারিয়ার । ওয়েব ডিজাইন আর ডেভেলপমেন্ট এর মাঝে মৌলিক কিছু পার্থক্য ছাড়া বিশেষ বড় ধরনের কোন পার্থক্য আছে বলে অন্তত আমার মনে হয় না। ওয়েব ডিজাইনারের কাজ হচ্ছে ওয়েব সাইটের পেইজ তৈরী করা আর ওয়েব ডেভেলপমেন্ট হচ্ছে একটা ওয়েব সাইটের প্রাণ সঞ্চার করা। একজন ওয়েব ডিজাইনার যে ডিজাইন তৈরি করেন তার প্রতিটা উপকরণকে ফাংশনাল করার জন্য পরিচালিত কর্মকান্ডই হচ্ছে ওয়েব ডেভেলপমেন্ট। সাধারণ ভাবে সাধারণ ভাবে একটি ওয়েব সাইটকে তিন ভাগে ভাগ করা যেতে পারে। (ক) ডিজাইন বা টেমপ্লেট, (খ) কনটেন্ট ম্যানেজমেন্ট (গ) সিস্টেম এবং ডাটাবেস...বিস্তারিত</a></p>
</div>
</body>
</html>
ফলাফল
Square Shape
<style>
.square{
width: 140px;
height: 140px;
background: blue;
}
</style>
<div class="square"></div>
Rectangle Shape
<style>
.rectangle{
width: 140px;
height: 80px;
background:blue;
}
</style>
<div class="rectangle"></div>
TV Screen Shape
<style>
.tv{
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background:blue;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
.tv:before{
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
</style>
<div class="tv"></div>
Circle Shape
<style>
.circle{
width: 140px;
height: 140px;
background: blue;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
</style>
<div class="circle"></div>
Egg Shape
<style>
.egg{
display:block;
width:126px;
height:180px;
background-color:blue;
-webkit-border-radius:63px 63px 63px 63px/
108px 108px 72px 72px;
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
</style>
<div class="egg"></div>
Oval Shape
<style>
.oval {
width:200px;
height:100px;
background:blue;
border-radius: 100px / 50px;
}
</style>
<div class="oval"></div>
Triangle Up Shape
<style>
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
</style>
<div class="triangle-up"></div>
Triangle Down Shape
<style>
.triangle-down{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid blue;
}
</style>
<div class="triangle-down"></div>
Triangle Left Shape
<style>
.triangle-left{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid blue;
border-bottom: 50px solid transparent;
}
</style>
<div class="triangle-left"></div>
Triangle Right Shape
<style>
.triangle-right{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid blue;
border-bottom: 50px solid transparent;
}
</style>
<div class="triangle-right"></div>
Triangle Top Left Shape
<style>
.triangle-top_left{
width: 0;
height: 0;
border-top: 100px solid blue;
border-right: 100px solid transparent;
}
</style>
<div class="triangle-top_left"></div>
Triangle Top Right Shape
<style>
.triangle-top_right{
width: 0;
height: 0;
border-top: 100px solid blue;
border-left: 100px solid transparent;
}
</style>
<div class="triangle-top_right"></div>
Triangle Bottom Left Shape
<style>
.triangle-bottom_left{
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-right: 100px solid transparent;
}
</style>
<div class="triangle-bottom_left"></div>
Triangle Bottom Right Shape
<style>
.triangle-bottom_right{
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-left: 100px solid transparent;
}
</style>
<div class="triangle-bottom_right"></div>
Parallelogram Shape
<style>
.parallelogram{
width: 150px;
height: 100px;
transform: skew(20deg);
background:blue;
}
</style>
<div class="parallelogram"></div>
Star Shape
<style>
.star{
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid blue;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
.star:before {
border-bottom: 80px solid blue;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
.star:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid blue;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
</style>
<div class="star"></div>
Twelve Point Star Shape
<style>
.twelve-point-star{
height: 100px;
width: 100px;
background: blue;
position: absolute;
}
.twelve-point-star:before {
height: 100px;
width: 100px;
background: blue;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.twelve-point-star:after {
height: 100px;
width: 100px;
background: blue;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
</style>
<div class="twelve-point-star"></div>
Pentagon Shape
<style>
.pentagon{
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: blue transparent;
}
.pentagon:before{
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent blue;
}
</style>
<div class="pentagon"></div>
Hexagon Shape
<style>
.hexagon{
width: 100px;
height: 55px;
background:blue;
position: relative;
}
.hexagon:before{
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid blue;
}
.hexagon:after{
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid blue;
}
</style>
<div class="hexagon"></div>
Octagon Shape
<style>
.octagon{
width: 100px;
height: 100px;
background: blue;
position:relative;
}
.octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
.octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
margin: 70px 0 0 0;
}
</style>
<div class="octagon"></div>
Diamond Shape
<style>
.diamond{
width: 80px;
height: 80px;
background: blue;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
</style>
<div class="diamond"></div>
Diamond Shield Shape
<style>
.diamond-shield{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid blue;
position: relative;
top: -50px;
}
.diamond-shield:after{
content: '';
position: absolute;
left: -50px;
top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid blue;
}
</style>
<div class="diamond-shield"></div>
Diamond Narrow Shape
<style>
.diamond-narrow{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid blue;
position: relative;
top: -50px;
}
.diamond-narrow:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid blue;
}
</style>
<div class="diamond-narrow"></div>
Pacman Shape
<style>
.pacman{
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid blue;
border-left: 60px solid blue;
border-bottom: 60px solid blue;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
</style>
<div class="pacman"></div>
Heart Shape
<style>
.heart {
position: relative;
}
.heart:before, .heart:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: blue;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
<div class="heart"></div>
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন