CSS Miscellaneous
This section covers various CSS properties and techniques that don't fit neatly into other categories but are still important for web development.
CSS Variables allow you to store specific values to be reused throughout a document.
:root {
ㅤ--main-color: #007bff;
}
.button {
ㅤbackground-color: var(--main-color);
}
CSS Counters let you adjust the appearance of content based on its location in a document.
body {
ㅤcounter-reset: section;
}
h2::before {
ㅤcounter-increment: section;
ㅤcontent: "Section " counter(section) ": ";
}
CSS Shapes allow you to create non-rectangular shapes for text to flow around.
.circle {
ㅤwidth: 200px;
ㅤheight: 200px;
ㅤshape-outside: circle(50%);
ㅤfloat: left;
}
CSS Filters provide graphical effects like blurring or color shifting on an element.
.blur {
ㅤfilter: blur(5px);
}
.grayscale {
ㅤfilter: grayscale(100%);
}
CSS Scroll Snap allows you to create smooth scrolling experiences by defining "snap points".
.container {
ㅤscroll-snap-type: y mandatory;
}
.child {
ㅤscroll-snap-align: start;
}
CSS Writing Modes allow you to support different international writing modes.
.vertical-text {
ㅤwriting-mode: vertical-rl;
}
These miscellaneous CSS features can greatly enhance your web designs and provide solutions for specific layout and styling challenges.