CSS

GitBook docs section concerning CSS context.

Media Queries

CSS media queries for responsive layouts.

@media screen and (max-width: 600px) {
    body {
        background-color: olive;
    }
}

Media Queries Breakpoints

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.

.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;
    }
}

<h1 class="fade-in">Fade In Text</h1>

Selection & First Letter

Paragraph style for text selection and first letter.

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.

.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;

Parameter	Description
none	Default value. No shadow is displayed.
h-offset	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.
v-offset	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.
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be.
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
color	Optional. The color of the shadow. The default value is the text color.
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner shadow.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Linear Gradient Text

Linear gradient effect in text title.

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).

.navbar-fixed-top.scrolled {
    background-color: #ffffff !important;
    transition: background-color 200ms liner;
}

$(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.

.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.

<div class="spinner"></div>

.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.

img {
    filter: drop-shadow(8px 8px 4px #FAEA10);
}

CSS Glowing Border Effect

CSS code create a div card with glowing border effect.

.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;
}

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.

@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) {
    ...
}