Hallo, Besucher der Thread wurde 1,4k aufgerufen und enthält 4 Antworten

letzter Beitrag von Belarus am

[CSS] Avatar mit Instagram Border Gradient

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

    Hallo,


    viele kennen den Avatar-Border-Gradient von Instagram und der ein oder andere würde sich eines gleichen auch auf seiner Seite wünschen. Hier möchte ich euch eine Möglichkeit zeigen, wie Ihr eure Avatare mit einen solchen Instagram-Border-Gradient versehen könnt ;)


    Bildschirmfoto_2020-10-11_20-49-52.pngFeatures

    • Leichte Integration
    • Reines CSS
    • Individuell an Deinen Style anpassbar





    Demo


    Eine Live Demo ist leider nicht verfügbar :(

    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.

    Benutzung

    1. CSS Quellcode unter Anpassung DEIN_STYLE Erweiterte Einstellungen Eigene Deklarationen - oder - Stilunabhängiges CSS und SCSS einfügen.
    2. Unter background: ggfls. nach eigenen Wünschen die Farben anpassen oder erweitern.
    3. Unter padding: ggfls. nach eigenen Wünschen die Border-Breite vergrößern oder verkleinern.

    Hinweis

    Dieser Quellcode funktioniert nur bei Styles mit einen runden Avatar. Sollte ein eckiger oder anders geformter Avatar im Style genutzt werden, so müssen die CSS-Deklarationen natürlich entsprechend angepasst werden!


    Wer den Gradient als Online-Status nutzen möchte, der findet hier eine entsprechende Anleitung dazu: [CSS] Avatar mit Instagram Border Gradient - Online Status Edition.

    Lizenz

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

    Screenshots

    Bildschirmfoto_2020-10-11_20-49-52.png


    Gruss,
    Andreas

    Ich hab mir mal den Spass erlaubt und daraus ein Online Anzeige gemacht.


    Ich hab mir mal den Spass erlaubt und daraus ein Online Anzeige gemacht.

    Natürlich auch eine Idee wert. Wenn Du Dir nun noch den Spaß machen würdest und die Umsetzung dazu hier zu posten, dann würden es andere, die nach dem lesen Deines Beitrags, sich eines gleichen auch wünschen, auch wissen wie dies umzusetzen ist. ;)


    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.

    Dieses Thema enthält 2 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.
  • Dieses Thema enthält 2 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.

Jetzt mitmachen!

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