4 replies [Last post]
Sudhanshu
Sudhanshu's picture
Offline
newbie
Last seen: 2 weeks 1 day ago
Timezone: GMT+5.5
Joined: 2018-10-26
Posts: 3
Points: 4

Hello,
Please can someone help me in creating shadow effect for chevron shape.
I tried using filter:drop-shadow but it only works in Google Chrome not in IE 11.
Please help me with the alternative solution
See this saved fiddler for understanding implementation
https://jsfiddle.net/xca5kqu0/
========================
Below thing does not work in IE 11 but works in Chrome
filter: drop-shadow(2px 8px 1px rgba(0,0,0,1));
-webkit-filter:drop-shadow(2px 8px 1px rgba(0,0,0,1))

Please help.
Regards,
Sudhanshu

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 40 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9710
Points: 3786

???

Using Chrome v70.xxx or Firefox v60.xxx neither work for a drop shadow. I have expunged IE from my computers.

"Most browsers do not support this parameter; the effect will not render if used."

See Moz Developer Network.

Note, too, that the drop-shadow effect is intended to be applied to images.

See also, MDN box-shadow. It may not do exactly what you want, but I imagine you can play with it to get close.

One other approach, instead of shadowing the arrow to lift it above the background, use text shading to lift the letters above their background.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sudhanshu
Sudhanshu's picture
Offline
newbie
Last seen: 2 weeks 1 day ago
Timezone: GMT+5.5
Joined: 2018-10-26
Posts: 3
Points: 4

Making it pointer is

Making it pointer is complicated otherwise we already tried with this box shadow property.
Need something which can create shadow for shevron shape div, which I explained in details

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 40 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9710
Points: 3786

OK, first, MDN clearly states

OK, first, MDN clearly states drop-shadow is poorly supported.

Not sure why you'd say text-shadow is "complicated".

I have worked with box-shadow and found it to be straight forward. I haven't tried with a chevron shape. You say you tried that property. I'd say try again with simplified values to find its limits.

Finally, just what makes the shadow effect so important?

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 40 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9710
Points: 3786

Addendum

I made a test case which partially illustrates the problem. The code below creates an illusion of more shadow than there is; not a bad thing. Further, mixing in some text-shadow carries the illusion further.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
    "width=device-width, height=device-height, initial-scale=1"
          name="viewport">
    <title>
      Test document
    </title>
 
    <style media="screen">
    /*<![CDATA[*/
 
    body, html {
	font: 100%/1.5 sans-serif;
	margin:0;
	padding: 0;
    }
 
    p {
	font-size: 1em;
	margin-bottom: 0;
    }
 
    h1, h2, h3 {
	font-family: serif;
	margin-bottom: 0;
    }
 
    h1 {
	text-align: center;
    }  /* end boiler plate */
 
    table {
	margin: 1.5em auto;
    }
 
    .pointer {
	width: auto;
	height: 60px;
	position: relative;
	background: #1F497D;
	text-align: center;
	vertical-align: middle;
	display: table;
	/*filter: drop-shadow(2px 8px 1px rgba(0,0,0,0.2));*/
	box-shadow: 8px 8px 8px rgba(0,0,0,0.2);
    }
 
    .pointerText {
	display: table-cell;
	font-size: 1.25em;
	vertical-align: middle;
	color: black;
	padding-left:35px;
	text-shadow: 1px 1px 0px white, -1px -1px 6px white;
    }
 
    .pointer:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 30px solid white;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
    }
 
    .pointer:before {
	content: "";
	position: absolute;
	right: -30px;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 30px solid #1F497D;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	/*uncomment the next property to see*/
	/*box-shadow: 8px 8px 8px rgba(0,0,0,0.2);*/
	/*this shadow property applied to the pointed end illustrates the issue;
	  the borders which 'draw' the point break the shadow.*/
    }
 
 
    /*]]>*/
    </style>
  </head>
 
  <body>
    <h1>
      Box-shadow attempt with text shadow
    </h1>
    <table>
      <tr>
	<td>
	  <div class="pointer">
	    <div class="pointerText">Dynamic process name</div>
	  </div>
	  <td>
	    <div>
	    </div>
	  </td>
	</td>
      </tr>
    </table>
  </body>
</html>

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.