DOCS CSS GitBook docs section concerning CSS context.
Media Queries
CSS media queries for responsive layouts.
Copy @media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Media Queries Breakpoints
Copy max 320px
min 321px - max 480px
min 481px - max 600px
min 601px - max 768px
min 769px - max 992px
min 993px - max 1199px
min 1200px
Keyframes Animation
Keyframes animation with CSS.
Copy .fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Copy <h1 class="fade-in">Fade In Text</h1>
Selection & First Letter
Paragraph style for text selection and first letter.
Copy p::selection {
background: rgb(14, 51, 131);
color: orange;
}
p::first-letter {
font-size: 2rem;
font-weight: bold;
font-family: sans-serif;
}
Box Shadow
Styling div with box shadow.
Copy .box-shadow-div {
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2), 0px 40px 40px rgba(0, 0, 0, 0.5);
}
box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit ;
Default value. No shadow is displayed.
Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box.
Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box.
Optional. The blur radius. The higher the number, the more blurred the shadow will be.
Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
Optional. The color of the shadow. The default value is the text color.
Optional. Changes the shadow from an outer shadow (outset) to an inner shadow.
Sets this property to its default value.
Inherits this property from its parent element.
Linear Gradient Text
Linear gradient effect in text title.
Copy h1 {
font-size: 7rem;
background: linear-gradient(to left, rgb(112, 101, 214), rgb(230, 106, 213));
background-clip: text;
text-fill-color: transparent;
display: inline;
}
Sticky Navbar Style
Change navbar CSS style onScroll event (navbar must have position: sticky ).
Copy .navbar-fixed-top.scrolled {
background-color: #ffffff !important;
transition: background-color 200ms liner;
}
Copy $(function() {
$(document).scroll(function() {
var nav = $('.navbar-fixed-top');
nav.toggleClass('scrolled', $(this).scrollTop > nav.height());
});
});
Adjust Images Carousel Banner
CSS fix to adjust multiple images to same size.
Copy .photos img {
width: 15%;
aspect-ratio: 3/2;
object-fit: contain;
mix-blend-mode: color-burn;
}
CSS Spinner Animation UI Element
CSS code to create a UI spinner animation.
Copy <div class="spinner"></div>
Copy .spinner {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#0000 10%, #8F44FD);
-webkit-mask:
radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 0);
animation: spin 0.8s infinite linear;
}
@keyframes spin {
to {
transform: rotate(1turn);
}
}
CSS Drop Shadow Image
CSS code to add drop shadow to an image.
Copy img {
filter: drop-shadow(8px 8px 4px #FAEA10);
}
CSS Glowing Border Effect
CSS code create a div card with glowing border effect.
Copy .badge {
border: 2px solid var(--border);
align-self: start;
border-radius: 100px;
padding: 0.5rem 0.7rem;
font-size: 0.675rem;
display: flex;
align-items: center;
gap: 0.25rem;
font-weight: 50;
}
a {
color: var(--color);
text-decoration: none;
opacity: 0.5;
display: inline-block;
align-self: start;
transition: opacity 0.2s;
}
Copy article h2 {
margin 0;
padding: 1rem 0;
font-weight: 100;
font-size: 1.5rem;
}
.header {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.header svg {
--count: 4;
width: 106px;
}
CSS Media Queries Breakpoints
CSS media queries breakpoints for responsive design.
Copy @media screen and (max-width: 320px) {
...
}
@media screen and (min-width: 321px) and (max-width: 480px) {
...
}
@media screen and (min-width: 481px) and (max-width: 600px) {
...
}
@media screen and (min-width: 601px) and (max-width: 768px) {
...
}
@media screen and (min-width: 769px) and (max-width: 992px) {
...
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
...
}
@media screen and (min-width: 1200px) {
...
}