آخر المقالات

الجمعة، 18 سبتمبر، 2015

قائمة Css3 على شكل شرائح بيتزا لمدونات البلوجر
قائمة Css3 على شكل شرائح بيتزا لمدونات البلوجر

قائمة Css3 على شكل شرائح بيتزا لمدونات البلوجر


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

الان للشرح:

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

  • أدخل على بلوجر ثم قالب ثم تحرير html ثم أضغط ctrl +f ثم أبحث عن هذه الكلمة 
  • ثم أنسخ هذا الكود فوقها
[code type="هذا الكود من مدونة البروفيسور الصغير"]html{
background: url(images/background.jpg);
}
#main{
margin: 0 auto;
width:1150px;
}
.fullSize{
position:relative;
margin-left: -100px;
}
.firstImage{
background: url(images/colors.png);
width: 400px;
height: 400px;
position: absolute;
right: 100px;
top: 50px;
}
.container1{
height: 500px;
}
.mediumSize{
position:absolute;
left: 0;
top: 0;
margin-left: -80px;
}
.secondImage{
background: url(images/sizes.png);
width: 400px;
height: 400px;
position: absolute;
right: 100px;

}
.container2{
position: relative;
height: 400px;
}
.smallSize{
position:absolute;
top:100px;
left: 300px;
}
.container3{
position: relative;
}
.pizza{
background: url(images/pizza.png);
height: 50px;
}
.pizzaFull{
position:absolute;
left: 0;
top: 0;
margin-left: -80px;
}
.pizzaMedium{
position:absolute;
top:100px;
left: 600px;
}
/* ==== ful size blue === */
#img1{
position: absolute;
top:51px;
left:350px;
}
#img2{
position: absolute;
top:100px;
left:349px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img2:hover{
left:390px;
top:82px;
}
#img3{
position: absolute;
top:270px;
left:350px;
}
#img4{
position: absolute;
top:270px;
left:350px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img4:hover{
left:361px;
top:300px;
}
#img5{
position: absolute;
top:270px;
left:179px;
}
#img6{
position: absolute;
top:270px;
left:109px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img6:hover{
top:280px;
left:80px;
}
#img7{
position: absolute;
top:108px;
left:141px;
}
#img8{
position: absolute;
top:43px;
left:188px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img8:hover{
top:13px;
left:176px;
}
#center{
position: absolute;
width:209px;
height:209px;
top:169px;
left:244px;

-webkit-animation:center_circle 9s linear infinite;
-moz-animation:center_circle 9s linear infinite;
-o-animation:center_circle 9s linear infinite;
animation:center_circle 9s linear infinite;

-webkit-animation-delay:4000ms;
-moz-animation-delay:4000ms;
-o-animation-delay:4000ms;
animation-delay:4000ms;
}

@keyframes center_circle
{
0% { transform:rotate(0); }
25% { transform:rotate(360deg); }
100% { transform:rotate(360deg); }
}
@-webkit-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-o-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
/* ==== medium size yellow === */
#img1M{
position: absolute;
top:34px;
left:233px;
}

#img2M{
position: absolute;
top:66px;
left:232px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img2M:hover{
left:260px;
top:55px;
}
#img3M{
position: absolute;
top:179px;
left:232px;
}

#img4M{
position: absolute;
top:180px;
left:234px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img4M:hover{
left:242px;
top:200px;
}
#img5M{
position: absolute;
top:180px;
left:120px;
}
#img6M{
position: absolute;
top:180px;
left:74px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img6M:hover{
top:188px;
left:53px;
}
#img7M{
position: absolute;
top:72px;
left:94px;
}

#img8M{
position: absolute;
top:28px;
left:125px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img8M:hover{
top:8px;
left:117px;
}
#centerM{
position: absolute;
width:135px;
height:135px;
top:112px;
left:162px;

-webkit-animation:center_circle 9s linear infinite;
-moz-animation:center_circle 9s linear infinite;
-o-animation:center_circle 9s linear infinite;
animation:center_circle 9s linear infinite;

-webkit-animation-delay:4000ms;
-moz-animation-delay:4000ms;
-o-animation-delay:4000ms;
animation-delay:4000ms;
}

@keyframes center_circle
{
0% { transform:rotate(0); }
25% { transform:rotate(360deg); }
100% { transform:rotate(360deg); }
}
@-webkit-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-o-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
/* ==== small size white === */
#img1S{
position: absolute;
top:17px;
left:116px;
}
#img2S{
position: absolute;
top:33px;
left:116px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img2S:hover{
left:130px;
top:27px;
}
#img3S{
position: absolute;
top:90px;
left:116px;
}

#img4S{
position: absolute;
top:90px;
left:116px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img4S:hover{
left:120px;
top:100px;
}
#img5S{
position: absolute;
top:90px;
left:59px;
}
#img6S{
position: absolute;
top:90px;
left:36px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img6S:hover{
top:93px;
left:26px;
}
#img7S{
position: absolute;
top:36px;
left:47px;
}
#img8S{
position: absolute;
top:14px;
left:62px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img8S:hover{
top:4px;
left:58px;
}
#centerS{
position: absolute;
width:70px;
height:70px;
top:56px;
left:81px;

-webkit-animation:center_circle 9s linear infinite;
-moz-animation:center_circle 9s linear infinite;
-o-animation:center_circle 9s linear infinite;
animation:center_circle 9s linear infinite;

-webkit-animation-delay:4000ms;
-moz-animation-delay:4000ms;
-o-animation-delay:4000ms;
animation-delay:4000ms;
}

@keyframes center_circle
{
0% { transform:rotate(0); }
25% { transform:rotate(360deg); }
100% { transform:rotate(360deg); }
}
@-webkit-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-o-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
/* ==== pizza full size === */
#img1PF{
position: absolute;
top:59px;
left:350px;
}
#img2PF{
position: absolute;
top:130px;
left:350px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img2PF:hover{
left:395px;
top:112px;
}
#img3PF{
position: absolute;
top:300px;
left:350px;
}
#img4PF{
position: absolute;
top:300px;
left:350px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img4PF:hover{
left:368px;
top:345px;
}
#img5PF{
position: absolute;
top:300px;
left:180px;
}
#img6PF{
position: absolute;
top:300px;
left:109px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img6PF:hover{
top:318px;
left:66px;
}
#img7PF{
position: absolute;
top:130px;
left:109px;
}
#img8PF{
position: absolute;
top:59px;
left:181px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img8PF:hover{
top:14px;
left:163px;
}
#centerPF{
position: absolute;
width:209px;
height:209px;
top:199px;
left:244px;

-webkit-animation:center_circle 9s linear infinite;
-moz-animation:center_circle 9s linear infinite;
-o-animation:center_circle 9s linear infinite;
animation:center_circle 9s linear infinite;

-webkit-animation-delay:4000ms;
-moz-animation-delay:4000ms;
-o-animation-delay:4000ms;
animation-delay:4000ms;
}

@keyframes center_circle
{
0% { transform:rotate(0); }
25% { transform:rotate(360deg); }
100% { transform:rotate(360deg); }
}
@-webkit-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-o-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
/* ==== pizza medium size === */
#img1PM{
position: absolute;
top:39px;
left:233px;
}

#img2PM{
position: absolute;
top:86px;
left:233px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img2PM:hover{
left:263px;
top:75px;
}
#img3PM{
position: absolute;
top:199px;
left:233px;
}

#img4PM{
position: absolute;
top:200px;
left:234px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img4PM:hover{
left:245px;
top:230px;
}
#img5PM{
position: absolute;
top:200px;
left:121px;
}
#img6PM{
position: absolute;
top:199px;
left:74px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img6PM:hover{
top:210px;
left:44px;
}
#img7PM{
position: absolute;
top:86px;
left:74px;
}

#img8PM{
position: absolute;
top:39px;
left:121px;
-webkit-transition: top 0.5s, left 0.5s ease-out;
-moz-transition: top 0.5s, left 0.5s ease-out;
-o-transition: top 0.5s, left 0.5s ease-out;
transition: top 0.5s, left 0.5s ease-out;
}
#img8PM:hover{
top:9px;
left:110px;
}
#centerPM{
position: absolute;
width:135px;
height:135px;
top:132px;
left:162px;

-webkit-animation:center_circle 9s linear infinite;
-moz-animation:center_circle 9s linear infinite;
-o-animation:center_circle 9s linear infinite;
animation:center_circle 9s linear infinite;

-webkit-animation-delay:4000ms;
-moz-animation-delay:4000ms;
-o-animation-delay:4000ms;
animation-delay:4000ms;
}

@keyframes center_circle
{
0% { transform:rotate(0); }
25% { transform:rotate(360deg); }
100% { transform:rotate(360deg); }
}
@-webkit-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-o-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes center_circle
{
0% {-webkit-transform:rotate(0);}
25% {-webkit-transform:rotate(360deg);}
100% {-webkit-transform:rotate(360deg);}
}
[/code]

ثم أحفظ القالب وأذهب الى التخطيط ثم أختار المكان التى تريد فيه الاضافة ثم أختار تحرير ثم

HTML/JavaScriptHTML/JavaScriptإضافة

ثم أنسخ هذا الكود وألصقه فيها :


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

contact


about


home


info


[/code]


ثم أحفظه وأذهب الى المدونة و تمتع بالاضافة

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

إرسال تعليق

المتابعون

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

قوالب مميزة

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