Search code examples
cssjinja2navborder-radius

how to round off the tabs above and below the current tab in the nav bar, also shadow the nav bar except the current tab

I've never asked a css question before so apologies in advance.

This is what my nav bar looks like currently
enter image description here
full sized image here

Two things I really want to achieve:

  1. round of the tabs just above and below the current tab
    (in this picture it would be Suggestions and About Us)
  2. shadow the nav bar on the right side except the current tab

(I'm using jinja2 btw. Cannot hard code the corners since the current tab is not fixed)

I have no idea about 1. but I tried 2. and this is the unsatisfied result:
enter image description here

would like to get rid of the abrupt corners
enter image description here

This is my current stylesheet

:root {
    /* colour palette */
    --cream : hsl(40, 100%, 96%);
    --cream-light:hsl(40, 100%, 98%);
    --coffee: hsl(40,  14%, 62%);
    --purple: hsl(258, 14%, 62%);
    --dark  : hsl(109,  7%, 33%);
    --green : hsl(128, 30%, 42%);
    --green2: hsl(140, 15%, 55%);
    --green2-dark: hsl(140, 11%, 36%);

    /*  */
    --shadow-in: inset 1px .15rem .3rem -.1rem rgba(50, 50, 93, 0.25), inset 1px .1rem .2rem -.1rem rgba(0, 0, 0, 0.3), inset -1px -1px .3rem -.1rem rgba(50, 50, 93, 0.25), inset -1px -1px .2rem -.1rem rgba(0, 0, 0, 0.3);
    --shadow-nav: .3rem 0 .6rem -.2rem rgba(50, 50, 93, 0.25), .2rem 0 .4rem -.2rem rgba(0, 0, 0, 0.3);
    --shadow-current: inset .3rem .3rem .6rem -.2rem rgba(50, 50, 93, 0.25), inset .2rem .2rem .4rem -.2rem rgba(0, 0, 0, 0.3);
    --shadow-hover: inset 1px .3rem .6rem -.2rem rgba(50, 50, 93, 0.25), inset 1px .2rem .4rem -.2rem rgba(0, 0, 0, 0.3), inset -1px -1px .6rem -.2rem rgba(50, 50, 93, 0.25), inset -1px -1px .4rem -.2rem rgba(0, 0, 0, 0.3);

    /* themes */
    --nav-bg   : var(--green2-dark);
    --nav-text : white;
    --nav-hover: hsl(140, 11%, 27%);
    --main     : var(--cream );
    --text     : var(--dark  );
    --highlight: var(--green);
    --card     : var(--cream-light);
}
html, body {
    margin: 0;
    font-size: 1.5vw;
    background: var(--nav-bg);
    transition: all .5s ease;
}
a {
    color: var(--text);
    text-decoration: none;
}
a:hover {
    color: var(--green);
}
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 18%;
    height: 100vh;
    /*box-shadow: var(--shadow-nav);*/
    /*box-shadow: .3rem 0 .6rem rgba(50, 93, 50, 0.25), .2rem 0 .4rem rgba(0, 0, 0, 0.3);*/
    background: var(--nav-bg);
}
nav h2 {
    margin: 0;
    padding: 10%;
    padding-right: 0 !important;
    height: 1.8rem;

    background: var(--nav-bg);
    color: var(--nav-text);
    transition: margin .5s, padding .5s, border .5s, background .5s, color .3s;
}
/*nav div.current {
    width: 100%;
    padding-right: .9rem;
    background: linear-gradient(90deg, hsl(140, 11%, 36%) 50%, hsl(40, 100%, 96%) 50%);
}
nav div.current:hover {
    padding-right: 0;
}*/
nav h2.current {
    margin-left: 5%;
    padding-left: 5%;
    border-radius: .5rem 0 0 .5rem;
    box-shadow: var(--shadow-current);
    background: var(--main);
    color: var(--text);
}
nav h2:hover {
    margin: 0;
    padding: 10%;
    padding-left: 15%;
    border-radius: 0;
    box-shadow: var(--shadow-hover);
    background: var(--nav-hover);
    color: var(--nav-text);
}
main {
    padding-left: 22.5%;
    padding-right: 7.5%;
    min-height: 100vh;

    background: var(--main);
    color: var(--text);

    display: flex;
    flex-direction: column;
}
main h1 {
    color: var(--green2);
}
footer {
    margin-top: auto;
    margin-bottom: .35rem;
    padding: .25rem;
    padding-right: 2.5rem;
    border-radius: .25rem;

    font: .5rem sans-serif;
    text-align: right;

    background: hsl(40, 39%, 90%);
    box-shadow: var(--shadow-in);
}

and this is layout.html

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>Library</title>
    <meta charset='UTF-8'>
</head>
<body>
    <nav>
        {% include 'navigation.html' %}
    </nav>
    <main>
        {% block main %} {% endblock %}
        <footer>Copyright 2021 mightbesimon | github.com/mightbesimon</footer>
    </main>
</body>
</html>

and this is navigation.html

{% for url, name in (('/'           , 'Home'         ),
                     ('/register'   , 'Register'     ),
                     ('/login'      , 'Login'        ),
                     ('/suggestions', 'Suggestions'  ),
                     ('/catalogue'  , 'Our Catalogue'),
                     ('/aboutus'    , 'About Us'     ),
                     ('/contact'    , 'Contact'      ),
) %}
    <a href="{{ url }}">
        <!-- <div {% if url_for(request.endpoint, **request.view_args)==url %} class="current" {% endif %}> -->
            <h2 {% if url_for(request.endpoint, **request.view_args)==url %} class="current" {% endif %}>
                {{ name }}
            </h2>
        <!-- </div> -->
    </a>
{% endfor %}
Solution

  • You could give a try to

    • drop-shadow() (but it will do on any translucide edges => text too unfortunately) to draw the shadow via filter .
    • box-shadow from .current to paint the nav background
    • overflow:hidden on nav to avoid shadow to bleed on main
    • position: relative for h2 to remain on top of the shadow & static for .current

    here is the idea of possible update

    :root {
  /* colour palette */
  --cream: hsl(40, 100%, 96%);
  --cream-light: hsl(40, 100%, 98%);
  --coffee: hsl(40, 14%, 62%);
  --purple: hsl(258, 14%, 62%);
  --dark: hsl(109, 7%, 33%);
  --green: hsl(128, 30%, 42%);
  --green2: hsl(140, 15%, 55%);
  --green2-dark: hsl(140, 11%, 36%);

  /*  */
  --shadow-in: inset 1px 0.15rem 0.3rem -0.1rem rgba(50, 50, 93, 0.25),
    inset 1px 0.1rem 0.2rem -0.1rem rgba(0, 0, 0, 0.3),
    inset -1px -1px 0.3rem -0.1rem rgba(50, 50, 93, 0.25),
    inset -1px -1px 0.2rem -0.1rem rgba(0, 0, 0, 0.3);
  --shadow-nav: 0.3rem 0 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    0.2rem 0 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
  --shadow-current: inset 0.3rem 0.3rem 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    inset 0.2rem 0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
  --shadow-hover: inset 1px 0.3rem 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    inset 1px 0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3),
    inset -1px -1px 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    inset -1px -1px 0.4rem -0.2rem rgba(0, 0, 0, 0.3);

  /* themes */
  --nav-bg: var(--green2-dark);
  --nav-text: white;
  --nav-hover: hsl(140, 11%, 27%);
  --main: var(--cream);
  --text: var(--dark);
  --highlight: var(--green);
  --card: var(--cream-light);
}
html,
body {
  margin: 0;
  font-size: 1.5vw;
  background: var(--nav-bg);
  transition: all 0.5s ease;
}
a {
  color: var(--text);
  text-decoration: none;
}
a:hover {
  color: var(--green);
}
nav {
  position: fixed;
  top: -1rem;
  bottom: -1rem;
  left: 0;
  width: 18%;
  padding: 1rem 0;
  min-height:100vh;
  overflow: hidden;
  filter: drop-shadow(0.3rem 0.3rem 0.6rem);
  
}
nav h2 {
  margin: 0;
  padding: 10%;
  padding-right: 0 !important;
  height: 1.8rem;
  transition: margin 0.5s, padding 0.5s, border 0.5s, background 0.5s,
    color 0.3s;
  position: relative;
  color: var(--nav-text);
}

nav h2.current:hover {
  box-shadow: var(--shadow-hover), 0 0 0 100vw var(--nav-bg);
}
nav h2.current {
  margin-left: 5%;
  padding-left: 5%;
  border-radius: 0.5rem 0 0 0.5rem;
  box-shadow: 0 0 0 100vmax var(--nav-bg);
  color: var(--text);
  position: static;
}
nav h2:hover {
  margin: 0;
  padding: 10%;
  padding-left: 15%;
  border-radius: 0;
  box-shadow: var(--shadow-hover);
  background: var(--nav-hover);
  color: var(--nav-text);
}
main {
  padding-left: 22.5%;
  padding-right: 7.5%;
  min-height: 100vh;
  background: var(--main);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
main h1 {
  color: var(--green2);
}
footer {
  margin-top: auto;
  margin-bottom: 0.35rem;
  padding: 0.25rem;
  padding-right: 2.5rem;
  border-radius: 0.25rem;
  font: 0.5rem sans-serif;
  text-align: right;
  background: hsl(40, 39%, 90%);
  box-shadow: var(--shadow-in);
}

    https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()

    Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.