Archiv der Kategorie: HTML + CSS

Hier ist einfaches HTML und CSS zu finden, wie es für den WP-Anfänger zum Aufbau einer Website brauchbar ist.

Mit CSS Hover-Effekt zum Bildwechsel + Audio mit JS

Die Idee zwei Bilder hintereinander und somit das nächst Bild erst mit überfahren der Maus sichtbar ist. Also ein Bild zum anderen. Das ist im Netz den Begriffen wie 'CSS Bild Hover Effekt' zu finden. So einfach und leicht ist da der Durchblick nicht. … Das geht so mit CSS + HTML. Hier ist das nun ganz kurz auseinandergelegt. Und zwar so, dass dann dem Bild keine Umrandung folgt und gültigen HTML. Das ist erst mal Mithilfe von Internet-Freund! – so darf ich auch mein Dankeschön kundtun. Im Folgenden auch das mit Hover Effekt stylen @keyframes und Audio + JS.

k-images_wolken.banner-kl-1-2
k-images_wolken.banner-kl-2-2

Wolken k-images, Doppeldecker OpenClipart-Vectors u. Audio salamisound.
Missfallen: Browser 'Firefox' kann das nicht so ab.

Mit CSS Hover-Effekt zum Bildwechsel + Audio mit JS weiterlesen

Ein Mi­ni­a­tur­bild statt das Aufzählungszeichen;
so auch im Menü?

Anstatt der Aufzählungszeichen ein Mi­ni­a­tur­bild. Der Erstellung von kleinem Bild in fixer Größe. So Bild PNG  oder SVG ab etwa 15px mal 15px. Dessen ist dann der Bearbeitung bspw. mit Boxy SVG in fixer Größe (also nicht Responsive) abzuspeichern. Denn im Nachhinein ist da die Bildgröße nicht anpassbar. So weiter ist die Definition einer Class und die HTML-Auszeichnung. Bspw geht das auch als Menüpunkt mit Image.

Ein Mi­ni­a­tur­bild statt das Aufzählungszeichen;
so auch im Menü?
weiterlesen

Externe Links mit Icon –
Base64 oder SVG

Das Titelbild ist im SVG-Format und 1 KB groß. Diesem SVG ist die Viewbox erweitert und weißer Hintergrund hinzugefügt. Mithin diesem Beispiels würde die Bildfläche nicht ausgefüllt und eine durchscheinende Schraffierung sichtbar sein. S. Viewbox erweitern und Hintergrund erstellen, Boxy SVG

Zur Dekoration für Links eignet sich ein Dashicon. Hier ist ein Dashicon vorgestellt, welches dieser Website visuell ist. Damit folgt die Beschreibung wie das mit base64 oder einem SVG zu bewerkstelligen ist.

Base64

Das Icon oder Dashicon mit base64, bestens beschrieben: Was ist Base64 und was bringt es?

Weiter geht es hier in diesem Beitrage darum, ein Icon mit base64 für externe Links zu erstellen. Hierzu ist das Icon entliehen von der Website flaticon.com/free-icon.

Externe Links mit Icon –
Base64 oder SVG
weiterlesen

Mein Button

Button mittig mit Link-Hinweis, das Ziel.

—♥—

Das welches hier in kleiner Aufzeichnung und auf den ersten Blick für jedermann von selbstverfreilich, war nicht so einfach, wie ich es mir gerne vorgestellt. Durch Recherche und Überlegung in Zeitphase eines Nachmittags – die Erkenntnis und das Resultat: "Am besten mit Shortcode."
Mein Button weiterlesen