بسم الله الرحمن الرحيم اهلا بكم اعزائى متابعى البروفيسور الصغير فى هذا الدس لقد وجد لكم أضافة رائعة هى قائمة css على شكل بيتزا إضافة رائعة جدا وسوف تعجبكم.
الان للشرح:
- أدخل على بلوجر ثم قالب ثم تحرير html ثم أضغط ctrl +f ثم أبحث عن هذه الكلمة
ثم أنسخ هذا الكود فوقها
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/JavaScript |
ثم أنسخ هذا الكود وألصقه فيها :
[code type="هذ الكود من مدونة البروفيسور الصغير"]
[/code]
تعليقات
إرسال تعليق