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

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

الطريقة بسيطة جدا و لا تحتاج لاي مجهود فقط تابع معي الشرح و قم بتطبيقه و ستجد النتيجة عند الانتهاء

شرح التركيب

اولا قم بالدخول الى المظهر و ثم تعديل HTML

ثانيا اضغط على Ctrl + f  و اكتب بمربع البحث اللذي ظهر ]]></b:skin>

ثالثا الصق الكود التالي اعلى الوسم   ]]></b:skin>

رابعا قم بالحفظ

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

/* 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  

و قم بلصق الكود التالي بداخل الموضوع وفي الكان المناسب

<div id="polaroid">

  <figure>

    <img src="URL_IMAGE_HERE" alt="Write an SEO Friendly Title" title="Write an SEO Friendly Title"/>

    <figcaption>Caption image</figcaption>

  </figure>

</div>

سادسا قم بتغير عبارة URL_IMAGE_HERE  برابط الصورة اللتي تريد

و قم بالحفظ و مبروك الاضافة

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع تمييز صورة بداخل موضوع . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.