3

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;
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
Johanna Lim
  • 33
  • 4

2 Answers2

2

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">
TylerH
  • 20,799
  • 66
  • 75
  • 101
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

You could also rather use pseudo elements. I do recommend keeping images in containers as it makes working with them easier. It would look something like this.

.image-container{
    position: relative;
    display: inline-block;
}
.image-container::before{
    content: '';
    position: absolute; 
    border: solid 1px yellow;
    width: 100%;
    height: 100%;
    left: 14px; /* This will be your box shadow x-offset; */
    top: 14px; /* This will be your box shadow y-offset; */
    z-index: 0;
}

and then your html

<div class="image-container">    
    <img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
</img>
Ruan Kruger
  • 86
  • 8