Jelajahi semua properti CSS dengan panduan lengkap dan contoh praktis
Navigator ini menyediakan akses cepat ke semua kategori properti CSS. Setiap kategori berisi penjelasan mendalam, contoh kode, dan best practices untuk pengembangan web modern.
Klik pada setiap kartu untuk mempelajari properti CSS secara detail. Setiap halaman dilengkapi dengan contoh interaktif dan penjelasan yang mudah dipahami!
Pelajari selector dasar CSS termasuk element, class, ID, universal, dan attribute selectors untuk targeting elemen dengan presisi.
Pahami konsep box model CSS: margin, border, padding, content area dan cara mengontrol dimensi elemen secara efektif.
Kuasai properti tipografi: font-family, font-size, font-weight, line-height, text-align untuk desain teks yang menarik.
Eksplorasi warna dan background: color, background-color, gradients, background-image untuk visual yang memukau.
Menguasai layout modern dengan Flexbox dan Grid, serta positioning: static, relative, absolute, fixed, sticky.
Pseudo-classes seperti :hover, :focus, :nth-child dan pseudo-elements ::before, ::after untuk interaksi dinamis.
Custom properties (CSS Variables) untuk maintainable code: --var, var(), theming, dan dynamic styling.
CSS Transitions untuk smooth effects: transition-property, duration, timing-function, delay untuk UX yang halus.
CSS Animations dan @keyframes: animation-name, duration, iteration-count untuk animasi yang complex dan engaging.
Media queries untuk responsive design: breakpoints, mobile-first approach, container queries untuk semua device.
2D dan 3D transforms: translate, rotate, scale, skew, matrix, transform-origin untuk efek visual yang menakjubkan.
CSS Filters dan blend modes: blur, brightness, contrast, mix-blend-mode untuk efek visual yang artistik.
Selector lanjutan: :has(), :where(), :is(), combinators, negation untuk targeting yang lebih powerful dan fleksibel.
Scroll behavior dan customization: scroll-behavior, overflow, scrollbar styling untuk user experience yang smooth.
CSS Masking dan Shapes: clip-path, mask, shape-outside untuk creative layouts dan artistic effects yang unik.
Logical properties untuk internationalization: margin-inline, padding-block, border-inline untuk multi-language support.
Native CSS nesting untuk cleaner code: nested rules, & selector, parent references untuk maintainable stylesheets.
Scroll snap properties: scroll-snap-type, scroll-snap-align untuk carousel dan section-based scrolling yang precise.
View Transitions API untuk smooth page transitions: view-transition-name, animations between states yang seamless.
CSS Houdini APIs: Paint API, Layout API, Animation Worklet untuk extending CSS dengan JavaScript yang powerful.