@Εδώ θα δούμε ένα κόλπο CSS για να εφαρμόζουμε εφέ κορνίζας σε εικόνες. Δεν χρειάζεται πλέον να βασιζόμαστε πλήρως στο Photoshop για να βελτιώσουμε την εμφάνιση των εικόνων. Μερικά από τα πλεονεκτήματα για τη χρήση CSS σε εικόνες:
• Δεν υπάρχει ανάγκη για λογισμικό επεξεργασίας εικόνας.
• Δεν απαιτείται προσαρμογή εικόνας. Αυτό το στυλ CSS μπορεί να χρησιμοποιηθεί σε οποιαδήποτε εικόνα ανεξάρτητα από το μέγεθος και τον τύπο της.
• Διατηρεί την αναλογία πλάτους/ύψους της εικόνας.
• Τα στυλ CSS μπορούν να τροποποιηθούν αργότερα για να ταιριάζουν στις ανάγκες σας χωρίς να επηρεάζουν τις σελίδες μας.

Eφέ τετράγωνου/ορθογώνιου κορνίζας - HTML

<div class="squareFrame">
     <img src="images/kitten.jpg" />
</div>

Κώδικας CSS

.squareFrame{
      background: url("images/floral.jpg");
      margin-left:auto;
      margin-right:auto;
      display:table-cell;
      position:relative;
      overflow:hidden;
      width:300px;
      box-shadow: inset 0 50px rgba(255,255,255,0.1),
             inset 2px -15px 30px rgba(0,0,0,0.4),
             2px 2px 5px rgba(0,0,0,0.3);
      padding: 25px;
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      vertical-align: middle;
      text-align:center;
}

.squareFrame img{
     width: 300px;
     border-radius: 20px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
}

Δημιουργία στρογγυλού/οβάλ εφέ κορνίζας

Για να κάνουμε το πλαίσιο εντελώς στρογγυλεμένο, ορίσαμε την ακτίνα περιγράμματος στο 50%. Εάν χρησιμοποιήσουμε τετράγωνη εικόνα, θα έχουμε έναν τέλειο κύκλο, αλλιώς ένα εφέ πλαισίου σε σχήμα οβάλ.

<div class="squareFrame">
     <img src="images/kitten.jpg" />
</div>

.roundFrame{ 
     φόντο: url("images/floral.jpg"); 
     margin-left:auto; 
     margin-right:auto; 
     display:table-cell; 
     θέση:συγγενής; 
     υπερχείλιση:κρυφό; 
     πλάτος: 300 px; 
     box-shadow: inset 0 50px rgba(255,255,255,0,1), 
           inset 2px -15px 30px rgba(0,0,0,0,4), 
           2px 2px 5px rgba(0,0,0,0,3); 
     padding: 25px; 
     ακτίνα συνόρων: 50%; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
     κατακόρυφη ευθυγράμμιση: μέση; 
     text-align:center; 
} 

.roundFrame img{ 
     πλάτος: 300 px; 
     ακτίνα συνόρων: 50%;
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
}

Αντικαταστήστε τις εικόνες kitten.jpg και floral.jpg με τις δικές σας για να δείτε το αποτέλεσμα.