السلام عليكم ورحمة الله وبركاته
اليوم سوف نتطرق إلى شرح طريقة إضافة تأثير ثري دي على صور مدونات بلوجر ، بناء على طلب الأخوة والأخوات متابعي المدونة .
تابعوا أخواني معي طريقة التركيب .
- طريقة التركيب :
1- ادخل إلى مدونتك | ثم أختر تحرير قالب .
2- إبحث عن الوسم : </head>
3- ضع الكود التالي فوقه :
<style>
.profile-image {
margin-bottom:20px;
}
div.flip-3d {
perspective: 1200px; width: 100%; float: left;
}
div.flip-3d-skills {
perspective: 1200px; width: 100%; float: left;
}
div.flip-3d figure {
position: relative;
transform-style: preserve-3d;
transition: 1s transform;
font-size: 1.6rem;
}
div.flip-3d figure img {
width: 100%;
}
div.flip-3d figure figcaption {
position: absolute;
width: 105%; height: 50%; top: 0;
transform: rotateY(.5turn) translateZ(1px);
background: rgba(255,255,255,0.9);
text-align: center;
padding-top: 45%;
opacity: 0.6;
transition: 1s .5s opacity;
}
div.flip-3d:hover figure { transform: rotateY(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }
div.flip-3d figure:after {
content: " "; display: block;
height: 8vw; width: 100%;
transform: rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}
</style>
4- عندما تريد إعداد تدوينة أو مشاركة وتريد إضافة تأثير ثري دي على صورة المشاركة أو التدوينة أستخدم الكود التالي بالصقه في صندوق HTML كما بالصور التالية :
<div class="profile-image">
<div class="flip-3d">
<br />
<figure>
<img alt="هنا ضع تسمية الصورة" src="هنا ضع رابط الصورة" />
<figcaption>هنا ضع وصف للصورة!</figcaption>
</figure>
</div>
</div>
- وأخيراً نترككم برعاية الله وتوفيقه .
ليست هناك تعليقات:
إرسال تعليق