آخر المقالات

الخميس، 17 سبتمبر، 2015

أضافة تأثير دائرى على صور البلوجر
أضافة تأثير دائرى على صور البلوجر

أضافة تأثير دائرى على صور البلوجر


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

معاينة الاضافة

الان للشرح :

  • ادخل على بلوجر ثم قالب ثم تحرير html ثم أضغط ctrl +f ثم أبحث عن هذه الكلمة 
ثم أنسخ هذا الكود فوقها

[code type="هذا الكود كتب على يد البروفيسور الصغير"]/* this code made by th3littleprofessor.com ----------------------------------------------- */
.box-wrapper {

font-family:droid arabic kufi;
position: relative;
width: 1000px;
margin: 0 auto;
}
#box {
font-family:droid arabic kufi;
position: relative;
width: 250px;
height: 250px;
overflow: hidden;
cursor: pointer;
float: left;
}

#box .caption{
font-family:droid arabic kufi;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 250px;
height: 250px;
z-index: 2;
}
.teal:before{
font-family:droid arabic kufi;

background: rgba(0, 171, 169, 0.75);
}

.burst-circle:before{
font-family:droid arabic kufi;

position: absolute;
content: '';
width: 100%;
height: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
-webkit-transform: scale(0,0);
-ms-transform: scale(0,0);
-o-transform: scale(0,0);
transform: scale(0,0);
-webkit-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
.burst-circle:hover:before{
font-family:droid arabic kufi;

-webkit-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
transform: scale(1.5,1.5);
}
.burst-circle .caption {
font-family:droid arabic kufi;
font-family:droid arabic kufi;

background: url(../images/burst.png) no-repeat;
background-position: 0 0;
-webkit-animation: capcircleout 0.75s steps(20) forwards;
-o-animation: capcircleout 0.75s steps(20) forwards;
animation: capcircleout 0.75s steps(20) forwards;

}

.burst-circle:hover .caption {
font-family:droid arabic kufi;

-webkit-animation: capcirclein 0.75s steps(20) forwards;
-o-animation: capcirclein 0.75s steps(20) forwards;
animation: capcirclein 0.75s steps(20) forwards;
}

.burst-circle img{
font-family:droid arabic kufi;

position: relative;
left: 50%;
min-width: 100%;
height: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}

.burst-circle:hover img{
font-family:droid arabic kufi;

-webkit-transform: scale(2,2) translateX(-50%) rotate(10deg);
-ms-transform: scale(2,2) translateX(-50%) rotate(10deg);
-o-transform: scale(2,2) translateX(-50%) rotate(10deg);
transform: scale(2,2) translateX(-50%) rotate(10deg);
}

.burst-circle h1 {
font-family:droid arabic kufi;

position: absolute;
left: 50%;
top: 50%;
font-size: 30px;
line-height: 30px;
font-family: Roboto;
z-index: 3;
width: 75%;
color: rgba(242, 242, 242, 0);
text-align: center;
font-weight: 300;
-webkit-transform: translate(-50%,100%);
-ms-transform: translate(-50%,100%);
-o-transform: translate(-50%,100%);
transform: translate(-50%,100%);
-webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms;
-o-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms;
transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1) 150ms;
}

.burst-circle:hover h1 {
font-family:droid arabic kufi;

color: #f2f2f2;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
@-webkit-keyframes capcirclein {
font-family:droid arabic kufi;

from { background-position: 0 0; }
to { background-position: -5000px 0; }
}
@-o-keyframes capcirclein {
from { background-position: 0 0; }
to { background-position: -5000px 0; }
}
@-moz-keyframes capcirclein {
from { background-position: 0 0; }
to { background-position: -5000px 0; }
}
@keyframes capcirclein {
from { background-position: 0 0; }
to { background-position: -5000px 0; }
}
@-webkit-keyframes capcircleout {
from { background-position: -5000px 0; }
to { background-position: 0px 0; }
}
@-o-keyframes capcircleout {
from { background-position: -5000px 0; }
to { background-position: 0px 0; }
}
@-moz-keyframes capcircleout {
from { background-position: -5000px 0; }
to { background-position: 0px 0; }
}
@keyframes capcircleout {
from { background-position: -5000px 0; }
to { background-position: 0px 0; }
}
#box .caption{
font-family:droid arabic kufi;

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 250px;
height: 250px;
z-index: 2;
}
.burst-circle:hover:before{
font-family:droid arabic kufi;

-webkit-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
transform: scale(1.5,1.5);
}
/* this code made by th3littleprofessor.com ----------------------------------------------- */ [/code]

ثم أحفظ القالب وعندما تدون أى مشاركة وتريد هذا التأثير على صور التدوينة كل ماعليك هو نسخ هذا الكود وتغيير رابط الصورة فقط

[code type="هذا الكود من مدونة البروفيسور الصغير فقط"]




تأثير دائرى


تأثير للصورة

[/code]



Error message : وهذا هو الدرس وأن كان لديكم أى تفسير أرجو كتابة تعليق.

ليست هناك تعليقات:

إرسال تعليق

المتابعون

المشاركات الشائعة

قوالب مميزة

قالب بساطة تكويد : البروفيسور الصغير