WebDev Notes

About

HTML & CSS Basics and some IDE & WebDev Tools

Bearbeitete Quellen:

Spice Up Your Site on Youtube by Kevin Powell

EMMET Abbreviations

Key / Shortcut	What it does
`!`	Inserts a HTML Doctype Template, for starting a new *.html file
`p>Lorem`	Inserts example Content in a paragraph

more at docs.emmet.io

VS CODE

Key / Shortcut	What it does
`SHIFT` + `ALT` + `DOWN`	Copy Selection to the bottom

HTML Struktur

html
<body>

<header>
    content here ...
</header>
<section>
    <div class="wrapper">

        content here ...
    </div>
</section>

</body>

CSS

Beispiele bzw. Vorlagen für ein Standard CSS Layout

CSS Basic

css
*,
*::before,
*::after {
box-sizing: border-box
}

html {
    color-scheme: dark light;
}

body {
    font-family: system-ui;
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 0;
}

. wrapper {
max-width: 5rem;
margin-left: auto;
margin-right: auto;
/* or */
margin-inline: auto;

padding-inline: 1rem;

}

CSS Titles

css
.site-title {
    font-size: 3rem;
    text-align: center;
}

. section-title {
    font-size: 2.25rem;
}

CSS padding-block

the padding-block and padding-inline properties are dependent on block and inline directions.

An element's padding-block is the space from its border to its content in the block direction, and it is a shorthand property for the following properties:

Values for the padding-block property can be set in different ways:

If the padding-block property has two values:

padding-block: 10px 50px;
- padding at start is 10px
- padding at end is 50px

If the padding-block property has one value:

padding-block: 10px;
- padding at start and end is 10px

To add space to the top and bottom of a section:

css
section {
    padding-block:5rem;
}

CSS Gradients

Diagonal Background Fill

css
.diagonal {
    position: relative;
    isolation: isolate; /* keep the z-index inline and not gloabl */
}

.diagonal::after {
    content :'';
    background-image:
            linear-gradient(
                45deg,
                #12c2e9,
                #c471ed,
                #f64f59
            );
    position: absolute;
    z-index:-1;
    inset: 0;
    transform: skewY( -5deg);
}

use it with variables

css
.diagonal {
    --skew-angle: -5deg;
    --background: linear-gradient(
                45deg,
                #12c2e9,
                #c471ed,
                #f64f59
            );

    position: relative;
    isolation: isolate; /* keep the z-index inline and not gloabl */
}

.diagonal::after {
    content :'';
    background: var(--background);          
    position: absolute;
    z-index:-1;
    inset: 0;
    transform: skewY(var(--skew-angle);
}

CSS Mask

Mask by using SVG

Puts a mask on a background, with the shape of a scalable vector graphic.

css
.spikes {
    position: relative;
    color: black;
    background:
        linear-gradient(
            to right,
            #fdc830,
            #f37335);
}

.spikes::before,
.spikes::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50px;
    background: purple;
    -webkit-mask-image: url('assets/triang1e.svg');
}

.spikes::before {
    top: 0;
}

.spikes::after {
    bottom: 0;
    /* flip the svg over 180 */
    transform: rotate(.5turn);
}

SVG Color

Change the whole background color and the mask color by changing one variable only.

css
: root {
    --body-bg: hsl(0, 0%, 12%);

.spikes {
    /* insert a variable for a color and map it to the root variable */ 
    --spike-color: var(--body-bg);

    position: relative;
    color: black;
    background:
        linear-gradient(
            to right,
            #fdc830,
            #f37335);
}

.spikes::before,
.spikes::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50px;
    background: var(--spike-color);
    -webkit-mask-image: url('assets/triang1e.svg');
}

.spikes::before {
    top: 0;
}

.spikes::after {
    bottom: 0;
    /* flip the svg over 180 */
    transform: rotate(.5turn);
}

SVG Form

css
.spikes::before,
.spikes::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50px;
    background: var(--spike-color);
    -webkit-mask-image: url('assets/triang1e.svg');
    /* add width & height values for the SVG */
    -webkit-mask-size: 10px 50px;
    /* only repeats the SVG on the x axis */
    -webkit-mask-repeat: repeat-x;
}

but keep it easier, assign two more custom variables to ensure the resizing of the height of the svg wrapper is adjusted acordingly.

css
.spikes {
    /* insert a variable for a color and map it to the root variable */ 
    --spike-color: var(--body-bg);
    --spike-width: 10px;
    --spike-height: 5px;
    position: relative;
    color: black;
    background:
        linear-gradient(
            to right,
            #fdc830,
            #f37335);
}

.spikes::before,
.spikes::after {
    content: '';
    position: absolute;
    width: 100%;
    height: var(--spike-height);
    background: var(--spike-color);
    -webkit-mask-image: url('assets/triang1e.svg');
    -webkit-mask-size: var(--spike-width) var(--spike-height); /* add width & height values for the SVG */
    /* -webkit-mask-repeat: repeat-x; */ /* only repeats the SVG on the x axis */
    mask-image: url('assets/triang1e.svg');
    mask-size: var(--spike-width) var(--spike-height); /* add width & height values for the SVG */
    /* mask-repeat: repeat-x; */ /* only repeats the SVG on the x axis */
}

CSS mask the form

css
. wavy {
    /* mask created with https://css-generators.com/wavy-shapes/ */
    background:
        Linear-gradient(
            to right,
            #00f260,
            #0575e6);

  --mask:
    radial-gradient(34.99px at 50% calc(100% - 48px),#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
    radial-gradient(34.99px at 50% calc(100% + 18px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

SVG

Add preserveAspectRatio="none" to the path tag of a SVG, to enable resizing and adjusting the SVG by CSS properties.

More ..

CSS Masking at W3Schools

Dev.Love