CSS-এ রং লেখার পদ্ধতি
/* Named color */
color: red;
color: blue;
/* Hexadecimal */
color: #ff0000; /* লাল */
color: #f00; /* সংক্ষিপ্ত */
/* RGB */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* 50% opacity */
/* HSL (Hue, Saturation, Lightness) */
color: hsl(0, 100%, 50%); /* লাল */
color: hsla(0, 100%, 50%, 0.5);
Background Properties
.box {
background-color: #3498db;
background-image: url("photo.jpg");
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y */
background-position: center; /* top, bottom, 50% 50% */
background-size: cover; /* contain, 100%, 200px 100px */
background-attachment: fixed; /* scroll */
}
/* সংক্ষিপ্ত */
background: #fff url("bg.jpg") no-repeat center/cover fixed;
Linear Gradient
background: linear-gradient(red, yellow);
background: linear-gradient(to right, red, yellow);
background: linear-gradient(45deg, red, yellow, green);
background: linear-gradient(to bottom right, #ff6b35, #f7931e);
/* Multi-stop */
background: linear-gradient(
to right,
red 0%,
yellow 50%,
green 100%
);
Radial Gradient
background: radial-gradient(circle, red, yellow);
background: radial-gradient(ellipse at center, #ff6b35, transparent);
Box Shadow
.card {
box-shadow: 5px 10px 20px rgba(0,0,0,0.3);
/* offset-x offset-y blur color */
/* একাধিক shadow */
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1);
/* Inset (ভিতরের shadow) */
box-shadow: inset 0 0 10px #000;
}
Opacity ও Transparency
.box { opacity: 0.5; } /* পুরো element 50% transparent */
.box { background: rgba(255,0,0,0.5); } /* শুধু background transparent */