【Image Decorations】

Frames, shadows, etc.!

Frames -1-


<img class="image-1" src="your-picture.jpg" alt="picture">
<img class="image-2" src="your-picture.jpg" alt="picture">
<img class="image-3" src="your-picture.jpg" alt="picture">

Copied!


.image-1 {
  max-width: 250px;
  height: auto;
  border: 5px dashed black; /* border */
  border-radius: 8px; /* round corner */
}
.image-2 {
  max-width: 250px;
  height: auto;
  border: 5px dotted black; /* border */
  border-radius: 8px; /* round corner */
}
.image-3 {
  max-width: 250px;
  height: auto;
  border: 5px double black; /* border */
  border-radius: 15px; /* round corner */
}

Copied!

Here you are using your frame image.
You can adjust the position of the image visible through the frame's window.


            
<div class="frame-container">
  <div class="image-background"></div>
  <img src="your-picture.png" alt="Frame" class="frame">
</div>

Copied!


.frame-container {
  position: relative; 
  width: 200px; /* Size of the frame */
  height: 200px; /* Size of the frame */
}

.image-background {
  position: absolute; 
  width: 150px; /* Image size: larger than the window but smaller than the frame */
  height: 150px; /* Image size: larger than the window but smaller than the frame */
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%); 
  background-image: url('your-picture.jpg'); 
  background-size: cover; 
  background-position: 10% 20%; /* Specify the visible part of the image through the window */
  background-repeat: no-repeat;
}

.frame {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
}

Copied!

Shadow -1-


<img class="image-4" src="your-picture.jpg" alt="picuture">
<img class="image-5" src="your-picture.jpg" alt="picture">
<img class="image-6" src="your-picture.jpg" alt="picture">

Copied!


.image-4 {
  max-width: 250px;
  height: auto;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* shadow */
}
.image-5 {
  max-width: 250px;
  height: auto;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 1); /* shadow */
}
.image-6 {
  max-width: 250px;
  height: auto;
  box-shadow: 25px -25px 0px lightblue; /* shadow */
  margin-top: 25px; /* Reserve space for shadow */
}

Copied!

Tilted -1-


<img class="image-7" src="your-picture.jpg" alt="picture">

Copied!


.image-7 {
max-width: 250px;
height: auto;
transform: rotate(-5deg); /* Tilting slightly */
margin-bottom: 10px; /* Reserve space for tilting */
}

Copied!