Color


Lorem ipsum dolor sit amet, consectetur adipiscing elit

1. Modul/ Ohne Background-color im Body, mit definierter Color im Body

1. Element/ Textelement ohne Eigenschaften
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover Hover Hover Hover Hover Amet cursus sit amet dictum sit. Massa sed elementum tempus egestas sed sed risus. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Quis risus sed vulputate odio ut. Ultricies mi eget mauris pharetra et ultrices. Magnis dis parturient montes nascetur ridiculus. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Faucibus in ornare quam viverra orci. Mauris vitae ultricies leo integer malesuada. A iaculis at erat pellentesque. Vivamus at augue eget arcu dictum varius duis at consectetur. Urna molestie at elementum eu.
Font-size: 6px, font-weight: 300; Geprüft wird aber auch noch auf die ratio mit den Farben aus den jeweiligen Kontrastmodi, das muss mindestens bei 4.5 liegen

2. Element/ Color definiert aktuelles div Hover

3. Element/ Background-color im aktuellen Element Hover

4. Element/ Background-color und Color im aktuellen Element definiert Hover

5. Element/Background statt Background-color im aktuellen Element gesetzt Hover

6. Element/ Background statt Background-color und Color im aktuellen Element definiert Hover

6. Element/ Background statt Background-color und Color im aktuellen Element definiert Hover

7. Element/ Transparenz Color für aktuelles Element definiert Hover

8. Element/ Transparenz Background-color für aktuelles Element definiert Hover

9. Element/ Transparenz Background-color und Color im aktuellen Element definiert Hover

10. Element/ Transparenz Background im aktuelles Element Hover

11. Element/ Transparenz Background und Color im aktuellen Element definiert Hover

12. Element/ Transparenz Color hsla für aktuelles Element definiert Hover

13. Element/ Transparenz Background-color hsla für aktuelles Element definiert Hover

14. Element/ Transparenz Background-color hsla und Color für aktuelles Element definiert Hover

15. Element/ Transparenz Background hsla für aktuelles Element definiert Hover

16. Element/ Transparenz Background hsla und Color für aktuelles Element definiert Hover

17. Element/ Background als Farbpattern gesetzt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

18. Element/ Background als Farbpattern und Background-color gesetzt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

19. Element/ Background als Farbpattern, Background-color und Color gesetzt

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

20. Element/ Pattern als Background gesetzt mit Backgound-color und Color, Schrift mit Color und Transparenz abgesetzt

20.a Element/ Transparenz als Background-color Hover

20.b Element/ Transparenz als Background Hover

20.c Element/ Transparenz als Background-color hsla Hover

20.d Element/ Transparenz als Background hsla Hover

21. Schriftgrafiken mit transparentem Hintergrund




Lorem ipsum dolor sit amet, consectetur adipiscing elit

2. Modu/ Ohne Background-color im Body, mit definierter Color im Body sowie definierte Background im aktuellen Modul

1. Element/ Textelement ohne Eigenschaften
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover Hover Hover Hover Hover Amet cursus sit amet dictum sit. Massa sed elementum tempus egestas sed sed risus. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Quis risus sed vulputate odio ut. Ultricies mi eget mauris pharetra et ultrices. Magnis dis parturient montes nascetur ridiculus. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Faucibus in ornare quam viverra orci. Mauris vitae ultricies leo integer malesuada. A iaculis at erat pellentesque. Vivamus at augue eget arcu dictum varius duis at consectetur. Urna molestie at elementum eu.
Font-size: 6px, font-weight: 300; Geprüft wird aber auch noch auf die ratio mit den Farben aus den jeweiligen Kontrastmodi, das muss mindestens bei 4.5 liegen

2. Element/ Color definiert aktuelles div Hover

3. Element/ Background-color im aktuellen Element Hover

4. Element/ Background-color und Color im aktuellen Element definiert Hover

5. Element/Background statt Background-color im aktuellen Element gesetzt Hover

6. Element/ Background statt Background-color und Color im aktuellen Element definiert Hover

6. Element/ Background statt Background-color und Color im aktuellen Element definiert Hover

7. Element/ Transparenz Color für aktuelles Element definiert Hover

8. Element/ Transparenz Background-color für aktuelles Element definiert Hover

9. Element/ Transparenz Background-color und Color im aktuellen Element definiert Hover

10. Element/ Transparenz Background im aktuelles Element Hover

11. Element/ Transparenz Background und Color im aktuellen Element definiert Hover

12. Element/ Transparenz Color hsla für aktuelles Element definiert Hover

13. Element/ Transparenz Background-color hsla für aktuelles Element definiert Hover

14. Element/ Transparenz Background-color hsla und Color für aktuelles Element definiert Hover

15. Element/ Transparenz Background hsla für aktuelles Element definiert Hover

16. Element/ Transparenz Background hsla und Color für aktuelles Element definiert Hover

17. Element/ Background als Farbpattern gesetzt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

18. Element/ Background als Farbpattern und Background-color gesetzt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

19. Element/ Background als Farbpattern, Background-color und Color gesetzt

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

20. Element/ Pattern als Background gesetzt mit Backgound-color und Color, Schrift mit Color und Transparenz abgesetzt

20.a Element/ Transparenz als Background-color Hover

20.b Element/ Transparenz als Background Hover

20.c Element/ Transparenz als Background-color hsla Hover

20.d Element/ Transparenz als Background hsla Hover

21. Schriftgrafiken mit transparentem Hintergrund




Lorem ipsum dolor sit amet, consectetur adipiscing elit

3. Modul/ Ohne Background-color im Body, mit definierter Color im Body, mit Background-color in der div

1. Element/ Textelement ohne Eigenschaften
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover Hover Hover Hover Hover Amet cursus sit amet dictum sit. Massa sed elementum tempus egestas sed sed risus. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Quis risus sed vulputate odio ut. Ultricies mi eget mauris pharetra et ultrices. Magnis dis parturient montes nascetur ridiculus. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Faucibus in ornare quam viverra orci. Mauris vitae ultricies leo integer malesuada. A iaculis at erat pellentesque. Vivamus at augue eget arcu dictum varius duis at consectetur. Urna molestie at elementum eu.
Font-size: 6px, font-weight: 300; Geprüft wird aber auch noch auf die ratio mit den Farben aus den jeweiligen Kontrastmodi, das muss mindestens bei 4.5 liegen

2. Element/ Color definiert aktuelles div Hover

3. Element/ Background-color im aktuellen Element Hover

4. Element/ Background-color und Color im aktuellen Element definiert Hover

5. Element/Background statt Background-color im aktuellen Element gesetzt Hover

6. Element/ Background statt Background-color und Color im aktuellen Element definiert Hover

6. Element/ Background statt Background-color und Color im aktuellen Element definiert Hover

7. Element/ Transparenz Color für aktuelles Element definiert Hover

8. Element/ Transparenz Background-color für aktuelles Element definiert Hover

9. Element/ Transparenz Background-color und Color im aktuellen Element definiert Hover

10. Element/ Transparenz Background im aktuelles Element Hover

11. Element/ Transparenz Background und Color im aktuellen Element definiert Hover

12. Element/ Transparenz Color hsla für aktuelles Element definiert Hover

13. Element/ Transparenz Background-color hsla für aktuelles Element definiert Hover

14. Element/ Transparenz Background-color hsla und Color für aktuelles Element definiert Hover

15. Element/ Transparenz Background hsla für aktuelles Element definiert Hover

16. Element/ Transparenz Background hsla und Color für aktuelles Element definiert Hover

17. Element/ Background als Farbpattern gesetzt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

18. Element/ Background als Farbpattern und Background-color gesetzt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

19. Element/ Background als Farbpattern, Background-color und Color gesetzt

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

20. Element/ Pattern als Background gesetzt mit Backgound-color und Color, Schrift mit Color und Transparenz abgesetzt

20.a Element/ Transparenz als Background-color Hover

20.b Element/ Transparenz als Background Hover

20.c Element/ Transparenz als Background-color hsla Hover

20.d Element/ Transparenz als Background hsla Hover

21. Schriftgrafiken mit transparentem Hintergrund




Lorem ipsum dolor sit amet, consectetur adipiscing elit

4. Modul/ Ohne Background-color Body, mit definierter Color im Body, Bild als Backgound-color in der div

1. Element/ Textelement ohne Eigenschaften
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover Hover Hover Hover Hover Amet cursus sit amet dictum sit. Massa sed elementum tempus egestas sed sed risus. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Quis risus sed vulputate odio ut. Ultricies mi eget mauris pharetra et ultrices. Magnis dis parturient montes nascetur ridiculus. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Faucibus in ornare quam viverra orci. Mauris vitae ultricies leo integer malesuada. A iaculis at erat pellentesque. Vivamus at augue eget arcu dictum varius duis at consectetur. Urna molestie at elementum eu.
Font-size: 6px, font-weight: 300; Geprüft wird aber auch noch auf die ratio mit den Farben aus den jeweiligen Kontrastmodi, das muss mindestens bei 4.5 liegen

2. Element/ Color definiert aktuelles div Hover

3. Element/ Background-color im aktuellen Element Hover

4. Element/ Background-color und Color im aktuellen Element definiert Hover

5. Element/Background statt Background-color im aktuellen Element gesetzt Hover

6. Element/ Background statt Background-color und Color im aktuellen Element definiert Hover

6. Element/ Background statt Background-color und Color im aktuellen Element definiert Hover

7. Element/ Transparenz Color für aktuelles Element definiert Hover

8. Element/ Transparenz Background-color für aktuelles Element definiert Hover

9. Element/ Transparenz Background-color und Color im aktuellen Element definiert Hover

10. Element/ Transparenz Background im aktuelles Element Hover

11. Element/ Transparenz Background und Color im aktuellen Element definiert Hover

12. Element/ Transparenz Color hsla für aktuelles Element definiert Hover

13. Element/ Transparenz Background-color hsla für aktuelles Element definiert Hover

14. Element/ Transparenz Background-color hsla und Color für aktuelles Element definiert Hover

15. Element/ Transparenz Background hsla für aktuelles Element definiert Hover

16. Element/ Transparenz Background hsla und Color für aktuelles Element definiert Hover

17. Element/ Background als Farbpattern gesetzt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

18. Element/ Background als Farbpattern und Background-color gesetzt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

19. Element/ Background als Farbpattern, Background-color und Color gesetzt

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

20. Element/ Pattern als Background gesetzt mit Backgound-color und Color, Schrift mit Color und Transparenz abgesetzt

20.a Element/ Transparenz als Background-color Hover

20.b Element/ Transparenz als Background Hover

20.c Element/ Transparenz als Background-color hsla Hover

20.d Element/ Transparenz als Background hsla Hover

21. Schriftgrafiken mit transparentem Hintergrund




Lorem ipsum dolor sit amet, consectetur adipiscing elit

5. Modul/ Ohne Background-color Body, mit definierter Color im Body, Bild als Background in der div

1. Element/ Textelement ohne Eigenschaften
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover Hover Hover Hover Hover Amet cursus sit amet dictum sit. Massa sed elementum tempus egestas sed sed risus. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Quis risus sed vulputate odio ut. Ultricies mi eget mauris pharetra et ultrices. Magnis dis parturient montes nascetur ridiculus. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Faucibus in ornare quam viverra orci. Mauris vitae ultricies leo integer malesuada. A iaculis at erat pellentesque. Vivamus at augue eget arcu dictum varius duis at consectetur. Urna molestie at elementum eu.
Font-size: 6px, font-weight: 300; Geprüft wird aber auch noch auf die ratio mit den Farben aus den jeweiligen Kontrastmodi, das muss mindestens bei 4.5 liegen

2. Element/ Color definiert aktuelles div Hover

3. Element/ Background-color im aktuellen Element Hover

4. Element/ Background-color und Color im aktuellen Element definiert Hover

5. Element/Background statt Background-color im aktuellen Element gesetzt Hover

6. Element/ Background statt Background-color und Color im aktuellen Element definiert Hover

6. Element/ Background statt Background-color und Color im aktuellen Element definiert Hover

7. Element/ Transparenz Color für aktuelles Element definiert Hover

8. Element/ Transparenz Background-color für aktuelles Element definiert Hover

9. Element/ Transparenz Background-color und Color im aktuellen Element definiert Hover

10. Element/ Transparenz Background im aktuelles Element Hover

11. Element/ Transparenz Background und Color im aktuellen Element definiert Hover

12. Element/ Transparenz Color hsla für aktuelles Element definiert Hover

13. Element/ Transparenz Background-color hsla für aktuelles Element definiert Hover

14. Element/ Transparenz Background-color hsla und Color für aktuelles Element definiert Hover

15. Element/ Transparenz Background hsla für aktuelles Element definiert Hover

16. Element/ Transparenz Background hsla und Color für aktuelles Element definiert Hover

17. Element/ Background als Farbpattern gesetzt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

18. Element/ Background als Farbpattern und Background-color gesetzt:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

19. Element/ Background als Farbpattern, Background-color und Color gesetzt

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed sed risus pretium. Porttitor massa id neque aliquam vestibulum morbi blandit. Sagittis purus sit amet volutpat consequat. Leo a diam sollicitudin tempor id eu. Magna fermentum iaculis eu non diam phasellus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Hover

20. Element/ Pattern als Background gesetzt mit Backgound-color und Color, Schrift mit Color und Transparenz abgesetzt

20.a Element/ Transparenz als Background-color Hover

20.b Element/ Transparenz als Background Hover

20.c Element/ Transparenz als Background-color hsla Hover

20.d Element/ Transparenz als Background hsla Hover

21. Schriftgrafiken mit transparentem Hintergrund



6. Modul/ Image-Text


wandern 1. Element/ Bild mit Textelement ohne Eigenschaften Hover 2. Element/ Color definiert aktuelles Element Hover

wandern 3. Element/ Background-color gesetzt Hover 4. Element/ Background-color und Color gesetzt Hover

wandern 5. Element/ Background gesetzt Hover 6. Element/ Background und Color gesetzt Hover

wandern 7. Element/ Transparenz Color für aktuelles Element definiertHover 8. Element/ Transparenz Background-color gesetzt Hover

wandern 9. Element/ Tansparenz Background-color und Color definiertHover 10. Element/ Transparenz Background gesetzt Hover

wandern 11. Element/ Transparenz Background und Color gesetztHover 12. Element/ Transparenz Color hsla für aktuelles Element gesetzt Hover

wandern 13. Element/ Transparenz Background-color hsla gesetztHover 14. Element/ Transparenz Background-color hsla und Color gesetzt Hover

wandern 15. Element/ Transparenz Background hsla gesetztHover 16. Element/ Transparenz Background hsla und Color gesetzt Hover

wandern 17. Element/ Background als Farbpattern gesetzt gesetztHover 18. Element/ Background als Farbpattern und Background-color gesetzt Hover

wandern 19. Element/ Background als Farbpattern, Background-color und Color gesetzt gesetzt gesetztHover

20. Element/ Pattern als Background gesetzt mit Backgound-color und Color, Schrift mit Color und Transparenz abgesetzt

wandern
20a. Element/ Transparenz als Background-color gesetzt Hover

20b. Element/ Transparenz als Background gesetzt Hover


wandern
20c. Element/ Transparenz als Background-color hsla gesetzt Hover

20d. Element/ Transparenz als Background hsla gesetzt Hover


21. Element/ Bild mit Schriftgrafik

wandern

wandern