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.

Browserkonsole
CSS Selektor, ID finden usw.

Da und dort ist es sehr gefragt, die Browserkonsole in welche CSS-Class so Elemente des Themes zu definieren sind. Statt Suchen der Begriffe in der styles Suchmaschinen ist das eigenständig und schnell zu finden. Jedoch der Browserkonsole von Beschrieb können des Beginns sehr langwierig sein und so sind hier dem Beitrag die Anfänge des Entwicklerwerkzeuges zum Erfolg. Somit auch von Beispielen bebildert mit Edge Browser von Microsoft, Browser-Chrome und Safari. – zur Schlussfolgerung von Selektoren braucht es auch der praktischen Erfahrung.

“Besucher hab nur noch etwas Geduld,
denn hier? – das ist der Einstieg zum Erfolg

Browserkonsole
CSS Selektor, ID finden usw.
weiterlesen

Mit CSS Hover-Effekt zum Bildwechsel + Audio mit JS

CSS Hover-Effekts der 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 alles 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 mit dem Propeller nicht so ab.

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

WP – Mi­ni­a­tur­bild statt Aufzählungszeichen;
und so auch im Menü?

Der Aufzählungszeichen von Punkten ein Mi­ni­a­tur­bild. Das erfolgt erst mal 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 so des Workflows ist im Nachhinein da die Bildgröße nicht anpassbar. So weiter ist die Definition einer Class und die HTML-Auszeichnung. So bspw dann geht das auch als Menüpunkt mit Image.

WP – Mi­ni­a­tur­bild statt Aufzählungszeichen;
und so auch im Menü?
weiterlesen

Externe Links mit Icon –
so Base64 oder SVG

Zur Dekoration für Links eignet sich ein Icon. Damit folgt die Beschreibung wie das mit base64 oder einem SVG zu bewerkstelligen ist. Der Beitrag ist spezifisch und nicht ganz leicht.

Icon mit Base64

Das Icon bzw. 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 –
so Base64 oder SVG
weiterlesen