How do you achieve such a shadow?
I wanted to get a shadow under the text like in the attached picture. In the attachment, we see a shadow under the text "website". I have tried using the code below with no success. Any help would be much appreciated.
#testbtn {
display: block;
color: #000000;
font-weight: bold;
text-align: center;
margin: 0 auto;
border: 1px solid #0098DB;
padding: 8px 8px;
background: #575857;
max-width: 200px;
border-radius: 10px;
}
.trying {
color: white;
content: "";
box-shadow: 5px 5px 5px black;
text-transform: rotateX(70deg);
}
<a id="testbtn"><span class="trying">Test</span></a>
source to share
I agree with @natureminded. I don't think text conversion would be the best way to achieve this result. I was developing this example after they posted their answer, but it follows the same thought process
#testbtn {
position: relative;
display: block;
color: #000000;
font-weight: bold;
text-align: center;
margin: 0 auto;
border: 1px solid #0098DB;
padding: 8px 8px;
background:#575857;
max-width: 200px;
border-radius: 10px;
z-index: -3;
}
.trying{
position: relative;
color:white;
}
.trying:before{
content:"";
position: absolute;
width: 100%;
left: 6px;
top: 7px;
height: 110%;
background-color:rgba(0,0,0, .5);
transform: skew(35deg);
z-index:-1;
}
<a id="testbtn"><span class="trying">Test</span></a>
source to share
You can try using text-shadow
CSS attribute and use CSS to draw parellelogram.
The syntax is as follows:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
You can check the w3schools link for more information.
In its most basic sense, you can apply a shadow to a class .trying
directly:
text-shadow: 1px 1px 3px #000000;
This will cause the text to be a shadow, but I don't believe the property text-shadow
can do what you want it to do with the shadow in the attached JPG. (You will need to draw a shape or use sprites).
As another commenter pointed out, can you provide the original page where you saw the image so that you can analyze how they achieved the result?
The applied shadow will not add the shadow to the text directly, but instead to the border of the element (thus why the shadow is on the outliers of the text Test
).
Here's some more info from w3schools, sprites , if you decide to continue this route - this is another way you could do it, but it is probably best to use shape drawing and text shadow with CSS.
EDITING DRAWINGS:
Here's the code to draw the parallelogram - you can change this to achieve your effect:
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
Courtesy of CSS Tricks, here's a complete link to drawing shapes with CSS. If you created a second element and used relative / absolute positioning and z-index, you can place it below your nav text. Just change the color, maybe give it some opacity (change the snippet above) and you should be on your way ...
source to share
It's not exactly the same, but close.
body {
background-color: #9FCDE8;
}
.shadow1 {
color: white;
font-size: 30pt;
text-shadow:
1px 1px 5px #7FA4B8,
2px 2px 5px #7FA4B8,
3px 3px 5px #7FA4B8,
4px 4px 5px #7FA4B8,
5px 5px 5px #7FA4B8,
6px 6px 5px #7FA4B8,
7px 7px 5px #7FA4B8,
8px 8px 5px #7FA4B8,
9px 9px 5px #7FA4B8,
10px 10px 5px #7FA4B8,
11px 11px 5px #7FA4B8,
12px 12px 5px #7FA4B8,
13px 13px 5px #7FA4B8,
14px 14px 5px #7FA4B8,
15px 15px 5px #7FA4B8,
16px 16px 5px #7FA4B8,
17px 17px 5px #7FA4B8,
18px 18px 5px #7FA4B8,
19px 19px 5px #7FA4B8,
20px 20px 5px #7FA4B8,
21px 21px 5px #7FA4B8,
22px 22px 5px #7FA4B8,
23px 23px 5px #7FA4B8,
24px 24px 5px #7FA4B8,
25px 25px 5px #7FA4B8,
26px 26px 5px #7FA4B8,
27px 27px 5px #7FA4B8,
28px 28px 5px #7FA4B8,
29px 29px 5px #7FA4B8,
30px 30px 5px #7FA4B8,
31px 31px 5px #7FA4B8,
32px 32px 5px #7FA4B8,
33px 33px 5px #7FA4B8,
34px 34px 5px #7FA4B8,
35px 35px 5px #7FA4B8,
36px 36px 5px #7FA4B8,
37px 37px 5px #7FA4B8,
38px 38px 5px #7FA4B8,
39px 39px 5px #7FA4B8,
40px 40px 5px #7FA4B8,
41px 41px 5px #7FA4B8,
42px 42px 5px #7FA4B8,
43px 43px 5px #7FA4B8,
44px 44px 5px #7FA4B8,
45px 45px 5px #7FA4B8,
46px 46px 5px #7FA4B8,
47px 47px 5px #7FA4B8,
48px 48px 5px #7FA4B8,
49px 49px 5px #7FA4B8,
50px 50px 5px #7FA4B8;
}
.shadow2 {
margin-left: 50px;
margin-right: 50px;
color: white;
font-size: 30pt;
text-shadow:
1px 1px 10px #7FA4B8,
2px 2px 10px #7FA4B8,
3px 3px 10px #7FA4B8,
4px 4px 10px #7FA4B8,
5px 5px 10px #7FA4B8,
6px 6px 10px #7FA4B8,
7px 7px 10px #7FA4B8,
8px 8px 10px #7FA4B8,
9px 9px 10px #7FA4B8,
10px 10px 10px #7FA4B8,
11px 11px 10px #7FA4B8,
12px 12px 10px #7FA4B8,
13px 13px 10px #7FA4B8,
14px 14px 10px #7FA4B8,
15px 15px 10px #7FA4B8,
16px 16px 10px #7FA4B8,
17px 17px 10px #7FA4B8,
18px 18px 10px #7FA4B8,
19px 19px 10px #7FA4B8,
20px 20px 10px #7FA4B8,
21px 21px 10px #7FA4B8,
22px 22px 10px #7FA4B8,
23px 23px 10px #7FA4B8,
24px 24px 10px #7FA4B8,
25px 25px 10px #7FA4B8,
26px 26px 10px #7FA4B8,
27px 27px 10px #7FA4B8,
28px 28px 10px #7FA4B8,
29px 29px 10px #7FA4B8,
30px 30px 10px #7FA4B8,
31px 31px 10px #7FA4B8,
32px 32px 10px #7FA4B8,
33px 33px 10px #7FA4B8,
34px 34px 10px #7FA4B8,
35px 35px 10px #7FA4B8,
36px 36px 10px #7FA4B8,
37px 37px 10px #7FA4B8,
38px 38px 10px #7FA4B8,
39px 39px 10px #7FA4B8,
40px 40px 10px #7FA4B8,
41px 41px 10px #7FA4B8,
42px 42px 10px #7FA4B8,
43px 43px 10px #7FA4B8,
44px 44px 10px #7FA4B8,
45px 45px 10px #7FA4B8,
46px 46px 10px #7FA4B8,
47px 47px 10px #7FA4B8,
48px 48px 10px #7FA4B8,
49px 49px 10px #7FA4B8,
50px 50px 10px #7FA4B8;
}
.shadow3 {
color: white;
font-size: 30pt;
text-shadow:
1px 1px 15px #7FA4B8,
2px 2px 15px #7FA4B8,
3px 3px 15px #7FA4B8,
4px 4px 15px #7FA4B8,
5px 5px 15px #7FA4B8,
6px 6px 15px #7FA4B8,
7px 7px 15px #7FA4B8,
8px 8px 15px #7FA4B8,
9px 9px 15px #7FA4B8,
10px 10px 15px #7FA4B8,
11px 11px 15px #7FA4B8,
12px 12px 15px #7FA4B8,
13px 13px 15px #7FA4B8,
14px 14px 15px #7FA4B8,
15px 15px 15px #7FA4B8,
16px 16px 15px #7FA4B8,
17px 17px 15px #7FA4B8,
18px 18px 15px #7FA4B8,
19px 19px 15px #7FA4B8,
20px 20px 15px #7FA4B8,
21px 21px 15px #7FA4B8,
22px 22px 15px #7FA4B8,
23px 23px 15px #7FA4B8,
24px 24px 15px #7FA4B8,
25px 25px 15px #7FA4B8,
26px 26px 15px #7FA4B8,
27px 27px 15px #7FA4B8,
28px 28px 15px #7FA4B8,
29px 29px 15px #7FA4B8,
30px 30px 15px #7FA4B8,
31px 31px 15px #7FA4B8,
32px 32px 15px #7FA4B8,
33px 33px 15px #7FA4B8,
34px 34px 15px #7FA4B8,
35px 35px 15px #7FA4B8,
36px 36px 15px #7FA4B8,
37px 37px 15px #7FA4B8,
38px 38px 15px #7FA4B8,
39px 39px 15px #7FA4B8,
40px 40px 15px #7FA4B8,
41px 41px 15px #7FA4B8,
42px 42px 15px #7FA4B8,
43px 43px 15px #7FA4B8,
44px 44px 15px #7FA4B8,
45px 45px 15px #7FA4B8,
46px 46px 15px #7FA4B8,
47px 47px 15px #7FA4B8,
48px 48px 15px #7FA4B8,
49px 49px 15px #7FA4B8,
50px 50px 15px #7FA4B8;
}
<span class="shadow1">a website</span>
<span class="shadow2">a website</span>
<span class="shadow3">a website</span>
source to share