Webdesign | Webdesign-Agentur Oldenburg Bremen Hannover WordPress

Ein CSS Slider (ohne Scripts) – Stilwechsel mit dem :target-Selektor

Klaus — Sun, 02 Apr 2023 11:23:17 +0000

CSS Slider (ohne Scripte)

Stilwechsel mit dem :target-Selektor

Der Bilderwechsel in diesem Slider funktioniert über den :target-Selektor. Dieser wird als internes Sprungziel durch einen Link mit dem Rautezeichen (#, interner Anker) erreicht. Der CSS-:target-Selektor wählt das Element aus, auf das sich der Hash-Wert des aktuellen URL-Links bezieht. Das sieht man auch oben in der Adresszeile des Browsers.

Der HTML-Code wird mit einem Shortcode [koslider bilder="3765,3760,3751,3771" galerie="a"] erzeugt, den ich mit PHP erstellt habe. Die Nummern entsprechen den IDs der Bilder.

...

...

Die CSS / Styles sind auch recht unspektakulär:

.slider-wrapper{display:block;position:relative;} .slider-wrapper a{text-decoration:none;} ul.thumbs,ul.slides, ul.thumbs > li,ul.slides > li{list-style:none;margin:0;padding:0;position:relative;overflow:hidden;} ul.thumbs {display:flex;gap:0.5rem;margin:0.5rem 0;} ul.thumbs > li{flex:1;aspect-ratio:16/9;} ul.thumbs > li a img{transition:scale 250ms ease-in-out;object-fit:cover;height:100%;width:100%;} ul.thumbs > li a:hover img{scale:1.05} ul.slides {width:100%;aspect-ratio:16/9;background-size:cover;background-repeat:no-repeat;background-position:50% 50%;} ul.slides > li.image{background-size:cover;background-repeat:no-repeat;background-position:50% 50%;position:absolute;inset:0;aspect-ratio:16/9;width:100%; transform: scale(0,1); transition: transform 0.9s ease-in-out; transform-origin:left;} ul.slides > li.image:target{transform: scale(1,1);transform-origin:right; } ul.slides > li .arrows{font-size:var(--step-5);color:var(--weiss);position:absolute;top:40%;z-index:99;} ul.slides > li .arrows.arrow-left{left:0} ul.slides > li .arrows.arrow-right{right:0}

Mehrere Slider auf einer Seite

…sind auch möglich: [koslider bilder="4191,4192,4193,4194,4195" galerie="b"]

Siehe auch:

Using the CSS :target Selector
CSS : target Selektor

Die hier verwendeten Fotos (© Klaus Oppermann) findest Du auch hier: Genuss unter Segel – Erlebnisreiches Segelwochenende – Ein Teamevent von und mit Ludger Freese & Friends.

Coole Bildeffekte mit CSS

Klaus — Fri, 03 Mar 2023 12:21:52 +0000

Inspiriert durch dieses Video: https://youtu.be/nheVF-pMrLA von Unleashed Design habe ich diese coolen Bildeffekte gestaltet.
Alle Bildeffekte ohne Scripte, reines CSS. Die Schleife für den HTML-Code habe ich mit PHP erstellt. Den Kanal von Unleashed Design kann ich sehr empfehlen, auch die Shorts sind immer wieder für eine Überraschung gut. Man lernt nie aus 🙂

Effekt 1

Effekt 2

Effekt 3

Effekt 4

Webdesign für einen Wärmepumpen-Experten in der Region Ammerland/Oldenburg

Klaus — Mon, 01 Aug 2022 09:51:10 +0000

Wärmepumpen sind ein wichtiger Baustein auf dem Weg zur Energiewende. Wärmepumpen gelten als eine besonders klimafreundliche Technologie.

Für meinen langjährigen Kunden Bodo Ahlers habe ich jetzt eine Landingpage erstellt, um seine Leistungen in diesem Bereich zu promoten.

Webdesign für https://waermepumpen-ammerland.de

Eine Wärmepumpe ist eine Maschine, die unter Aufwendung von technischer Arbeit thermische Energie aus einem Reservoir mit niedrigerer Temperatur (in der Regel ist das die Umgebung) aufnimmt und – zusammen mit der Antriebsenergie – als Nutzwärme auf ein zu beheizendes System mit höherer Temperatur (Raumheizung) überträgt.

Der verwendete Prozess ist im Prinzip die Umkehrung eines Wärme-Kraft-Prozesses, bei dem Wärmeenergie mit hoher Temperatur aufgenommen, teilweise in mechanische Nutzarbeit umgewandelt und die Restenergie bei niedrigerer Temperatur als Abwärme abgeführt wird, meist an die Umgebung.

Das Prinzip der Wärmepumpe verwendet man auch zum Kühlen (so beim Kühlschrank), während der Begriff „Wärmepumpe“ nur für das Heizaggregat verwendet wird. Beim Kühlprozess ist die Nutzenergie die aus dem zu kühlenden Raum aufgenommene Wärme, die zusammen mit der Antriebsenergie als Abwärme an die Umgebung abgeführt wird.

Quelle: Wikipedia

Link: So eine Wärmepumpe ist eine kleine Zauberkiste (NDR)

Sichtbar werden – Zeit für die Aktualisierung deiner Homepage

Klaus — Thu, 07 Apr 2022 17:21:23 +0000

Zeit für deine Homepage – jetzt ein Angebot anfordern. Webdesign aus Oldenburg / Bremen.

Eine professionelle Homepage ist wichtiger als je zuvor!

Wer wird jetzt und in Zukunft Aufträge erhalten? Nur wer sich optimal im Internet präsentiert und über die Suchmaschinen wie Google und Bing gefunden wird.

Ich biete: professionelles, modernes Webdesign mit WordPress-CMS. Individuelle, maßgeschneiderte Gestaltung im Corporate Design. Standardkonforme Programmierung mit neuesten Techniken, für Suchmaschinen optimiert.

Angebot anfordern – Homepage erstellen lassen

Homepage erstellen – für Handwerker aus Oldenburg, Bremen, Hannover …

Klaus — Wed, 22 Sep 2021 12:19:52 +0000

Ich erstelle Websites für Handwerksbetriebe.

Ehrliche Beratung. Individuelle Gestaltung. Nicht nur in Oldenburg.

Angebot anfordern

Jeder Handwerksbetrieb benötigt eine professionelle Homepage!

Warum ist eine professionelle Homepage für Handwerksbetriebe so wichtig? Die Auftragsbücher sind voll, es sind viele Stammkunden vorhanden und Du kommst jetzt schon kaum mit der Arbeit hinterher.

Das mag stimmen. Aber bleibt das auch so? Und was ist, wenn Du Dich weiterentwickeln möchtest und höhere Gewinne erzielen willst? Wissen Deine Kunden denn überhaupt, was Du so alles kannst und/oder anbietest?

Im Internet gefunden werden. Kunden suchen Handwerker am Ort

Tatsache ist: Wer im Internet nicht gefunden wird, hat auf Dauer schlechte Karten. Die Homepage muss von potenziellen Kunden aus der eigenen Stadt oder aus der Region gefunden werden. Im besten Falle sollte die Website auf der ersten Seite der Suchmaschinen (vor allem Google) zu finden sein.

Auf Deiner Homepage kannst Du Deine Leistungen vorstellen und Deine Stärken zeigen. Und: Dein Handwerksbetrieb ist nicht nur regional, sondern auch bundesweit sichtbar.

Aktualität der Homepage ist wichtig. Potenzial für Mitarbeitergewinnung.

Ob Dachdeckereien, Zimmereien, Malerfachbetriebe, Tischlereien … oder andere Gewerke. Zeig, was Du kannst – mit einer Website, die Deinen Handwerksbetrieb und Dein Können ins richtige Licht setzt.

Und außerdem dient eine attraktive Darstellung Deiner Firma auch der Mitarbeitergewinnung!

Falls Du schon eine Homepage hast, prüfe unbedingt, ob diese noch aktuell ist, und zwar sowohl technisch als auch inhaltlich.
Eine schlecht gestaltete Homepage kann potenzielle Kunden sogar abschrecken; eine technisch veraltete Website wird u.U. nicht gefunden – so löscht Google seit März 2021 Websites aus dem Index, die nicht für mobile Endgeräte optimiert sind.
Hintergrund ist, dass 60 – 70 Prozent der Internetbenutzer zur Suche im Internet ein Smartphone oder ein Tablet nutzen.

Ich habe bereits sehr viele Websites für Handwerksbetriebe erstellt und berate auch Dich sehr gerne.

Jetzt Kontakt aufnehmen

Auf einen Blick

Auch wenn Ihre Auftragsbücher voll sind, kann eine professionelle Homepage Ihnen helfen, sich weiterzuentwickeln, höhere Gewinne zu erzielen und potenziellen Kunden zu zeigen, was Sie alles können. Sie sorgt dafür, dass Sie auch in Zukunft im Internet gefunden werden und nicht von der Konkurrenz überholt werden.

Eine gute Homepage sollte von potenziellen Kunden aus Ihrer Stadt oder Region leicht gefunden werden. Ziel ist es, dass die Website auf der ersten Seite von Suchmaschinen wie Google erscheint.

Eine aktuelle Homepage ist technisch auf dem neuesten Stand und enthält aktuelle Informationen über Ihre Leistungen. Eine veraltete Website kann potenzielle Kunden abschrecken und von Suchmaschinen schlechter gefunden werden. Google löscht seit 2021 zudem nicht mobile-optimierte Websites aus dem Index.

Ja, unbedingt! Überprüfen Sie, ob Ihre Homepage technisch aktuell ist und ob die Inhalte noch stimmen. Eine schlecht gestaltete oder veraltete Homepage kann potenzielle Kunden abschrecken.

Ja, eine attraktive Darstellung Ihres Unternehmens auf einer Homepage kann auch dazu beitragen, qualifizierte Mitarbeiter zu gewinnen.

Ich erstelle Webseiten für Handwerksbetriebe bundesweit, nicht nur in der Region Oldenburg / Bremen / Hannover.

Webdesign für das Handwerk

Ich erstelle Websites – mein Schwerpunkt sind Webseiten für Handwerksbetriebe, nicht nur in der Region Oldenburg / Bremen / Hannover.

Webdesign / Landingpage für Stellenangebote im Malerhandwerk

Klaus — Sun, 25 Mar 2018 06:52:59 +0000

Für das MeinMaler-Netzwerk habe ich das Design sowie die Landingpage für die Stellenangebote der Partnerbetriebe konzipiert und gestaltet: jobs.mein-maler.de. Auf der Website findet man Informationen, Fotos und Videos, eine Übersichtskarte sowie ein Formular zur schnellen Kontaktaufnahme.

Maler, Lackierer-Raumausstatter, Bürokräfte (m,w,d) gesucht: jobs.mein-maler.de

Im Handwerk werden dringend und überall Fachkräfte und Auszubildende gesucht, Malergesellen in Vollzeit, Fachkräfte für sämtliche Malerarbeiten, kreative Gestaltungen und Fassadenarbeiten.
Wir hoffen, mit dieser Kampagne das Interesse für den schönen Malerberuf zu wecken.

Netzfund: Schulungs-Buch der Farben

Klaus — Sun, 10 Jul 2016 16:59:27 +0000

Scale of Normal Colors and their Hues

Was man im Netz so finden kann … archive.org bietet unglaublich viele Entdeckungen. Wie dieses Schulungsbuch aus dem Jahre 1895, in dem es um Farben geht:

Simultaneous Contrasts

A class-book of color: including color definitions, color scaling, and the harmony of colors
Ein Schulungs-Buch der Farben: einschließlich Farbdefinitionen, Farbskalierung und der Harmonie der Farben

Quelle: https://archive.org/details/gri_c00033125008559946

WordPress-Website für „Heyse Lifestyle“ in Hannover + CSS Fix für den iOS vh-unit Bug

Klaus — Thu, 02 Jun 2016 14:50:59 +0000

Ein schönes, neues Kundenprojekt ist online: http://www.heyse-lifestyle.de

Screenshot Heyse-Lifestyle

Heyse-Lifestyle Prospekt 2

Der Malerfachbetrieb Heyse aus Hannover beauftragte mich mit der Umsetzung des Heyse-Lifestyle-Prospektes in eine professionelle Website. Ich habe hier mit großen Bildern gearbeitet, um die wunderbaren Arbeiten beeindruckend in Szene zu setzen. Auch wollte und sollte ich das Seitenlayout möglichst beibehalten. Einige Abweichungen gibt es natürlich, so habe ich die eigentliche Hauptüberschrift, anders als in der Vorlage, an den Anfang der Seite gesetzt. Man sieht an dieser Website sehr gut, wie wichtig hochwertiges Bildmaterial ist; die Beauftragung eines Profifotografen ist eine gut angelegte Investition.

Zu berücksichtigen war natürlich auch die Anpassung für mobile Engeräte, heute unabdingbar.

Heyse-Lifestyle Prospekt 1

Alle Fotos wurden einzeln bearbeitet und optimiert, anschließend unter einem sinnvollen Dateinamen gespeichert (wichtig für Suchmaschinen).

Die Überschriften und Texte wurden dem Prospekt entnommen und für die optimale Darstellung im Web aufbereitet.

Jede Seite hat ein eigenes Farbschema (Danke an Mike Schleupner), abgestimmt auf das Hauptbild. Footer (ganz unten), Trennlinien, Schriften und Ränder wurden entsprechend eingefärbt. Rechts oben findet man den Button für das Hauptmenü der gesamten mein-maler.de-Website, am rechten Rand das Teilen-Symbol, um die Seite in den Sozialen Netzwerken teilen zu können. Die Galeriebilder kann man per Klick vergrößern.

Nicht nur, dass mir die Gestaltung viel Freude bereitet hat, die Begeisterung und das Lob meines Kunden für dieses Projekt ist für mich das schönste Lob. Danke, lieber Matthias Schultze! #Wunschkunde!

iPhone / iPad / Internet Explorer – wieder etwas dazugelernt – CSS Fix für den iOS vh-unit Bug

Das iPhone und das iPad mögen offensichtlich die Stylesheetangaben background-attachment:fixed; background-size: cover; height: 100vh nicht, die ich für das sogenannte „Parallax Scrolling“ der großen Bilder verwendet habe. Hier half letzendlich nur eine Umstellung auf eine Größenangabe in Pixel, sowie die Angabe background-attachment: scroll; für mobile Endgeräte (auf denen das Parallax Scrolling sowieso nicht funktioniert).

Siehe: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

Der Internet Explorer 10 / 11 verdeckt mit der Scrollbar Teile der Website … hier half die Stylesheet-Angabe -ms-overflow-style: scrollbar im body.

🙂

Die Realisierung der Website erfolgte wieder mit WordPress als Content Management System (CMS).

Wer braucht schon eine Homepage, Teil III

Klaus — Tue, 18 Mar 2014 13:56:28 +0000

Hört man oft: warum einen „teuren“ Webdesigner beauftragen, wo es doch diese wunderbaren Homepage-Baukästen gibt („Website in nur 10 Minuten“).

Diese Baukästen mögen sich für Privatleute eignen, aber für Firmen sind sie eher ungeeignet. Die Seiten sind nicht individuell, passen oft nicht zum Firmendesign, und die Möglichkeiten und Funktionen sind meist sehr eingeschränkt.

Und was den guten Bekannten betrifft, der sich mit so was auskennt: hier kommen oft fehlende Designkenntnisse, fehlende Programmierkenntnisse, fehlende Marketingkenntnisse und fehlende Rechtskenntnisse zusammen. Und was ist mit der Suchmaschinenoptimierung?

Wer braucht schon eine Homepage, Teil II

Klaus — Sun, 16 Mar 2014 05:32:28 +0000

Immer noch werden regelmäßig Telefonbücher an alle Haushalte verteilt, oder man erhält Mitteilungen zur Abholung. Ich persönlich habe schon seit Jahren kein Telefonbuch mehr im Haus und halte sie für nicht mehr zeitgemäß …
Kunden gewinnt man durch einen Telefonbucheintrag heutzutage sicher nicht mehr – oder wie sehen Sie das?

Siehe auch: Braucht man Das Telefonbuch noch als Print?