CSS-Stylesheet
Hier finden Sie zahlreiche Tricks, um Ihr Webprojekt mit CSS-Code auf Vordermann zu bringen.
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».
Einst waren Tabellen auf Websites allgegenwärtig. Heute deutlich weniger – auch weil Tabellen im Responsive Design nicht ganz unproblematisch sind. Aber so ganz verzichten kann man denn doch nicht auf Tabellen. Damit sie aber wenigstens übersichtlich daher kommen, empfiehlt sich ein wenig CSS-Design. Zum Beispiel mittels abwechselnder Farbgebung.
Das Button-Modul des Divi-Themes enthält keine Option, um seine Höhe einzustellen. Aber in manchen Fällen möchten Sie diese vielleicht anpassen, damit der Button auf Ihrer Seite besser zur Geltung kommt. Hier zeigen wir Ihnen, wie Sie die Höhe des Divi-Buttons mittels CSS-Code anpassen können. Auch für die Button-Breite haben wir einen Hack parat.
Das Internet lebt von Bildern – wahrlich eine Binsenwahrheit. Aber die Bilder lassen sich leicht animieren. So dass sie etwa beim Laden einer Seite automatisch ein- oder auszoomen. Wie einfach das geht, zeigen wir Ihnen heute.
Das Divi-Theme kommt mit einem patenten Login-Modul daher. Doch es lässt sich nicht komplett stylen: So sind etwa horizontal angeordnete Anmeldefelder von Haus aus nicht möglich. Es sei denn, Sie verwenden unseren CSS-Trick.
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.
Die Formularfelder des Kontaktformular-Moduls im Divi-Theme werden normalerweise innerhalb der eigentlichen Felder angezeigt. Doch das lässt sich ändern: Die Feldbezeichnungen können auch links der Eingabefelder platziert werden. Wie das geht, zeigen wir Ihnen heute,
Das Galerie-Modul des Divi-Themes lässt sich recht einfach mit einem «Load More»-Button ergänzen. Wie das funktioniert, zeigen wir Ihnen im heutigen Trick.
Bilder müssen nicht immer einfach nur so gerade dastehen. Ein kleiner Dreh kann ansprechend wirken. Dabei ist es nicht einmal nötig, das Originalbild im Photoprogramm zu bearbeiten. Ein wenig CSS-Code hilft Ihnen.
Divi-Module lassen sich recht einfach mit einem kleinen Textbanner – einem Ribbon – darstellen und hervorheben. Wir zeigen Ihnen heute, wie Sie solche Ribbons mittels CSS-Code erstelln können. Sie können aus 15 Varianten wählen.
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.
Keine Inhalte gefunden.
Werbung
