Inset shadow navigation

  • fransjansen

    (@fransjansen)


    8 jaren, 5 maanden geleden

    Op http://pda-voetbal.com heb ik een WordPress website gemaakt m.b.v. het thema Constructzine Theme. Nu wil ik op de navigatiebalk een inset schaduw toepassen. Dit lukt me gedeeltelijk (zie screenshot)
    screenshot

    Om de schuine rand te realiseren tussen het linker en rechter deel van de navigatie maakt het thema gebruik van :before. Dit zorgt er echter voor dat de schaduw niet netjes doorloopt. Is hier een mooie oplossing voor?
    Bedankt alvast.

1 reactie aan het bekijken (van in totaal 1)
  • AccountClosed

    (@wistudatbe)

    8 jaren, 5 maanden geleden

    Dag Frans,

    Dit blijkt te liggen aan volgende: border-width: 60px 60px 0 0;
    Verander deze naar: border-width: 57px 60px 0 0;

    
nav .navigation-socials:before {
    float: left;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 57px 60px 0 0;
    border-color: #F44336 transparent transparent transparent;
    line-height: 0px;
    _border-color: #ffffff #000000 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

    Als voorbeeld heb ik de hoek zelf rood gemaakt, zodat je duidelijk het verschil kunt zien:
    VOOR: border-width: 60px 60px 0 0;
    grid-wud

    NA: border-width: 57px 60px 0 0;
    grid-wud

    Grtjs, Danny

    • Deze reactie is gewijzigd 8 jaren, 5 maanden geleden door AccountClosed. Reden: url toegevoegd
1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘Inset shadow navigation’ is gesloten voor nieuwe reacties.