CSS Tips
inline-{block,grid,flex}
  • এর মানে ওই div ইনলিনে থাকবে কিন্তু block ,grid ,flex এর মতো কাজ করবে
  • ব্যবহার : যেমনঃ দুইটা inline এলিমেন্ট এর মাঝে কোনো গ্রিড,ফ্লেক্স,ব্লক এলিমেন্ট দরকার হলে
z-index
  • z-index: -1; দিলে নিচে যাবে।
  • z-index: 1; দিলে উপরে যাবে।
overflow
  • চারটি property: {visible,hidden,scroll,auto}
  • auto: scroll লাগলে হবে।
  • hidden: কনটেন্ট বেশি হলে অতিরিক্ত কন্টেন্ট হিডেন থাকবে
  • scroll: scroll bar
Background
  • transparent ইমেজ নিয়ে কাজ করলে। অনেকগুলো ইমেজ দিয়ে একটা সুন্দর ব্যাকগ্রাউন্ড বানাতে।
  • background: url('image.jpg') no-repeat center center/cover,url('image.jpg') no-repeat center center/cover,url('image.jpg') no-repeat center center/cover,url('image.jpg') no-repeat center center/cover;
  • background-origin: [border-box,padding-box,content-box]
  • Generator
width
  • width:max-content;
  • একটি block এলিমেন্ট এর width কনটেন্ট এর উপরে নির্ভর করে হবে।
  • আফটার বিফোর এর পারেন্টে ব্যবহার করলে। after,before এর width :১০০% দিলে পারেন্টর উইড্থ পাবে।
  • menu এর নিচের hover এর সময় দাগ দিতে ব্যবহার করা হয়।
Responsive width
  • width: min(800px,90%);
  • min: যেটির ভ্যালু ছোট হবে সেটি সেট হবে।
  • width: max(800px,90%);
  • max: যেটির ভ্যালু বড় হবে সেটি সেট হবে।
  • width: clamp(400px, 50vw, 880px )
  • calmp(min,prefere,max)
filter
  • filter: drop-shadow(5px 7px 37px #e21d1d);
  • Generator: Link
HTML && CSS Generator
transition
  • transition: color 0.3s ease-in-out 0s;
  • transition: transition-property transition-duration transition-timing-function
  • transition: transition-property transition-duration transition-timing-function transition-delay
Overly for outside of popup or side menu
  • .overly { background-color: rgba(0,0,0,0.5); position: fixed; inset: 0; }
  • inset: 0; এর মানে : left,right,top,bottom=0; তাই সবদিকে ছড়িয়ে থাকে
tabindex=""
  • tabindex="0"
  • zero দিলে TAB বাটন দিয়ে access করা যায়।
  • tabindex="-1"
  • -1দিলে বাটন TAB বাটন দিয়ে access করা যায় না ।
  • সচরাচর hidden ডকুমেন্টে ব্যবহার করা হয়।
  • tabindex="positive Number"
  • Positive Number দিয়ে ট্যাব এর serial ঠিক করে দেয়া যায়
flex
  • display: flex;
  • flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap: nowrap | wrap | wrap-reverse;
  • flex-flow: row wrap;
  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  • justify-items: center;,...
  • align-items: stretch | flex-start | flex-end | center | baseline;
  • align-content: stretch | flex-start | flex-end | center | space-between | space-around;
  • flex-grow: 1;
  • flex-shrink: 1;
  • flex-basis: 0;
  • flex: 1 1 0;
  • order: 1;
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;
  • flex-wrap: nowrap হলো ফ্লেক্স কনটেইনারের width ফ্লেক্স আইটেম ভাগ করে নিবে ,কারণ আইটেম গুলো কে এক সারিতে রাখবে।
  • flex-wrap: wrap হলো আইটেমগুলিকে লাইন break করবে যদি ফ্লেক্স কনটেইনারের width, টোটাল ফ্লেক্স আইটেম width থেকে বেশি হয়।
  • flex-grow: এটি আইটেমের css . কনটেইনারের খালি জায়গা থাকলে কিভাবে ভাগ হবে ,তা নির্ধারণ করে। default:0;
  • flex-grow:0;কোনো ভাগ পাবে না।
  • flex-shrink: কাজ: এটি নির্ধারণ করে যে ফ্লেক্স কন্টেইনারে জায়গা কম থাকলে (অর্থাৎ আইটেমগুলি কন্টেইনারে ফিট না হলে) ফ্লেক্স আইটেমগুলি কীভাবে সংকুচিত হবে।
  • flex-shrink: 0; এটি সংকুচিত হবে না {width যা দেয়া হবে ঐটাই পাবে। }
  • default flex-shrink: 1; জায়গা কম থাকলে এটি সংকুচিত হবে
  • flex-basis এটি ফ্লেক্স আইটেমের প্রাথমিক আকার (initial size) নির্ধারণ করে।
  • default flex-basis: auto; কন্টেন্টের উপর ভিত্তি করে আকার নির্ধারণ
  • flex: flex-grow flex-shrink flex-basis;
  • Generator
Next
media Query
  • media media-query-1
  • media-query-2
Hover Effect
Text and Word
  • text-wrap: word-break: text-wrap-ratio: source
  • text-overflow:{hidden,clip,ellipsis}
  • background-color: var(--brand-color, lightblue); if first color is missing then second color will work
  • overflow: overscroll-behavior:
  • margin-inline: margin-inline-end:
Button
  • button:focus { outline: 4px solid Highlight; }
Form
  • form:focus-within { box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.3); }
Scroll CSS
  • scroll-behavior: smooth; scroll-padding: 8rem;
    একটি বাটন এ ক্লিক দেয়ার পরে একটা সেকশনে গেলে। ওই সেকশন উপরে কত টুকু স্পেস রাখবে।
  • container{ scroll-snap-type: y mandatory; [x mandatory] [y mandatory]; }
    child{ scroll-snap-align: start; [start, center, end] }
Design List
@counter-style crown { system: cyclic; symbols: "\1F451"; suffix: ""; } ul { list-style: crown; }
Image Crope
Responsive Image Generator
Box Shadow
Css Shape
Learn CSS
Html Entites
Image Host