SBDeveloper90 | Pretty Docs

Download

Welcome to the mine useful documentation for daily work on web developer and computer programming. Thanks to PrettyDocs for theme template layout; download it at the page linked in the button below.

Download PrettyDocs

PrismJS

PrismJS is used as the syntax highlighter here. You can build your own version via their website should you need to.

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());
    });
});

CSS Docs