Hallo, Besucher der Thread wurde 583 aufgerufen und enthält 1 Antwort

letzter Beitrag von Belarus am

[CSS] Triangle Divider (Seperator)

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,


    viele kennen sie bzw. haben diese bereits auf einigen modernen Internetpräsenzen gesehen - die Triangle Divider bzw. Seperatoren. Damit können einzelne oder gar mehrere Sektionen modern gestaltet voneinander getrennt werden. Solche Divider bzw. Seperatoren können per CSS individuell erstellt und ebenso leicht an den eigenen Style angepasst werden.

    Features

    • Reines HTML & CSS
    • Individuell gestaltbare Divider bzw. Seperatoren
    • Individuell an Deinen Style anpassbar






    Demo


    Eine Live Demo kann auf Belarusinfo.de eingesehen werden ;)

    Quellcode

    Das unachtsame bearbeiten von Templates kann zu einen Fatal-Error führen. Entsprechend dem sind vor jeglichen Änderungen ein Backup durchzuführen! Insofern keine Kenntnisse mit Templates vorhanden sind, so empfiehlt es sich einen Entwickler des Vertrauen zu kontaktieren.

    Alternativ können die Divider bzw. Seperatoren auch mit Pseudo-Elementen wie :before oder :after angelegt werden. Die Bezeichnung RTL (right to left) bzw. LTR (left to right) beziehen sich immer auf den Beginn der Spitze der Triangle zum breiteren bzw. höheren Ende! Siehe dazu auch die Bemerkungen ei den Screenshots am Ende des Beitrags.

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Benutzung

    1. Gehe zu Anpassung Stile DEIN_STYLE Erweiterte Einstellungen Individuelles CSS und SCSS
    2. Füge dort den o.g. CSS-Quellcode ein und passe diesen nach eigenen Wünschen an (Beachte dazu den nachfolgenden Punkt: Anpassung!).
    3. Gehe nun zu Anpassung Templates DEIN_STYLE
      Sollte Dein Style keine eigenen Templates mit sich bringen, so sind diese aus den Standard-Templates in Deinen Style zu kopieren!
    4. Wähle das Template breadcrumbs aus und füge dort den Quellcode <div class="triangleDividerRTL"></div> ganz unten in einer neuen Zeile ein.
      Das Beispiel zeigt den Divider bzw. Seperator unter der Teaser-Slideshow. Sollte diese genutzt werden, so ist das Template __teaserBox zu benutzen!
    5. Wähle das Template pageFooter aus und füge dort den Quellcode <div class="triangleDividerLTR"></div> ganz oben in einer neuen Zeile ein.
    6. Fertig!

    Anpassung

    Die CSS-Deklarationen width und height dürfen nicht verändert werden! Im Gegenteil der Vermutung, dass die Höhe dort angepasst wird, wird diese statt dessen unter der CSS-Deklaration border-width: angegeben. Beim obigen Beispiel (border-width: 0 0 50px 99.6vw;) entsprechen die 50px die Höhe der Triangel und die 99,6vw die Breite. Beachte die Viewport-Breite 99,6vw, welche so erhalten bleiben muss! Sollte diese auf 100vw erhöht werden, so würde eine Horizontale Scrollbar am unteren Browserende angezeigt werden, da die Triangle über den Browserbereich hinaus gehen würde.

    Lizenz

    Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

    Screenshots



    triangleDividerRTLtriangleDividerLTR


    Gruss,

    Andreas

  • Belarus

    Hat den Titel des Themas von „[CSS] Triangle Divider“ zu „[CSS] Triangle Divider (Seperator)“ geändert.

    Update:


    Der Triangle-Divider bzw. Seperator lässt sich auch wunderbar mit einen Schatten versehen.

    Demo

    Eine Demo kann auf Belarusinfo.de eingesehen werden ;)

    Quellcode

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Ergänzend zum Quellcode im ersten Beitrag wurde für den Schatten des Divider bzw. Seperator lediglich auf -webkit-filter: drop-shadow() sowie filter: drop-shadow() zurück gegriffen um eines gleichen mit einen Schatten zu versehen.

    Benutzung

    1. Gehe zu Anpassung Stile DEIN_STYLE Erweiterte Einstellungen Individuelles CSS und SCSS
    2. Füge dort den o.g. Quellcode ein und passe diesen nach Deinen belieben an.
    3. Fertig!

    Anpassung

    Die CSS-Deklaration drop-shadow setzt sich wie folgt zusammen: drop-shadow(offset-x offset-y blur-radius color). Dabei steht offset-x für den Horizontalen versatz, offset-y für den Vertikalen Versatz, blur-radius für die Größe des Schattens und color für die Farbe des Schattens. Abseits der Farben, welche sowie als auch mit Hex- und RGB-Werten angegeben werden können, können für den Versatz sowie die Größe des Schattens in px , % und ähnlich anderen Werten angegeben werden.

    Screenshots


    triangleDividerRTLtriangleDividerLTR


    Gruss,
    Andreas

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!