Hallo, Besucher der Thread wurde 214 aufgerufen und enthält 0 Antworten

letzter Beitrag von Belarus am

[CSS] Avatar mit Instagram Border Gradient

Ich bitte alle User die sich neu registrieren, mich bitte per Konversation anzuschreiben, ob sie schon im alten Board
verifiziert waren und auch ob sie in der Gruppe Suite User waren.
Einige kann ich sofort zuweisen, da mir die Namen geläufig sind, bei anderen leider nicht, da ich keine Daten mehr habe,
wenn dann nur Paypal und den Download Log des Paketservers.
Bitte seid ehrlich und versucht mich nicht zu veräppeln, es kommt alles irgendwann raus.
Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

Letzte Beiträge Ticker Box Content

    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

    CSS
    .messageSidebar .userAvatarImage{
    background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
    width: 100px;
    height: 100px;
    border-radius: 1000px;
    padding: 4px;
    }

    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!

    Lizenz

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

    Screenshots

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


    Gruss,
    Andreas

    • Gäste Informationen


    Hallo Gast,
    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 0 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!