Compare commits
No commits in common. "b77568677752852f5d7c94552dfc9ba3e5ee660f" and "614733ef64f7449591b312a27e010237a093233f" have entirely different histories.
b775686777
...
614733ef64
@ -61,7 +61,6 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* -----------------Animationen Beispiele--------------------------- */
|
||||
/* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/
|
||||
#stempel1{
|
||||
@ -86,7 +85,8 @@
|
||||
transform: scale(1.5) rotate(30deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
100%
|
||||
{
|
||||
transform: scale(1) rotate(10deg)
|
||||
}
|
||||
}
|
||||
@ -117,7 +117,8 @@
|
||||
left:var(--width3);
|
||||
}
|
||||
|
||||
100% {
|
||||
100%
|
||||
{
|
||||
transform: scale(1);
|
||||
left:var(--width2);
|
||||
}
|
||||
@ -149,7 +150,8 @@
|
||||
left:var(--width3);
|
||||
}
|
||||
|
||||
100% {
|
||||
100%
|
||||
{
|
||||
transform: scale(1);
|
||||
left:var(--width2);
|
||||
}
|
||||
@ -181,7 +183,8 @@
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
100%
|
||||
{
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
@ -211,12 +214,14 @@
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
100%
|
||||
{
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*--------------- Beispiel 1 für die animation timing funktion ---------------*/
|
||||
#beispiel1 {
|
||||
color: red;
|
||||
@ -243,7 +248,8 @@
|
||||
left:var(--width3);
|
||||
}
|
||||
|
||||
100% {
|
||||
100%
|
||||
{
|
||||
transform: scale(1);
|
||||
left:var(--width2);
|
||||
}
|
||||
@ -275,7 +281,8 @@
|
||||
left:var(--width3);
|
||||
}
|
||||
|
||||
100% {
|
||||
100%
|
||||
{
|
||||
transform: scale(1);
|
||||
left:var(--width2);
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
/* ---------- Farben ---------- */
|
||||
:root {
|
||||
--primary: #1D2026;
|
||||
@ -69,12 +70,6 @@ footer {
|
||||
border-bottom: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: .25rem .75rem;
|
||||
border-radius: .35rem;
|
||||
background-color: rgba(40, 40, 40, 0.8);
|
||||
}
|
||||
|
||||
.code-example {
|
||||
margin: 4px;
|
||||
padding: 8px;
|
||||
@ -83,11 +78,6 @@ code {
|
||||
max-width: 550px;
|
||||
}
|
||||
|
||||
.code-example code {
|
||||
padding: 0;
|
||||
background-color: rgba(40, 40, 40, 0.8);
|
||||
}
|
||||
|
||||
.visual-example {
|
||||
background-color: gray;
|
||||
border: 2px solid;
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -2,45 +2,35 @@
|
||||
#font-sizePX{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#font-sizePR{
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
#font-sizeCM{
|
||||
font-size: 1cm;
|
||||
}
|
||||
|
||||
#font-sizeS{
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
#font-sizeM{
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
#font-sizeL{
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
/*--------------Veränderung der Textart--------------*/
|
||||
#font-familyA{
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
#font-familyG{
|
||||
font-family: Georgia;
|
||||
}
|
||||
|
||||
#font-familyLH{
|
||||
font-family: Lucida Handwriting;
|
||||
}
|
||||
|
||||
/*--------------Schriftfarbe ändern--------------*/
|
||||
#colorW{
|
||||
color: red;
|
||||
}
|
||||
|
||||
#colorZ{
|
||||
color: rgb(81, 132, 109);
|
||||
}
|
||||
@ -49,7 +39,6 @@
|
||||
#font-styleI{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#font-styleO{
|
||||
font-style: oblique;
|
||||
}
|
||||
@ -58,7 +47,6 @@
|
||||
#font-weightB{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#font-weightZ{
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -72,15 +60,12 @@
|
||||
#text-alignL{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#text-alignR{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#text-alignC{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#text-alignJ{
|
||||
text-align: justify;
|
||||
}
|
||||
@ -89,12 +74,10 @@
|
||||
#text-decorationU{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#text-decorationO{
|
||||
text-decoration: overline;
|
||||
margin: 4px;;
|
||||
}
|
||||
|
||||
#text-decorationLT{
|
||||
text-decoration: line-through;
|
||||
}
|
||||
@ -103,11 +86,9 @@
|
||||
#word-spacingMM{
|
||||
word-spacing: 3mm;
|
||||
}
|
||||
|
||||
#word-spacingPX{
|
||||
word-spacing: 10px;
|
||||
}
|
||||
|
||||
#word-spacingREM{
|
||||
word-spacing: 1rem;
|
||||
}
|
||||
@ -116,11 +97,9 @@
|
||||
#text-indentMM{
|
||||
text-indent: 10mm
|
||||
}
|
||||
|
||||
#text-indentPX{
|
||||
text-indent: 20px;
|
||||
}
|
||||
|
||||
#text-indentREM{
|
||||
text-indent: 1rem;
|
||||
}
|
||||
@ -129,15 +108,12 @@
|
||||
#text-transformC{
|
||||
text-transform: capitalize
|
||||
}
|
||||
|
||||
#text-transformU{
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
#text-transformL{
|
||||
text-transform: lowercase
|
||||
}
|
||||
|
||||
#text-transformN{
|
||||
text-transform: none
|
||||
}
|
||||
@ -19,7 +19,7 @@
|
||||
<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="position.html">Position-Eigenschaft</a>
|
||||
<a href="animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<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="position.html">Position-Eigenschaft</a>
|
||||
<a href="animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<a href="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="position.html">Position-Eigenschaft</a>
|
||||
<a href="../animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<a href="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="position.html">Position-Eigenschaft</a>
|
||||
<a href="../animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
@ -37,8 +37,7 @@
|
||||
<h3 id="anchor21">flex-wrap</h3>
|
||||
<h4>Mit horizontaler Anordnung</h4>
|
||||
<div class="code-example">
|
||||
<code>#example3 { <br>   display: flex; <br>   flex-direction: row; <br>   flex-wrap:
|
||||
wrap; <br> }</code>
|
||||
<code>#example3 { <br>   display: flex; <br>   flex-direction: row; <br>   flex-wrap: wrap; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example3">
|
||||
<p>p1</p>
|
||||
@ -52,8 +51,7 @@
|
||||
</div>
|
||||
<h4>Mit vertikaler Anordnung</h4>
|
||||
<div class="code-example">
|
||||
<code>#example4 { <br>   display: flex; <br>   flex-direction: column; <br>   flex-wrap:
|
||||
wrap; <br>   max-height: 600px; <br> }</code>
|
||||
<code>#example4 { <br>   display: flex; <br>   flex-direction: column; <br>   flex-wrap: wrap; <br>   max-height: 600px; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example4">
|
||||
<p>p1</p>
|
||||
@ -72,8 +70,7 @@
|
||||
</p>
|
||||
<h3 id="anchor22">flex-flow</h3>
|
||||
<div class="code-example">
|
||||
<code>#example4 { <br>   display: flex; <br>   flex-flow: column wrap; <br>   max-height:
|
||||
600px; <br> }</code>
|
||||
<code>#example4 { <br>   display: flex; <br>   flex-flow: column wrap; <br>   max-height: 600px; <br> }</code>
|
||||
</div>
|
||||
<p class="explanation">
|
||||
<code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und
|
||||
@ -83,8 +80,7 @@
|
||||
<section>
|
||||
<h3 id="anchor23">justify-content</h3>
|
||||
<div class="code-example">
|
||||
<code>#example5 { <br>   display: flex; <br>   flex-flow: row wrap; <br>  
|
||||
justify-content: center; <br> }</code>
|
||||
<code>#example5 { <br>   display: flex; <br>   flex-flow: row wrap; <br>   justify-content: center; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example5">
|
||||
<p>p1</p>
|
||||
@ -93,8 +89,7 @@
|
||||
<p>p4</p>
|
||||
</div>
|
||||
<div class="code-example">
|
||||
<code>#example6 { <br>   display: flex; <br>   flex-flow: row wrap; <br>  
|
||||
justify-content: flex-end; <br> }</code>
|
||||
<code>#example6 { <br>   display: flex; <br>   flex-flow: row wrap; <br>   justify-content: flex-end; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example6">
|
||||
<p>p1</p>
|
||||
@ -119,8 +114,7 @@
|
||||
<section>
|
||||
<h3 id="anchor24">align-content</h3>
|
||||
<div class="code-example">
|
||||
<code>#example7 { <br>   display: flex; <br>   flex-flow: row wrap; <br>  
|
||||
justify-content: flex-end; <br>   align-content: space-between; <br> }</code>
|
||||
<code>#example7 { <br>   display: flex; <br>   flex-flow: row wrap; <br>   justify-content: flex-end; <br>   align-content: space-between; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example7">
|
||||
<p>p1</p>
|
||||
@ -150,8 +144,7 @@
|
||||
<section>
|
||||
<h3 id="anchor25">overflow</h3>
|
||||
<div class="code-example">
|
||||
<code>#example8 { <br>   display: flex; <br>   flex-flow: row nowrap; <br>   overflow-x:
|
||||
scroll; <br> }</code>
|
||||
<code>#example8 { <br>   display: flex; <br>   flex-flow: row nowrap; <br>   overflow-x: scroll; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example8">
|
||||
<p>p1</p>
|
||||
@ -168,8 +161,7 @@
|
||||
<p>p12</p>
|
||||
</div>
|
||||
<div class="code-example">
|
||||
<code>#example9 { <br>   display: flex; <br>   flex-flow: column nowrap; <br>  
|
||||
max-height: 600px; <br>   overflow-y: scroll; <br> }</code>
|
||||
<code>#example9 { <br>   display: flex; <br>   flex-flow: column nowrap; <br>   max-height: 600px; <br>   overflow-y: scroll; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example9">
|
||||
<p>p1</p>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<a href="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="position.html">Position-Eigenschaft</a>
|
||||
<a href="../animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
@ -36,8 +36,7 @@
|
||||
<section>
|
||||
<h3 id="anchor31">flex-grow</h3>
|
||||
<div class="code-example">
|
||||
<code>#example10 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
||||
#example10 > p { <br>   flex-grow: 1; <br> }</code>
|
||||
<code>#example10 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br> #example10 > p { <br>   flex-grow: 1; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example10">
|
||||
<p>p1</p>
|
||||
@ -52,8 +51,7 @@
|
||||
<section>
|
||||
<h3 id="anchor32">flex-basis</h3>
|
||||
<div class="code-example">
|
||||
<code>#example11 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
||||
#example11 > p { <br>   flex-basis: 100px; <br> }</code>
|
||||
<code>#example11 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br> #example11 > p { <br>   flex-basis: 100px; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example11">
|
||||
<p>p1</p>
|
||||
@ -67,8 +65,7 @@
|
||||
<section>
|
||||
<h3 id="anchor33">flex-shrink</h3>
|
||||
<div class="code-example">
|
||||
<code>#example12 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
||||
#example12 > p { <br>   flex-basis: 40px; <br>   flex-shrink: 0; <br> }</code>
|
||||
<code>#example12 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br> #example12 > p { <br>   flex-basis: 40px; <br>   flex-shrink: 0; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example12">
|
||||
<p>p1</p>
|
||||
@ -79,8 +76,7 @@
|
||||
<p>p6</p>
|
||||
</div>
|
||||
<div class="code-example">
|
||||
<code>#example13 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
||||
#example13 > p { <br>   flex-basis: 40px; <br>   flex-shrink: 1; <br> }</code>
|
||||
<code>#example13 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br> #example13 > p { <br>   flex-basis: 40px; <br>   flex-shrink: 1; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example13">
|
||||
<p>p1</p>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="allgemeines.html">Grid-Layout</a>
|
||||
<a href="../text_styling/allgemeines.html">Text-Styling</a>
|
||||
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
||||
<a href="position.html">Position-Eigenschaft</a>
|
||||
<a href="../animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="allgemeines.html">Grid-Layout</a>
|
||||
<a href="../text_styling/allgemeines.html">Text-Styling</a>
|
||||
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
||||
<a href="position.html">Position-Eigenschaft</a>
|
||||
<a href="../animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
@ -48,8 +48,7 @@
|
||||
</p>
|
||||
<div class="code-example">
|
||||
<code>
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: auto auto auto; <br>
|
||||
  gap: 10px;<br>}
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: auto auto auto; <br>   gap: 10px;<br>}
|
||||
</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example4">
|
||||
@ -71,8 +70,7 @@
|
||||
<br>
|
||||
<div class="code-example">
|
||||
<code>
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: auto auto auto; <br>
|
||||
  grid-template-rows: 150px 100px 200px;<br>}
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: auto auto auto; <br>   grid-template-rows: 150px 100px 200px;<br>}
|
||||
</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example5">
|
||||
@ -101,8 +99,7 @@
|
||||
</p>
|
||||
<div class="code-example">
|
||||
<code>
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: 50px 50px 50px;<br>
|
||||
  justify-content: space-evenly <br>}
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: 50px 50px 50px;<br>   justify-content: space-evenly <br>}
|
||||
</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example6">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="allgemeines.html">Grid-Layout</a>
|
||||
<a href="../text_styling/allgemeines.html">Text-Styling</a>
|
||||
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
||||
<a href="position.html">Position-Eigenschaft</a>
|
||||
<a href="../animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<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="position.html">Position-Eigenschaft</a>
|
||||
<a href="animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<main>
|
||||
|
||||
@ -1,170 +0,0 @@
|
||||
<!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>
|
||||
 position: static;<br>
|
||||
 top: 1rem;<br>
|
||||
 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>
|
||||
 position: relative;<br>
|
||||
 top: 1rem;<br>
|
||||
 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>
|
||||
 position: relative;<br>
|
||||
 top: 1rem;<br>
|
||||
 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>
|
||||
 position: relative;<br>
|
||||
 top: 1rem;<br>
|
||||
 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>
|
||||
 position: sticky;<br>
|
||||
 left: 1rem;<br>
|
||||
 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>
|
||||
@ -19,7 +19,7 @@
|
||||
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="../grid/allgemeines.html">Grid-Layout</a>
|
||||
<a href="allgemeines.html">Text-Styling</a>
|
||||
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
||||
<a href="position.html">Position-Eigenschaft</a>
|
||||
<a href="../animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="../grid/allgemeines.html">Grid-Layout</a>
|
||||
<a href="allgemeines.html">Text-Styling</a>
|
||||
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
||||
<a href="position.html">Position-Eigenschaft</a>
|
||||
<a href="../animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
@ -208,8 +208,7 @@
|
||||
Textausrichtung ändern
|
||||
</h3>
|
||||
<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.
|
||||
</p>
|
||||
<div class="code-example">
|
||||
@ -244,8 +243,7 @@
|
||||
Textgestaltung
|
||||
</h3>
|
||||
<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.
|
||||
</p>
|
||||
<div class="code-example">
|
||||
@ -277,10 +275,8 @@
|
||||
Wort- und Zeichenabstände verändern
|
||||
</h3>
|
||||
<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
|
||||
erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das
|
||||
man den abstand nicht in Prozenten(%)
|
||||
Die "word-spacing" Anweisung funktioniert im Grund wie die "font-size" Anweisung nur anstatt das man die 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).
|
||||
</p>
|
||||
<div class="code-example">
|
||||
@ -307,8 +303,7 @@
|
||||
<li id="word-spacingREM">1 root-Element</li>
|
||||
</ol>
|
||||
<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.
|
||||
</p>
|
||||
</section>
|
||||
@ -349,8 +344,7 @@
|
||||
Texte transvormieren
|
||||
</h3>
|
||||
<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:
|
||||
</p>
|
||||
<ol>
|
||||
@ -360,8 +354,7 @@
|
||||
<li>None: Regeln werden aufgehoben.</li>
|
||||
</ol>
|
||||
<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.
|
||||
</p>
|
||||
<div class="code-example">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user