Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a box shadow that is just an outline?

enter image description here

How would I be able to create something like the link above with html and css? Every time I try to make it into a thin line like (box-shadow: 10px 10px 1px #FFE600;) it disappears. Would I just need to create a separate div for this?

Here's my curent code: HTML

<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">

CSS

.pageimg {
    width: 37%;
    float: right;
    margin-left: 100px;
    box-shadow: 10px 10px #FFE600;
}
like image 812
Johanna Lim Avatar asked Dec 06 '25 22:12

Johanna Lim


1 Answers

Use multiple box-shadows:

img {
  box-shadow:
   12px 8px 0 0px white,
   14px 6px 0 0px yellow,
   14px 10px 0 0px yellow,
   10px 10px 0 0px yellow;
}
<img src="https://picsum.photos/200/200?image=1069">
like image 158
Temani Afif Avatar answered Dec 08 '25 14:12

Temani Afif