Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › How is this navigation effect achieved

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 5, 2015 at 12:44 pm #206137
    codecowboy
    Participant

    I really like the navigation hover at https://dev.twitter.com/overview/documentation

    How is the rhomboid (?) effect achieved?

    August 5, 2015 at 12:50 pm #206138
    Shikkediel
    Participant

    It’s an :after pseudo element inside li with transform: skew(-23deg) (and I suspect it’s not working on Safari)…

    August 6, 2015 at 9:32 am #206180
    Shikkediel
    Participant

    I suspect it’s not working on Safari

    Nope, it does. I got fooled by Firefox again which doesn’t show unused style rules anymore.

    :-/

    .NavigationItem.NavigationItem--main.NavigationItem--breadcrumb:after{
    -webkit-transform:skew(-23deg);
    -ms-transform:skew(-23deg);
    transform:skew(-23deg);
}
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.