HTML
Hier finden Sie eine Reihe von HTML-Tricks, welche auch ausserhalb von WordPress hervorragend funktionieren.
Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden. Wie Sie ein Child-Theme erstellen, erfahren Sie im Beitrag «Ein Child-Theme anlegen – ein Must im Webdesign».
Heute gestalten wir eine kleine Bildergalerie. Doch diese zeigt die einzelnen Bilder nicht im üblichen Zuschnitt an, sondern macht jedes Element zu einem Hexagon. Sieht ganz hübsch aus und ist gar nicht schwierig.
Ein schwebender Call-to-Action-Button (CTA) ist ein effektives Mittel, um wichtige Aktionen hervorzuheben und User gezielt zu lenken. Ob für Kontaktanfragen, Newsletter-Anmeldungen oder Produktseiten – ein immer sichtbarer Button steigert die Klickrate und sorgt für Aufmerksamkeit.
Bilder auf der Website zu verwenden, ist eine einfache Übung. Heute versehen wir die dargestellten Bilder zusätzlich mit einem schönen Innenrahmen. So was habe ich unlängst auf der Website einer Kollegin entdeckt – sieht sehr hübsch aus. Musste ich gleich nachbauen.
Das hr-Element des HTML-Codes ergibt normalerweise eine Trennlinie, welche grau und auf der gesamten Anzeigebreite dargestellt wird. Doch dieser Horizontal Ruler hr lässt sich auch als Akzent einsetzen. Im heutigen Tipp ein paar Beispiele.
Mit dem HTML-Element button können Sie ganz einfach Schaltflächen erstellen. Mit der Zugabe von noch ein wenig CSS-Code, werden die Buttons überdies richtig schmuck. Drei Gestaltungsmöglichkeiten zeigen wir Ihnen in diesem Beitrag.
Fluid Typography ist ein Designansatz, bei dem die Grösse, der Zeilenabstand und die Proportionen von Text automatisch an die Grösse der Anzeige oder des Viewports angepasst werden, auf dem er angezeigt wird. Heute möchten wir Ihnen Fluid-Typography vorstellen.
Auf Ihrer Website können Sie ganz einfach Checklisten darstellen. Bloss ein wenig HTML- und CSS-Code ist nötig.
Neulich hat uns ein Mail erreicht: Darin war die Frage enthalten, wie sich Texte als Prägung auf der Website darstellen lassen. Natürlich ist das mit einem Grafikprogramm schnell gemacht – aber noch eleganter lösen wir dies mittels CSS-Code.
Zugegeben: Der heutige Hack ist eine Spielerei. Und gleich vorneweg: Er lässt sich mit beliebigen Elementen – also auch mit Texten u.ä. – bewerkstelligen. Aber am sinnvollsten (wenn sich denn überhaupt was drehen soll) sind schon Bilder. Wir zeigen Ihnen heute, was Sache ist.
Wichtige Textpassagen können Sie augenfällig unterstreichen – mit einer kleinen Grafik, die dann exakt unter den hervorzuhebenden Text platziert wird. Wie das geht, zeigen wir in diesem Trick aus der Dr.-Code-Praxis.
Tool-Tipps sind kleine Erklärungstexte, welche beim Hovern z.B. über einen Text angezeigt werden. Die Tool-Tipps erscheinen meist in langweiligem grau-in-grau. Doch das muss nicht sein. Richtig coole Tool-Tipps sind nämlich im Handumdrehen möglich.
Responsive-Webdesign ist fraglos wichtig. Doch bei Bildern ist das nicht ganz ohne. Dabei können Sie auch mit einfachem HTML Bildversionen anzeigen lassen, die zur Desktop- oder Mobilversion passen. Der picture-Tag hilft Ihnen dabei.
Keine Inhalte gefunden.
Werbung
