Creating a stripped box shadow with just HTML and CSS - a simple guide

Hey there! I'm trying to create a navbar button with a cool stripped box shadow effect when hovered, similar to what you see in this image link. I attempted to achieve this using CSS box-shadow and linear gradient, but unfortunately it didn't quite work out as expected.

Here's the current HTML & CSS code that I have:

<body>
  background-color: black;
  font-family: sans-serif;
  color: white;
</body>

<a>
  text-decoration: none;
  color: white;
</a>

<ul>
  height: 10vh;
  list-style: none;
  display: flex;
  justify-content: space-around;
</ul>

<ul a>
    margin: auto;
</ul>

<ul li>
  margin: auto;
  padding: .5em 1em;
  transition: all .2s ease-in-out;
</ul li>

<ul li:hover>
  cursor: pointer;
  background-color: white;
  color: black;
  border-bottom: 3px solid black;
  border-right: 3px solid black;
  box-shadow: 5px 5px yellow;
  font-weight: bolder;
</ul li:hover>

Is it possible to achieve this stripped box shadow effect using only HTML & CSS? If not, what other technologies or tools would be necessary to make this happen?

Thank you so much for your help! 🙏

Answer №1

Utilizing `border-image` can provide a solution in this case:</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.box {
  --b:10; /* adjust the border */
  padding:20px;
  margin:10px;
  display:inline-block;
  border: solid #000;
  border-width:0 calc(var(--b)*1px) calc(var(--b)*1px) 0;
  background:red padding-box;
  border-image:repeating-linear-gradient(-45deg,#0000 0 4px,blue 0 8px) var(--b);
  /* Use clip-path to cut the corners */
  clip-path:polygon(0 0,calc(100% - calc(var(--b)*1px)) 0,calc(100% - calc(var(--b)*1px)) calc(var(--b)*1px),100% calc(var(--b)*1px),100% 100%,calc(var(--b)*1px) 100%,calc(var(--b)*1px) calc(100% - calc(var(--b)*1px)),0 calc(100% - calc(var(--b)*1px)))
}
<div class="box"> some text here</div>

<div class="box" style="--b:5"> some text here</div>
<div class="box" style="--b:15"> some text here</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Retrieve the Current div's ID in VueJS

When using the v-for directive to dynamically generate an id for my div, I need to pass this unique id to a specific function. <div v-for="(item, index) in items" :key="index" :id="'form' + index" > ...

Measuring the space between components

I am looking for a way to dynamically calculate distance on a canvas, similar to the example shown in the figure. I want to be able to drag the highlighted joints in order to adjust the span for calculating distances. Are there any plugins available for th ...

apply a visible border to the item that is clicked or selected by utilizing css and vue

I have a list of items that I want to display as image cards with an active blue border when clicked. Only one item can be selected at a time. Below is the code snippet: Template Code <div class="container"> <div v-for="(obj ...

Having trouble eliminating the underline on Vue router-link?

I've experimented with various approaches in an attempt to remove the underline from router-link. This is the code I have: <router-link :to="{name: 'Plan'}"> <div>Plan Your Trip</div> <div class=&apos ...

JQuery Mobile fails to apply consistent styling to user input check items within a list

I have successfully implemented the functionality to add user input items to a checklist. However, I am facing an issue where the newly added items are not adhering to Jquery Mobile's styling. Here is a screenshot showcasing the problem: Below is th ...

What is the best way to create a button that can show or hide an unordered list with a click?

This is where you can find my special button: <body> <h3 class="paragraph">To remove duplicates in 2 Javascript arrays (refer to the readme), combine the results into a new array and display the unique names in an unordered list below ...

Storing user responses on a webpage

I am feeling quite lost in my design and I need some help from a talented programmer who can guide me through this realm which is not exactly my area of expertise. My Current Assets Page - form.html <div style="text-align:left"> <form ...

Can the state and city be filled in automatically when the zip code is entered?

I have a form where users can enter their zip code, and based on that input, the corresponding city and state will automatically populate. These three fields are positioned next to each other within the same form. Here is an example of my form: $(' ...

"Enhance your shinydashboard with a customizable header dropdown feature that allows you

I am trying to create a vertical grouped dropdown menu in the header panel that contains multiple links. Currently, I can only achieve a flat horizontal layout using tags$li. I want to place linkA and linkB under grouplinkAB, allowing users to open one o ...

The data type 'string' cannot be assigned to the data type 'Position'

Currently, I am in the process of converting React js to typescript. The component being used is a Class Component. I would like to obtain CSS settings through props and apply them to an element. How can I resolve this issue? render(){return( <span st ...

code in html/javascript that is securely implemented for adobe air applications

Creating a desktop application using Adobe Air is my goal, but I have concerns about the security of the HTML/JavaScript source code. My application will feature paid media content, and I am hesitant to expose any URLs associated with it. What methods ca ...

"Enhancing webpage dynamics with jQuery: Exploring the

I have a beginner's question regarding my jQuery script. The script I have makes the menu move slightly to the right. My first issue is that the <a> tag seems to be receiving bottom padding, and I am unsure why or how this is happening. My secon ...

Creating an animated link with a dynamic underline featuring a trio of vibrant colors

I'm having trouble figuring out how to animate my links on hover with 3 different colors. I attempted using the linear-gradient property but it doesn't seem to be working. Any suggestions on how to proceed? Below is an example of what I'm a ...

Why does my element appear to be a different color than expected?

I've developed a sleek wind map (check out for reference). Using a weighted interpolation every 10ms, I generate uVector and vVector data to calculate wind speed. Based on this speed, each point is assigned a specific color as outlined below. if (we ...

list without specific order spacing

I have implemented an unordered list in the footer section of my HTML document. Within this list, the first two items consist of social media logos displayed as images. To enhance their visibility and prominence within the footer, I have assigned them a wh ...

jQuery form validation with delay in error prompts

I am experiencing a strange issue with my HTML form validation function. It seems to be showing the alert div twice, and I can't figure out why this is happening. Adjusting the delay time seems to affect which field triggers the problem. Can anyone sp ...

Obtain the URL found within the href tags

Is there a way to extract the links from the href tags? When I coded it, the entire 'a' tag is showing up... Here's the code: page = urllib2.urlopen('https://www.meetup.com/') soup = BeautifulSoup(page, 'lxml') categor ...

Is the z-index functioning properly for the header call-to-action text on mobile devices, but not on desktop?

The desktop header cta is functioning properly, but when I switch to mobile nothing happens. I attempted to increase the z-index number within the html instead of in the style sheet. This is where my CTA is located in the html: CALL TO ACTION surrounded ...

What is the best way to reset the size of an element in webkit back to its original dimensions?

I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...

Using scripted <svg> with <defs> and attempting to reference it via JavaScript results in failure

My goal is to dynamically generate svg path elements in html using JavaScript. I would like to place these paths within a <defs> element so that they can be reused later in <use> xlink:href elements. However, after creating the paths (by pr ...