{"id":5900,"date":"2024-04-14T12:43:17","date_gmt":"2024-04-14T04:43:17","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5900"},"modified":"2024-04-14T12:43:17","modified_gmt":"2024-04-14T04:43:17","slug":"container-shadow","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/container-shadow\/","title":{"rendered":"Container shadow"},"content":{"rendered":"\n
\n

Container shadows are visual effects that present elements with a shadow. You can access text shadows by choosing a text element and navigating to Style panel<\/strong> > Effects<\/strong> > Container shadows<\/strong>.<\/p>\n

Throughout this guide, you\u2019ll discover:<\/p>\n

    \n
  1. How to generate container shadow transitions<\/li>\n
  2. How to craft container shadow borders<\/li>\n<\/ol>\n

    Ways to make container shadow transitions<\/h2>\n

    You have the capability to incorporate container shadow transitions, so when visitors interact with the element, the container shadow alters its visual display. For instance, you can implement a hover effect on an element that will cause the container shadow’s hue to become darker on hover:<\/p>\n

      \n
    1. Pick the element where you wish to include a container shadow transition<\/li>\n
    2. Head to Style panel<\/strong> > Effects<\/strong> > Container shadows<\/strong><\/li>\n
    3. Press the \u201cplus<\/strong>\u201d icon to insert a container shadow<\/li>\n
    4. Modify the hue<\/strong> to black and incorporate 20% opacity<\/li>\n
    5. Incorporate a container shadow to an element and design it with black hue and 20% opacity<\/li>\n
    6. Select Hover<\/strong> from the States<\/strong> drop-down menu<\/li>\n
    7. Visit Style panel<\/strong> > Effects<\/strong> > Container shadows<\/strong><\/li>\n
    8. Configure the container shadow to 55% opacity<\/li>\n
    9. Select None<\/strong> from the States<\/strong> drop-down menu<\/li>\n
    10. Head to Style panel<\/strong> > Effects<\/strong> > Transitions<\/strong><\/li>\n
    11. Click the \u201cplus<\/strong>\u201d icon to insert a transition<\/li>\n
    12. Pick Container shadow <\/strong>from the Type <\/strong>drop-down menu<\/li>\n
    13. Establish a Duration<\/strong> or keep it at the default 200ms<\/li>\n<\/ol>\n

      Upon applying the transition, the hover effect will smoothly transition between the None<\/strong> state and the Hover<\/strong> state. Without the 200ms transition, the hover effect would abruptly shift between different opacity levels.<\/p>\n

      Ways to make container shadow borders<\/h2>\n

      You can apply multiple container shadows on a single element to produce distinct visual effects. Here\u2019s an example of creating a subtle border and shadow by utilizing multiple container shadows:<\/p>\n

        \n
      1. Choose the element where you want to include a container shadow transition<\/li>\n
      2. Go to Style panel<\/strong> > Effects<\/strong> > Container shadows<\/strong><\/li>\n
      3. Hit the \u201cplus<\/strong>\u201d icon to insert a container shadow<\/li>\n
      4. Pick Outside <\/strong>as the Type<\/strong><\/li>\n
      5. Adjust the X<\/strong> and Y<\/strong> values based on preference<\/li>\n
      6. Set Blur<\/strong> to 0px<\/li>\n
      7. Set Size<\/strong> to 1 px<\/li>\n
      8. Set Color<\/strong> to rgba(0,0,0,0.1) – black with 10% opacity<\/li>\n
      9. Adjust the hue of the shadow to rgba(0, 0, 0, 0.1) (i.e., black with 10% opacity)<\/li>\n
      10. Visit Style panel<\/strong> > Effects<\/strong> > Container shadows<\/strong><\/li>\n
      11. Press the \u201cplus<\/strong>\u201d icon to insert another container shadow<\/li>\n
      12. Set Blur<\/strong> to 8px<\/li>\n
      13. Modify the X<\/strong> and Y<\/strong> values based on preference<\/li>\n
      14. Set Color<\/strong> to rgba(0, 0, 0, 0.1)<\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use box shadows to add depth inside or outside of element boundaries.","protected":false},"author":2,"featured_media":5901,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-5900","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5900"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5900\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5901"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}