Geef uw headerprofiel een leuke look

[SpIdErPiGgY]

Geef uw headerprofiel een leuke look:

Code: Selecteer alles

.header-profile {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(145deg, #bacbde, #b8c8d6); /* subtiele blauw-grijze achtergrond */
    border: 1px solid;                                       /* iets dikkere border voor effect */
    border-image: linear-gradient(45deg, blue, grey, black, red) 1; /* rainbow border */
    border-radius: 6px;                                      /* afgeronde hoeken */
    padding: 2px 6px;                                        /* compacte padding rondom tekst */
    margin-top: 2px;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);                  /* lichte schaduw */
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: #fff;                                             /* witte tekst */
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;                                      /* voor dropdown positioning */
}

.header-profile:hover {
    background: linear-gradient(145deg, #aec2d9, #d7dfe8);  /* lichte hover gradient */
    box-shadow: 0 3px 5px rgba(0,0,0,0.15);                 /* iets sterkere hover schaduw */
}