تمييز صورة بداخل موضوع

طريقة عمل صورة مميزة بداخل موضوع و كأنها ملتقطة بكاميرا فورية

أهلا بكم اخواني الاعزاء في هذا الشرح سأقدم لكم شرح لطريقة أختيار صورة من داخل موضوع قمت بكتابته
و جهل هذه الصورة مميزة عن باقي صور الموضوع
المميز بهذه الطريقة انك تجعل الصورة و كأنها ملتقطة بكاميرة فورية  Polaroid Photo

شرح التركيب

الكود الخاص بالأضافة

/* Polaroid Photo Effect  */figure, figcaption {

display: block;

}

#polaroid{

width:100%;

padding:0px 10px;

margin:auto;

text-align: center;

}

#polaroid figure{

position:relative;

width: auto;

max-width: 100%; /* Maximum width of the image */

margin: 20px auto 0px;

padding: 6px 8px 10px 8px;

display:inline-block;

-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);

-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);

box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);

background-color: #eee6d8;

-webkit-transform:rotate(-1deg);

-moz-transform: rotate(-1deg);

-o-transform: rotate(-1deg);

-ms-transform: rotate(-1deg);

transform: rotate(-1deg);

-webkit-backface-visibility:hidden;

}

#polaroid figure:nth-child(even) {

margin:20px 18px 20px 25px;

-webkit-transform:rotate(2deg);

-moz-transform: rotate(2deg);

-o-transform: rotate(2deg);

-ms-transform: rotate(2deg);

transform: rotate(2deg);

-webkit-backface-visibility:hidden;

-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);

-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);

box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);

}

#polaroid figure:before {

content: '';

display: block;

position: absolute;

left: 5px;

top: -10px;

width: 75px;

height: 25px;

z-index: 1;

background-color: rgba(222,220,198,0.7);

-webkit-transform: rotate(-12deg);

-moz-transform: rotate(-12deg);

-o-transform: rotate(-12deg);

-ms-transform: rotate(-12deg);

}

#polaroid figure:nth-child(even):before {

left:unset;

right:10px;

top:-10px;

width: 55px;

height: 25px;

z-index: 1;

-webkit-transform: rotate(12deg);

-moz-transform: rotate(12deg);

-o-transform: rotate(12deg);

-ms-transform: rotate(12deg);

}

#polaroid img{

max-width: 100%;

width: 100%;

height: auto;

}

#polaroid figcaption{

text-align:center;

font-family: cursive, Arial, Helvetica, sans-serif;

color:#454f40;

font-style:italic;

letter-spacing:0.09em;

margin-top:10px;}

خامسا عند كتابة اي موضوع قم بالانتقال الى عرض HTML