diff --git a/css/animations.css b/css/animations.css
index 10eadfa..7d6f8bd 100644
--- a/css/animations.css
+++ b/css/animations.css
@@ -6,7 +6,7 @@
}
/* ---------------Beispiel auf der Startseite--------------*/
-#beispiel{
+#beispiel {
background-color: aqua;
color: black;
border: 3px solid rgb(255, 0, 0);
@@ -26,15 +26,15 @@
@keyframes beispiel {
0% {
transform: rotate(0deg);
- left:var(--width2);
+ left: var(--width2);
}
25% {
transform: rotate(90deg);
- left:var(--width2);
+ left: var(--width2);
background-color: blue;
border-color: orange;
-
+
}
50% {
@@ -42,13 +42,13 @@
background-color: blueviolet;
border-color: green;
transform: rotate(180deg);
- left:var(--width1);
+ left: var(--width1);
}
75% {
transform: rotate(270deg);
- left:var(--width1);
+ left: var(--width1);
background-color: red;
border-color: lightblue;
}
@@ -57,13 +57,14 @@
background-color: yellow;
border-color: pink;
transform: rotate(360deg);
- left:var(--width2);
+ left: var(--width2);
}
-
+
}
+
/* -----------------Animationen Beispiele--------------------------- */
/* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/
-#stempel1{
+#stempel1 {
color: red;
border: 2px solid red;
padding: 10px;
@@ -77,16 +78,15 @@
}
@keyframes stempel1 {
- 0%{
+ 0% {
transform: scale(1) rotate(10deg)
}
- 50%{
+ 50% {
transform: scale(1.5) rotate(30deg);
}
- 100%
- {
+ 100% {
transform: scale(1) rotate(10deg)
}
}
@@ -107,20 +107,19 @@
}
@keyframes beispiel6 {
- 0%{
+ 0% {
transform: scale(1);
- left:var(--width2);
+ left: var(--width2);
}
- 50%{
+ 50% {
transform: scale(1.5);
- left:var(--width3);
+ left: var(--width3);
}
- 100%
- {
+ 100% {
transform: scale(1);
- left:var(--width2);
+ left: var(--width2);
}
}
@@ -140,20 +139,19 @@
}
@keyframes beispiel7 {
- 0%{
+ 0% {
transform: scale(1);
- left:var(--width2);
+ left: var(--width2);
}
- 50%{
+ 50% {
transform: scale(1.5);
- left:var(--width3);
+ left: var(--width3);
}
- 100%
- {
+ 100% {
transform: scale(1);
- left:var(--width2);
+ left: var(--width2);
}
}
@@ -175,16 +173,15 @@
}
@keyframes beispiel4 {
- 0%{
+ 0% {
transform: rotate(0deg);
}
- 50%{
+ 50% {
transform: rotate(180deg);
}
- 100%
- {
+ 100% {
transform: rotate(360deg)
}
}
@@ -206,22 +203,20 @@
}
@keyframes beispiel5 {
- 0%{
+ 0% {
transform: rotate(0deg);
}
- 50%{
+ 50% {
transform: rotate(180deg);
}
- 100%
- {
+ 100% {
transform: rotate(360deg)
}
}
-
/*--------------- Beispiel 1 für die animation timing funktion ---------------*/
#beispiel1 {
color: red;
@@ -238,20 +233,19 @@
}
@keyframes beispiel1 {
- 0%{
+ 0% {
transform: scale(1);
- left:var(--width2);
+ left: var(--width2);
}
- 50%{
+ 50% {
transform: scale(1.5);
- left:var(--width3);
+ left: var(--width3);
}
- 100%
- {
+ 100% {
transform: scale(1);
- left:var(--width2);
+ left: var(--width2);
}
}
@@ -271,19 +265,18 @@
}
@keyframes beispiel2 {
- 0%{
+ 0% {
transform: scale(1);
- left:var(--width2);
+ left: var(--width2);
}
- 50%{
+ 50% {
transform: scale(1.5);
- left:var(--width3);
+ left: var(--width3);
}
- 100%
- {
+ 100% {
transform: scale(1);
- left:var(--width2);
+ left: var(--width2);
}
-}
\ No newline at end of file
+}
diff --git a/css/flexbox.css b/css/flexbox.css
index ca4df57..0902eea 100644
--- a/css/flexbox.css
+++ b/css/flexbox.css
@@ -92,4 +92,4 @@
#example13 > p {
flex-basis: 40px;
flex-shrink: 1;
-}
\ No newline at end of file
+}
diff --git a/css/grid.css b/css/grid.css
index e57bcbd..43d58d2 100644
--- a/css/grid.css
+++ b/css/grid.css
@@ -99,4 +99,4 @@
#item9 {
grid-area: footer;
-}
\ No newline at end of file
+}
diff --git a/css/layout.css b/css/layout.css
index 1e30bdf..ecc4410 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -1,4 +1,3 @@
-
/* ---------- Farben ---------- */
:root {
--primary: #1D2026;
@@ -49,7 +48,7 @@ footer {
align-items: center;
}
-.navigationbar a{
+.navigationbar a {
color: aliceblue;
padding: 10px;
margin-left: 5px;
@@ -59,7 +58,7 @@ footer {
flex-grow: 1;
}
-.navigationbar a:hover{
+.navigationbar a:hover {
background: darkgray;
}
@@ -70,6 +69,12 @@ 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;
@@ -78,6 +83,11 @@ footer {
max-width: 550px;
}
+.code-example code {
+ padding: 0;
+ background-color: rgba(40, 40, 40, 0.8);
+}
+
.visual-example {
background-color: gray;
border: 2px solid;
@@ -114,4 +124,4 @@ footer {
.navigationbar:nth-of-type(2) {
grid-column: 1/5;
}
-}
\ No newline at end of file
+}
diff --git a/css/position.css b/css/position.css
new file mode 100644
index 0000000..01ada15
--- /dev/null
+++ b/css/position.css
@@ -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;
+}
diff --git a/css/text_styling.css b/css/text_styling.css
index 3f294c8..4b29ce6 100644
--- a/css/text_styling.css
+++ b/css/text_styling.css
@@ -1,119 +1,143 @@
/*--------------Veränderung der Textgröße--------------*/
-#font-sizePX{
+#font-sizePX {
font-size: 20px;
}
-#font-sizePR{
+
+#font-sizePR {
font-size: 120%;
}
-#font-sizeCM{
+
+#font-sizeCM {
font-size: 1cm;
}
-#font-sizeS{
+
+#font-sizeS {
font-size: smaller;
}
-#font-sizeM{
+
+#font-sizeM {
font-size: medium;
}
-#font-sizeL{
+
+#font-sizeL {
font-size: larger;
}
+
/*--------------Veränderung der Textart--------------*/
-#font-familyA{
+#font-familyA {
font-family: Arial;
}
-#font-familyG{
+
+#font-familyG {
font-family: Georgia;
}
-#font-familyLH{
+
+#font-familyLH {
font-family: Lucida Handwriting;
}
+
/*--------------Schriftfarbe ändern--------------*/
-#colorW{
+#colorW {
color: red;
}
-#colorZ{
+
+#colorZ {
color: rgb(81, 132, 109);
}
/*--------------Schrift stylen--------------*/
-#font-styleI{
+#font-styleI {
font-style: italic;
}
-#font-styleO{
+
+#font-styleO {
font-style: oblique;
}
/*--------------Schriftdicke verändern--------------*/
-#font-weightB{
+#font-weightB {
font-weight: bold;
}
-#font-weightZ{
+
+#font-weightZ {
font-weight: 700;
}
/*--------------Schrift Variante ändern--------------*/
-#font-variant{
+#font-variant {
font-variant: small-caps;
}
/*--------------Textausrichtung ändern--------------*/
-#text-alignL{
+#text-alignL {
text-align: left;
}
-#text-alignR{
+
+#text-alignR {
text-align: right;
}
-#text-alignC{
+
+#text-alignC {
text-align: center;
}
-#text-alignJ{
+
+#text-alignJ {
text-align: justify;
}
/*--------------Textgestaltung--------------*/
-#text-decorationU{
+#text-decorationU {
text-decoration: underline;
}
-#text-decorationO{
+
+#text-decorationO {
text-decoration: overline;
margin: 4px;;
}
-#text-decorationLT{
+
+#text-decorationLT {
text-decoration: line-through;
}
/*--------------Wort- und Zeichenabstände verändern--------------*/
-#word-spacingMM{
+#word-spacingMM {
word-spacing: 3mm;
}
-#word-spacingPX{
+
+#word-spacingPX {
word-spacing: 10px;
}
-#word-spacingREM{
+
+#word-spacingREM {
word-spacing: 1rem;
}
/*--------------Texte einrücken--------------*/
-#text-indentMM{
+#text-indentMM {
text-indent: 10mm
-}
-#text-indentPX{
+}
+
+#text-indentPX {
text-indent: 20px;
}
-#text-indentREM{
+
+#text-indentREM {
text-indent: 1rem;
}
/*--------------Texte transvormieren--------------*/
-#text-transformC{
+#text-transformC {
text-transform: capitalize
}
-#text-transformU{
+
+#text-transformU {
text-transform: uppercase
}
-#text-transformL{
+
+#text-transformL {
text-transform: lowercase
}
-#text-transformN{
+
+#text-transformN {
text-transform: none
-}
\ No newline at end of file
+}
diff --git a/screens/animation/animations.html b/screens/animation/animations.html
index f686fef..5faa858 100644
--- a/screens/animation/animations.html
+++ b/screens/animation/animations.html
@@ -11,104 +11,104 @@
-
-
- Home
- Flexbox-Layout
- Grid-Layout
- Text-Styling
- Position-Eigenschaft
- Animationen
-
-
- Animation Einführung
- Animations Funktionen
-
-
-
-
-
- Animationen mit CSS
-
-
- Mit Animationen und den dazugehörenden Funktionen wie zum Beispiel @keyframes
- lassen sich relativ einfach Objekte erstellen,
- die sich über die Webseite bewegen.
-
-
- Schrift kann außerdem gedreht und verschoben werden.
- Dadurch erscheint eine Webseite viel dynamischer und visuel ansprechender.
-
-
-
-
-
-
-
- #example2 {
- #beispiel{
- background-color: aqua;
- color: black;
- border: 3px solid rgb(255, 0, 0);
- border-radius: 0.4em;
- animation-timing-function: ease;
- width: 100px;
- height: 100px;
- animation-name: beispiel;
- animation-duration: 5s;
- animation-iteration-count: infinite;
- animation-direction: alternate;
- text-align: center;
- align-self: end;
- &position: relative;
- }
-
- @keyframes beispiel {
- 0% {
- transform: rotate(0deg);
- left:var(--width2);
- }
-
- 25% {
- transform: rotate(90deg);
- left:var(--width2);
- background-color: blue;
- border-color: orange;
- }
-
- 50% {
- transform: scale(1.5);
- background-color: blueviolet;
- border-color: green;
- transform: rotate(180deg);
- left:var(--width1);
- }
-
- 75% {
- transform: rotate(270deg);
- left:var(--width1);
- background-color: red;
- border-color: lightblue;
- }
-
- 100% {
- background-color: yellow;
- border-color: pink;
- transform: rotate(360deg);
- left:var(--width2);
- }
- }
- }
-
-
-
-
-
-
+
+
+ Home
+ Flexbox-Layout
+ Grid-Layout
+ Text-Styling
+ Position-Eigenschaft
+ Animationen
+
+
+ Animation Einführung
+ Animations Funktionen
+
+
+
+
+
+ Animationen mit CSS
+
+
+ Mit Animationen und den dazugehörenden Funktionen wie zum Beispiel @keyframes
+ lassen sich relativ einfach Objekte erstellen,
+ die sich über die Webseite bewegen.
+
+
+ Schrift kann außerdem gedreht und verschoben werden.
+ Dadurch erscheint eine Webseite viel dynamischer und visuel ansprechender.
+
+
+
+
+
+
+
+ #example2 {
+ #beispiel{
+ background-color: aqua;
+ color: black;
+ border: 3px solid rgb(255, 0, 0);
+ border-radius: 0.4em;
+ animation-timing-function: ease;
+ width: 100px;
+ height: 100px;
+ animation-name: beispiel;
+ animation-duration: 5s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ text-align: center;
+ align-self: end;
+ &position: relative;
+ }
+
+ @keyframes beispiel {
+ 0% {
+ transform: rotate(0deg);
+ left:var(--width2);
+ }
+
+ 25% {
+ transform: rotate(90deg);
+ left:var(--width2);
+ background-color: blue;
+ border-color: orange;
+ }
+
+ 50% {
+ transform: scale(1.5);
+ background-color: blueviolet;
+ border-color: green;
+ transform: rotate(180deg);
+ left:var(--width1);
+ }
+
+ 75% {
+ transform: rotate(270deg);
+ left:var(--width1);
+ background-color: red;
+ border-color: lightblue;
+ }
+
+ 100% {
+ background-color: yellow;
+ border-color: pink;
+ transform: rotate(360deg);
+ left:var(--width2);
+ }
+ }
+ }
+
+
+
+
+
+
-