adb.study/webdesign-Becker_Ehricht_Fleck_Minkowitsch_Pfau
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: adb.study:614733ef64f7449591b312a27e010237a093233f
Branches Tags
adb.study:master
...
compare: adb.study:b77568677752852f5d7c94552dfc9ba3e5ee660f
Branches Tags
adb.study:master

2 Commits
614733ef64 ... b775686777

Author SHA1 Message Date
adb-sh
b775686777 add positions
All checks were successful
continuous-integration/drone/push Build is passing
Details
2023-01-05 02:07:06 +01:00
adb-sh
a0b133679b fix style 2023-01-05 02:06:54 +01:00
18 changed files with 1996 additions and 1715 deletions
Show Stats Expand all files Collapse all files

23
css/animations.css
View File

@ -61,6 +61,7 @@
} }
} }
/* -----------------Animationen Beispiele--------------------------- */ /* -----------------Animationen Beispiele--------------------------- */
/* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/ /* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/
#stempel1 { #stempel1 {
@ -85,8 +86,7 @@
transform: scale(1.5) rotate(30deg); transform: scale(1.5) rotate(30deg);
} }
100% 100% {
{
transform: scale(1) rotate(10deg) transform: scale(1) rotate(10deg)
} }
} }
@ -117,8 +117,7 @@
left: var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left: var(--width2); left: var(--width2);
} }
@ -150,8 +149,7 @@
left: var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left: var(--width2); left: var(--width2);
} }
@ -183,8 +181,7 @@
transform: rotate(180deg); transform: rotate(180deg);
} }
100% 100% {
{
transform: rotate(360deg) transform: rotate(360deg)
} }
} }
@ -214,14 +211,12 @@
transform: rotate(180deg); transform: rotate(180deg);
} }
100% 100% {
{
transform: rotate(360deg) transform: rotate(360deg)
} }
} }
/*--------------- Beispiel 1 für die animation timing funktion ---------------*/ /*--------------- Beispiel 1 für die animation timing funktion ---------------*/
#beispiel1 { #beispiel1 {
color: red; color: red;
@ -248,8 +243,7 @@
left: var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left: var(--width2); left: var(--width2);
} }
@ -281,8 +275,7 @@
left: var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left: var(--width2); left: var(--width2);
} }

12
css/layout.css
View File

@ -1,4 +1,3 @@
/* ---------- Farben ---------- */ /* ---------- Farben ---------- */
:root { :root {
--primary: #1D2026; --primary: #1D2026;
@ -70,6 +69,12 @@ footer {
border-bottom: 4px solid var(--primary); border-bottom: 4px solid var(--primary);
} }
code {
padding: .25rem .75rem;
border-radius: .35rem;
background-color: rgba(40, 40, 40, 0.8);
}
.code-example { .code-example {
margin: 4px; margin: 4px;
padding: 8px; padding: 8px;
@ -78,6 +83,11 @@ footer {
max-width: 550px; max-width: 550px;
} }
.code-example code {
padding: 0;
background-color: rgba(40, 40, 40, 0.8);
}
.visual-example { .visual-example {
background-color: gray; background-color: gray;
border: 2px solid; border: 2px solid;

62
css/position.css Normal file
View File

@ -0,0 +1,62 @@
section.examples .example-box {
background-color: #3268aa;
border: 3px solid #88ff9c;
height: 3rem;
width: 3rem;
border-radius: .3rem;
margin: .5rem;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
}
section.examples .example-box.active {
border: 3px solid #d73f3f;
}
.visual-example {
display: flex;
flex-direction: row;
position: relative;
padding: .5rem;
}
#example1 .active {
position: static;
top: 1rem;
left: 1rem;
}
#example2 .active {
position: relative;
top: 1rem;
left: 1rem;
}
#example3 .active {
position: absolute;
top: 1rem;
left: 1rem;
}
#example4 .active {
position: fixed;
top: 1rem;
left: 1rem;
}
#example5 {
overflow: scroll;
}
#example5 .active {
position: sticky;
left: 1rem;
right: 1rem;
}
#example5 .wrapper {
display: flex;
border: 2px solid #d73f3f;
}

24
css/text_styling.css
View File

@ -2,35 +2,45 @@
#font-sizePX { #font-sizePX {
font-size: 20px; font-size: 20px;
} }
#font-sizePR { #font-sizePR {
font-size: 120%; font-size: 120%;
} }
#font-sizeCM { #font-sizeCM {
font-size: 1cm; font-size: 1cm;
} }
#font-sizeS { #font-sizeS {
font-size: smaller; font-size: smaller;
} }
#font-sizeM { #font-sizeM {
font-size: medium; font-size: medium;
} }
#font-sizeL { #font-sizeL {
font-size: larger; font-size: larger;
} }
/*--------------Veränderung der Textart--------------*/ /*--------------Veränderung der Textart--------------*/
#font-familyA { #font-familyA {
font-family: Arial; font-family: Arial;
} }
#font-familyG { #font-familyG {
font-family: Georgia; font-family: Georgia;
} }
#font-familyLH { #font-familyLH {
font-family: Lucida Handwriting; font-family: Lucida Handwriting;
} }
/*--------------Schriftfarbe ändern--------------*/ /*--------------Schriftfarbe ändern--------------*/
#colorW { #colorW {
color: red; color: red;
} }
#colorZ { #colorZ {
color: rgb(81, 132, 109); color: rgb(81, 132, 109);
} }
@ -39,6 +49,7 @@
#font-styleI { #font-styleI {
font-style: italic; font-style: italic;
} }
#font-styleO { #font-styleO {
font-style: oblique; font-style: oblique;
} }
@ -47,6 +58,7 @@
#font-weightB { #font-weightB {
font-weight: bold; font-weight: bold;
} }
#font-weightZ { #font-weightZ {
font-weight: 700; font-weight: 700;
} }
@ -60,12 +72,15 @@
#text-alignL { #text-alignL {
text-align: left; text-align: left;
} }
#text-alignR { #text-alignR {
text-align: right; text-align: right;
} }
#text-alignC { #text-alignC {
text-align: center; text-align: center;
} }
#text-alignJ { #text-alignJ {
text-align: justify; text-align: justify;
} }
@ -74,10 +89,12 @@
#text-decorationU { #text-decorationU {
text-decoration: underline; text-decoration: underline;
} }
#text-decorationO { #text-decorationO {
text-decoration: overline; text-decoration: overline;
margin: 4px;; margin: 4px;;
} }
#text-decorationLT { #text-decorationLT {
text-decoration: line-through; text-decoration: line-through;
} }
@ -86,9 +103,11 @@
#word-spacingMM { #word-spacingMM {
word-spacing: 3mm; word-spacing: 3mm;
} }
#word-spacingPX { #word-spacingPX {
word-spacing: 10px; word-spacing: 10px;
} }
#word-spacingREM { #word-spacingREM {
word-spacing: 1rem; word-spacing: 1rem;
} }
@ -97,9 +116,11 @@
#text-indentMM { #text-indentMM {
text-indent: 10mm text-indent: 10mm
} }
#text-indentPX { #text-indentPX {
text-indent: 20px; text-indent: 20px;
} }
#text-indentREM { #text-indentREM {
text-indent: 1rem; text-indent: 1rem;
} }
@ -108,12 +129,15 @@
#text-transformC { #text-transformC {
text-transform: capitalize text-transform: capitalize
} }
#text-transformU { #text-transformU {
text-transform: uppercase text-transform: uppercase
} }
#text-transformL { #text-transformL {
text-transform: lowercase text-transform: lowercase
} }
#text-transformN { #text-transformN {
text-transform: none text-transform: none
} }

2
screens/animation/animations.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animations.html">Animationen</a> <a href="animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

2
screens/animation/keyframes.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animations.html">Animationen</a> <a href="animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

2
screens/flexbox/allgemeines.html
View File

@ -19,7 +19,7 @@
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

26
screens/flexbox/eigenschaften.html
View File

@ -19,7 +19,7 @@
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
@ -37,7 +37,8 @@
<h3 id="anchor21">flex-wrap</h3> <h3 id="anchor21">flex-wrap</h3>
<h4>Mit horizontaler Anordnung</h4> <h4>Mit horizontaler Anordnung</h4>
<div class="code-example"> <div class="code-example">
<code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap: wrap; <br> }</code> <code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap:
wrap; <br> }</code>
</div> </div>
<div class="visual-example" id="example3"> <div class="visual-example" id="example3">
<p>p1</p> <p>p1</p>
@ -51,7 +52,8 @@
</div> </div>
<h4>Mit vertikaler Anordnung</h4> <h4>Mit vertikaler Anordnung</h4>
<div class="code-example"> <div class="code-example">
<code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> &emsp; flex-wrap: wrap; <br> &emsp; max-height: 600px; <br> }</code> <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> &emsp; flex-wrap:
wrap; <br> &emsp; max-height: 600px; <br> }</code>
</div> </div>
<div class="visual-example" id="example4"> <div class="visual-example" id="example4">
<p>p1</p> <p>p1</p>
@ -70,7 +72,8 @@
</p> </p>
<h3 id="anchor22">flex-flow</h3> <h3 id="anchor22">flex-flow</h3>
<div class="code-example"> <div class="code-example">
<code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height: 600px; <br> }</code> <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height:
600px; <br> }</code>
</div> </div>
<p class="explanation"> <p class="explanation">
<code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und <code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und
@ -80,7 +83,8 @@
<section> <section>
<h3 id="anchor23">justify-content</h3> <h3 id="anchor23">justify-content</h3>
<div class="code-example"> <div class="code-example">
<code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: center; <br> }</code> <code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: center; <br> }</code>
</div> </div>
<div class="visual-example" id="example5"> <div class="visual-example" id="example5">
<p>p1</p> <p>p1</p>
@ -89,7 +93,8 @@
<p>p4</p> <p>p4</p>
</div> </div>
<div class="code-example"> <div class="code-example">
<code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: flex-end; <br> }</code> <code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: flex-end; <br> }</code>
</div> </div>
<div class="visual-example" id="example6"> <div class="visual-example" id="example6">
<p>p1</p> <p>p1</p>
@ -114,7 +119,8 @@
<section> <section>
<h3 id="anchor24">align-content</h3> <h3 id="anchor24">align-content</h3>
<div class="code-example"> <div class="code-example">
<code>#example7 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code> <code>#example7 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code>
</div> </div>
<div class="visual-example" id="example7"> <div class="visual-example" id="example7">
<p>p1</p> <p>p1</p>
@ -144,7 +150,8 @@
<section> <section>
<h3 id="anchor25">overflow</h3> <h3 id="anchor25">overflow</h3>
<div class="code-example"> <div class="code-example">
<code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x: scroll; <br> }</code> <code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x:
scroll; <br> }</code>
</div> </div>
<div class="visual-example" id="example8"> <div class="visual-example" id="example8">
<p>p1</p> <p>p1</p>
@ -161,7 +168,8 @@
<p>p12</p> <p>p12</p>
</div> </div>
<div class="code-example"> <div class="code-example">
<code>#example9 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column nowrap; <br> &emsp; max-height: 600px; <br> &emsp; overflow-y: scroll; <br> }</code> <code>#example9 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column nowrap; <br> &emsp;
max-height: 600px; <br> &emsp; overflow-y: scroll; <br> }</code>
</div> </div>
<div class="visual-example" id="example9"> <div class="visual-example" id="example9">
<p>p1</p> <p>p1</p>

14
screens/flexbox/unterelemente.html
View File

@ -19,7 +19,7 @@
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
@ -36,7 +36,8 @@
<section> <section>
<h3 id="anchor31">flex-grow</h3> <h3 id="anchor31">flex-grow</h3>
<div class="code-example"> <div class="code-example">
<code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example10 > p { <br> &emsp; flex-grow: 1; <br> }</code> <code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example10 > p { <br> &emsp; flex-grow: 1; <br> }</code>
</div> </div>
<div class="visual-example" id="example10"> <div class="visual-example" id="example10">
<p>p1</p> <p>p1</p>
@ -51,7 +52,8 @@
<section> <section>
<h3 id="anchor32">flex-basis</h3> <h3 id="anchor32">flex-basis</h3>
<div class="code-example"> <div class="code-example">
<code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code> <code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code>
</div> </div>
<div class="visual-example" id="example11"> <div class="visual-example" id="example11">
<p>p1</p> <p>p1</p>
@ -65,7 +67,8 @@
<section> <section>
<h3 id="anchor33">flex-shrink</h3> <h3 id="anchor33">flex-shrink</h3>
<div class="code-example"> <div class="code-example">
<code>#example12 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code> <code>#example12 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code>
</div> </div>
<div class="visual-example" id="example12"> <div class="visual-example" id="example12">
<p>p1</p> <p>p1</p>
@ -76,7 +79,8 @@
<p>p6</p> <p>p6</p>
</div> </div>
<div class="code-example"> <div class="code-example">
<code>#example13 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example13 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 1; <br> }</code> <code>#example13 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example13 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 1; <br> }</code>
</div> </div>
<div class="visual-example" id="example13"> <div class="visual-example" id="example13">
<p>p1</p> <p>p1</p>

2
screens/grid/allgemeines.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

11
screens/grid/container.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
@ -48,7 +48,8 @@
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; gap: 10px;<br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br>
&emsp; gap: 10px;<br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example4"> <div class="visual-example" id="example4">
@ -70,7 +71,8 @@
<br> <br>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; grid-template-rows: 150px 100px 200px;<br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br>
&emsp; grid-template-rows: 150px 100px 200px;<br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example5"> <div class="visual-example" id="example5">
@ -99,7 +101,8 @@
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br> &emsp; justify-content: space-evenly <br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br>
&emsp; justify-content: space-evenly <br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example6"> <div class="visual-example" id="example6">

2
screens/grid/items.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

2
screens/home.html
View File

@ -16,7 +16,7 @@
<a href="flexbox/allgemeines.html">Flexbox-Layout</a> <a href="flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="grid/allgemeines.html">Grid-Layout</a> <a href="grid/allgemeines.html">Grid-Layout</a>
<a href="text_styling/allgemeines.html">Text-Styling</a> <a href="text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animation/animations.html">Animationen</a> <a href="animation/animations.html">Animationen</a>
</nav> </nav>
<main> <main>

170
screens/position/allgemeines.html Normal file
View File

@ -0,0 +1,170 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animationen</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/position.css">
</head>
<body>
<header>
<h1>Animationen</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="./">Positionen</a>
</nav>
<main>
<article>
<section>
<h2>
Positionen mit CSS
</h2>
<p>
Mit den verschiedenen Positions-Eigenschaften wird definiert wie sich die Position
eines Elementes relativ zum Parent-Element verhaelt. Das hat auswirkungen darauf, wie die Eigenschaften
<code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code> interpretiert werden.
Das kann zum Beispiel praktisch sein, wenn man auf einer Website einen fixierten Header setzen moechte.
</p>
</section>
<section class="examples">
<h3>Static</h3>
<div class="visual-example" id="example1">
<div class="example-box">1</div>
<div class="example-box active">2</div>
<div class="example-box">3</div>
<div class="example-box">4</div>
</div>
<div class="code-example">
<code>
#example1 .active {<br>
&emsp;position: static;<br>
&emsp;top: 1rem;<br>
&emsp;left: 1rem;<br>
}
</code>
</div>
<p>
Obwohl die Eigenschaften <code>top</code> und <code>left</code> gesetzt sind, haben diese keine
Auswirkung, da die Positions-Eigenschaft auf <code>static</code> gesetzt ist.
</p>
</section>
<section class="examples">
<h3>Relative</h3>
<div class="visual-example" id="example2">
<div class="example-box">1</div>
<div class="example-box active">2</div>
<div class="example-box">3</div>
<div class="example-box">4</div>
</div>
<div class="code-example">
<code>
#example2 .active {<br>
&emsp;position: relative;<br>
&emsp;top: 1rem;<br>
&emsp;left: 1rem;<br>
}
</code>
</div>
<p>
Relativ zum normalen Dokument-flow wird das Element mit den Attributen <code>top</code> und
<code>left</code> verschoben.
</p>
</section>
<section class="examples">
<h3>Absolute</h3>
<div class="visual-example" id="example3">
<div class="example-box">1</div>
<div class="example-box active">2</div>
<div class="example-box">3</div>
<div class="example-box">4</div>
</div>
<div class="code-example">
<code>
#example3 .active {<br>
&emsp;position: relative;<br>
&emsp;top: 1rem;<br>
&emsp;left: 1rem;<br>
}
</code>
</div>
<p>
Das Element wird aus dem normalen Dokument-flow entfernt und absolut zum naechtsen
Eltern-Elements mit positions-Attribut <code>relative</code>, <code>absolute</code>, <code>fixed</code>
oder <code>static</code> platziert.
</p>
</section>
<section class="examples">
<h3>Fixed</h3>
<div class="visual-example" id="example4">
<div class="example-box">1</div>
<div class="example-box active">2</div>
<div class="example-box">3</div>
<div class="example-box">4</div>
</div>
<div class="code-example">
<code>
#example4 .active {<br>
&emsp;position: relative;<br>
&emsp;top: 1rem;<br>
&emsp;left: 1rem;<br>
}
</code>
</div>
<p>
Das Element wird aus dem normalen Dokument-flow entfernt und absolut zum viewport positioniert.
Das Element ist nun oben links auf der Webseite zu finden.
</p>
</section>
<section class="examples">
<h3>Sticky</h3>
<div class="visual-example" id="example5">
<div class="example-box">1</div>
<div class="wrapper">
<div class="example-box active">2</div>
<div class="example-box">3</div>
</div>
<div class="example-box">4</div>
<div class="example-box">5</div>
<div class="example-box active">6</div>
<div class="example-box">7</div>
<div class="example-box">8</div>
<div class="example-box">9</div>
<div class="example-box">10</div>
</div>
<div class="code-example">
<code>
#example5 .active {<br>
&emsp;position: sticky;<br>
&emsp;left: 1rem;<br>
&emsp;right: 1rem;<br>
}
</code>
</div>
<p>
Das Element is im normalen Dokument flow-platziert. Sobald das Element allerdings von einem
uebergeordneten Element mit overflow-Eigenschaft die Kante erreicht, greift die entsprechende
Eigenschaft <code>top</code>, <code>bottom</code>, <code>left</code> oder <code>right</code>.
Das Element kann sich dabei nur im direkten Eltern-Element bewegen; Box 2 und Box 3 sind zur
Veranschaulichung in einem extra div-Element.
</p>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Alban Becker</p>
</footer>
</body>
</html>

2
screens/text_styling/allgemeines.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a> <a href="allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

23
screens/text_styling/beispiele.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a> <a href="allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
@ -208,7 +208,8 @@
Textausrichtung ändern Textausrichtung ändern
</h3> </h3>
<p> <p>
Mit der Anweisung text-align kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig, Rechtsseitig und Blocksats ändern. Mit der Anweisung text-align kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig,
Rechtsseitig und Blocksats ändern.
Die Anweisung ist wie die anderen Anzuwenden. Die Anweisung ist wie die anderen Anzuwenden.
</p> </p>
<div class="code-example"> <div class="code-example">
@ -243,7 +244,8 @@
Textgestaltung Textgestaltung
</h3> </h3>
<p> <p>
Mit hilfe der "text-decoration" Anweisung kann man der Schrift linien über, unter und durch die schrift Hinzufügen. Mit hilfe der "text-decoration" Anweisung kann man der Schrift linien über, unter und durch die schrift
Hinzufügen.
Die Anweisung wird ausgeführt wie die Vorherigen. Die Anweisung wird ausgeführt wie die Vorherigen.
</p> </p>
<div class="code-example"> <div class="code-example">
@ -275,8 +277,10 @@
Wort- und Zeichenabstände verändern Wort- und Zeichenabstände verändern
</h3> </h3>
<p> <p>
Die "word-spacing" Anweisung funktioniert im Grund wie die "font-size" Anweisung nur anstatt das man die Größe der Wörter verändert Die "word-spacing" Anweisung funktioniert im Grund wie die "font-size" Anweisung nur anstatt das man die
erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das man den abstand nicht in Prozenten(%) Größe der Wörter verändert
erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das
man den abstand nicht in Prozenten(%)
angeben kann, dafür aber in Milimetern(mm) und Punkten(pt). angeben kann, dafür aber in Milimetern(mm) und Punkten(pt).
</p> </p>
<div class="code-example"> <div class="code-example">
@ -303,7 +307,8 @@
<li id="word-spacingREM">1 root-Element</li> <li id="word-spacingREM">1 root-Element</li>
</ol> </ol>
<p class="explanation"> <p class="explanation">
Die Anweisung "letter-spacing" funktioniert genauso, nur dass sie den Abstand zwischen einzelnen Zeichen, Die Anweisung "letter-spacing" funktioniert genauso, nur dass sie den Abstand zwischen einzelnen
Zeichen,
also jedem einzelnen Buchstaben, verändert anstatt zwischen den ganzen Wörtern. also jedem einzelnen Buchstaben, verändert anstatt zwischen den ganzen Wörtern.
</p> </p>
</section> </section>
@ -344,7 +349,8 @@
Texte transvormieren Texte transvormieren
</h3> </h3>
<p> <p>
Nun zur letzten Anweisung zum Stylen von Texten in CSS. Mit "text-transform" kann der Nutzer Regeln für den Text festlegen, Nun zur letzten Anweisung zum Stylen von Texten in CSS. Mit "text-transform" kann der Nutzer Regeln für
den Text festlegen,
die dann für alle Wörter gelten. Die Regeln die angewendet werden können sind: die dann für alle Wörter gelten. Die Regeln die angewendet werden können sind:
</p> </p>
<ol> <ol>
@ -354,7 +360,8 @@
<li>None: Regeln werden aufgehoben.</li> <li>None: Regeln werden aufgehoben.</li>
</ol> </ol>
<p> <p>
Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der rechtschreibung für Leute, Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der
rechtschreibung für Leute,
mit Problemen in der Groß- und Kleinschreibung übergehen, da es so zu einem Stilmittel wird. mit Problemen in der Groß- und Kleinschreibung übergehen, da es so zu einem Stilmittel wird.
</p> </p>
<div class="code-example"> <div class="code-example">