বৃহস্পতিবার, ২৯ সেপ্টেম্বর, ২০১৬
সি,এস,এস হোভার মেনু
সি,এস,এস হোভার মেনু শুধুমাত্র display: none, display: block এবং parent আর child এর খেলার নাম।
অর্থাৎ প্রথমে child element কে display: none করতে হবে আবার এই child element কেই display: block করতে হবে যখন parent element হোভার হবে।
উদাহরণঃ
HTML :
CSS :
ul.dropdown {
display: none;
}
ul li:hover ul.dropdown {
display: block;
}
উপরের উদাহরণে “ul.dropdown” হচ্ছে child element “ul li” parent element এর।
সুতরাং প্রথমে “ul.dropdown” child element কে display: none করা হয়েছে।
তারপর “ul.dropdown” child element কে display: block করা হয়েছে যখন তার parent element “ul li” কে হোভার করা হয়েছে।
বৃহস্পতিবার, ২৫ আগস্ট, ২০১৬
Css3 Flexbox
CSS3 Flexbox
display:
|
flex | flex-inline;
|
flex-direction:
|
row | row-reverse | column | column-reverse;
|
justify-content:
|
flex-start | flex-end | center | space-between | space-around;
|
align-items:
|
flex-start | flex-end | center | baseline | stretch;
|
flex-wrap:
|
wrap | wrap-reverse | nowrap;
|
align-content:
|
flex-start | flex-end | center |space-between | space-around | stretch;
|
flex-flow:
|
flex-direction flex-wrap;
|
order:
|
number;
|
align-self:
|
flex-start | flex-end | center | baseline | stretch | auto;
|
flex:
|
flex-grow flex-shrink flex-basis | auto;
|
Css3 display
Display = flex | inline-flexdisplay: flex = item গুলো block আকারে থাকবে।
display: inline-flex = item গুলো inline-block আকারে থাকবে।
Css3 flex-direction
flex-direction: row | row-reverse | column | column-reverse;
flex-direction: row = item গুলো এক রো-তে থাকবে, বাম দিকে চেপে থাকবে এবং ধারাবাহিকতা বজায় থাকবে।
flex-direction: row-reverse = item গুলো এক রো-তে থাকবে, ডান দিকে চেপে থাকবে এবং ধারাবাহিকতা উল্টে যাবে।
flex-direction: column= item গুলো এক কলামে থাকবে, উপর দিকে চেপে থাকবে এবং ধারাবাহিকতা বজায় থাকবে।
flex-direction: column-reverse = item গুলো এক কলামে থাকবে, নিচের দিকে চেপে থাকবে এবং ধারাবাহিকতা উল্টে যাবে।
Css3 Justify-content
Justify-content = flex-start | flex-end | center |
space-between | space-around
Justify-content = এখানে content এর উদ্দেশ্য item আর justify এর উদ্দেশ্য item গুলো কিভাবে সাজানো হবে। এটা কাজ করে ডানে বামে।
Justify-content:
flex-start = item গুলো ডান দিকে চেপে যাবে।
Justify-content:
flex-end = item গুলো বাম দিকে চেপে যাবে।
Justify-content:
center = item গুলো মাঝামাঝি থাকবে।
Justify-content:
space-between = item গুলো পরষ্পরের তুলনায় সমান
জায়গা নেবে। container এর জন্য কোন জায়গা রাখবেনা।
Justify-content:
space-around = item গুলো container এর
তুলনায় সমান জায়গা নেবে। অর্থাৎ container এর জন্য যতটুকু জায়গা
নেবে item এর
জন্যও ততটুকু জায়গা নেবে।
সোমবার, ২২ আগস্ট, ২০১৬
Standard responsive width for CSS3 Media Queries from Bootstrap
/* Extra small devices (phones, less than 768px) */
@media screen and (max-width: 767px) {
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
}
I use following media queries :
/*=======================================
= Media Queries =
========================================*/
/* Portrait & landscape phone */
@media (max-width : 480px) {
}
/* Landscape phone to portrait tablet */
@media (max-width : 768px) {
}
/* Large desktop */
@media (min-width : 1200px) {
}
@media screen and (max-width: 767px) {
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
}
I use following media queries :
/*=======================================
= Media Queries =
========================================*/
/* Portrait & landscape phone */
@media (max-width : 480px) {
}
/* Landscape phone to portrait tablet */
@media (max-width : 768px) {
}
/* Large desktop */
@media (min-width : 1200px) {
}
এতে সদস্যতা:
মন্তব্যসমূহ (Atom)