Dann folgt der Inhalt ...

ÜBERSCHRIFT EINS

Diese Seite ist nur zum Testen
TEST test TEST test TEST test TEST
 

Überschrift zwei

Diese Seite ist nur zum Testen
TEST test TEST test TEST test TEST
 

Überschrift drei

Diese Seite ist nur zum Testen
TEST test TEST test TEST test TEST
 

Überschrift vier

Diese Seite ist nur zum Testen
TEST test TEST test TEST test TEST
 

  • Aufzählungspunkt eins
  • Aufzählungspunkt zwei
  • Aufzählungspunkt drei
  • Aufzählungspunkt vier
  • Aufzählungspunkt fünf
Das ist ein Text in einer Testklasse

CSS Tooltip Beispiele

Tooltipbeispiel eins

Ein Beispiel mit der Klasse fluestooltip1 und dem data-tip Attribut mit der tooltip Nachricht.

<span class="tool" data-tip="content...">

Dieses Beispiel oben ist von dieser Seite hier: https://speckyboy.com/free-css-tooltip-snippets/

Dieses Beispiel mit den Buttons ist von dieser Seite hier: https://dev.to/gscode/collection-of-button-hover-effects-4ja9

FROM CENTER

CSS Aufzählungszeichen Beispiele

Aufzählung mit Bindestrich

In diesem Fall wurde die Liste in ein Div mit der Klasse "flueliste1" gepackt.

  • Aufzählungspunkt eins
  • Aufzählungspunkt zwei
  • Aufzählungspunkt drei
  • Aufzählungspunkt vier
  • Aufzählungspunkt fünf

Eigene Checkbox-Liste

Dieses Beispiel mit den eigenen Checkboxen ist von dieser Seite hier: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

Custom li list-style with font-awesome icon

Aufzählung der Klasse "flueliste3"

  • Element eins
  • Element zwei
  • Element drei

CSS Akkordeon Beispiele

akkordeon1

  • Languages Used

    This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.

  • How it Works

    Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.

  • Points of Interest

    By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.

akkordeon2

Der Details-Trick von https://codepen.io/denic/pen/PozobRO?s=08

Click me to see more details

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis. Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia.

Hier klicken um weitere Infos anzuzeigen

... und hier steht dann noch etwas mehr Text: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis. Debitis nemo dolores sit in nihil vero, necessitatibus eveniet labore velit numquam voluptatibus quia.