طلب حول اعجاب بمواضيع

طلب حول اعجاب بمواضيع كنت اتصفح في مواقع التي تصمم ب css + html5 فوجدت هذا الكود الرائع اتمنى ان تغيرو فيه ليتلائمة مع ..


موضوع مغلق


04-07-2012 06:32 مساء
abdalatif
عضـو مشارك
rating
العضو غائب الضروف
معلومات الكاتب ▼
تاريخ الإنضمام : 08-03-2012
رقم العضوية : 2055
المشاركات : 98
الجنس : ذكر
تاريخ الميلاد : 1-9-1991
الدعوات : 1
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 202
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
طلب حول اعجاب بمواضيع

كنت اتصفح في مواقع التي تصمم ب css + html5 فوجدت هذا الكود الرائع
اتمنى ان تغيرو فيه ليتلائمة مع برمجة pbboard

اكواد

****like.php


	  <link href="like.css" rel="stylesheet">
<div id="container">
    <div id="button1">
	   <input type="checkbox" id="check"></input><label id="label" for="check"><span class="opacity">اشكر كاتب الموضوع</span><span class="thanks">شكرته بفعل</span></label>
	   <div class="light3"></div>
	   <div id="arrow">
		  <p class="arrow-before"></p>
		  <p class="arrow-after"></p>
		  <div class="light"></div>
	   </div>
	   <div id="hover"> 
	   <div id="img">
	   <p class="img-before"></p>
	   <p class="img-after"></p>
		  <span> +1</span>
		  <div class="light2"></div>
	   </div>
	   </div>
    </div>








****like.css خاص بستايل




*{
margin: 0;
padding: 0
}

#container {
width: 150px;
margin: 0 auto;
position: relative;
}

#button1{
width: 150px;
height: 30px;
}

input[type=checkbox]{
visibility: hidden;
position: absolute;
}

label{
display: block;
width: 150px;
height: 30px;
margin: 20px auto;
background-color: red;
text-align: center;
border-radius: 0 4px 4px 0;
position: relative;
background-image: -webkit-linear-gradient(#991010, #830808);
background-image: -moz-linear-gradient(#991010, #830808);
background-image: -o-linear-gradient(#991010, #830808);
background-image: -ms-linear-gradient(#991010, #830808);
background-image: linear-gradient(#991010, #830808);
box-shadow: 0 1px 2px #727272;
cursor: pointer;
}

.light, .light2, .light3{
top:1px;
height: 1px;
position: absolute;
width: 100%;
background-color:black;
background: -webkit-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
    background: -moz-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
    background: -ms-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
    background: -o-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
    background: linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
}

.light3{
width: 150px;
left: -2px;
}

span{
line-height: 30px;
color: white;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}

.thanks{
position: absolute;
top: 0;
left: 151px;
visibility:hidden;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}

#arrow{
background: black;
top: 0px;
left: -31px;
width: 30px;
position: absolute;
height: 30px;
border-radius: 4px 0 0 4px;
cursor: pointer;
background-image: -webkit-linear-gradient(#3d3d3d, #202020);
background-image: -moz-linear-gradient(#3d3d3d, #202020);
background-image: -o-linear-gradient(#3d3d3d, #202020);
background-image: -ms-linear-gradient(#3d3d3d, #202020);
background-image: linear-gradient(#3d3d3d, #202020);
box-shadow: 0 1px 2px #727272;
transition: all .4s  ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s  ease-in-out;
-o-transition: all .4s  ease-in-out;
-ms-transition: all .4s  ease-in-out;
}

#arrow .arrow-after{
content: "";
position: absolute;
top: 5px;
left: 13px;
width: 8px;
height: 10px;
background-color: white;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transition: all .4s ease-in-out;
-moz-transition: all .4s  ease-in-out;
-webkit-transition: all .4s  ease-in-out;
-o-transition: all .4s  ease-in-out;
-ms-transition: all .4s  ease-in-out;
-moz-transform-origin: bottom;
-webkit-transform-origin: bottom;
-o-transform-origin: bottom;
-ms-transform-origin: bottom;
}

#arrow .arrow-before{
content:"";
position: absolute;
top: 15px;
left: 10px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 8px solid white;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transition: all .4s  ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s  ease-in-out;
-o-transition: all .4s  ease-in-out;
-ms-transition: all .4s  ease-in-out;
-moz-transform-origin: top;
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
}

#button1:hover #arrow .arrow-before, #button1:hover #arrow  .arrow-after, input[type=checkbox]:checked~#arrow .arrow-before, input[type=checkbox]:checked~#arrow  .arrow-after{
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
left: 11px;
top:6px
}

#button1:hover #arrow .arrow-before, input[type=checkbox]:checked~#arrow .arrow-before{
left: 8px;
top: 16px;
}

#hover{
width: 70px;
height:0;
position: absolute;
top:30px;
left: 42px;
z-index: -1;
background-image: -moz-linear-gradient(#202020, #3d3d3d);
background-image: -webkit-linear-gradient(#202020, #3d3d3d);
background-image: -o-linear-gradient(#202020, #3d3d3d);
background-image: -ms-linear-gradient(#202020, #3d3d3d);
background-image: linear-gradient(#202020, #3d3d3d);
box-shadow: inset 0 1px 1px #1c1c1c, 0 1px 1px #6f6f6f;
border-radius: 0 0px 4px 4px;
transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
}

.light2{
top:19px;
width: 45px;
}

.opacity{
position: absolute;
left: 25px;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}

#hover span{
position: absolute;
top: -8px;
left: 20px;
color: white;
}

#img .img-before{
border-radius: 20px;
content:"";
height: 5px;
position: absolute;
left: 5px;
top: 6px;
width: 2px;
background:black;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#img .img-after{
border-radius: 20px;
content:"";
height: 7px;
left: 8px;
top:4px;
width: 2px;
position: absolute;
background-color: black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

#img{
border-radius: 100%;
height: 15px;
width: 15px;
position: absolute;
top: -20px;
left: 12px;
background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #c7c7c7, #fff 90%);
background-image:    -moz-radial-gradient(50% 50%, ellipse closest-side, #c7c7c7, #fff 90%);
background-image:	-ms-radial-gradient(50% 50%, ellipse closest-side, #c7c7c7, #fff 90%);
background-image:	 -o-radial-gradient(50% 50%, ellipse closest-side, #c7c7c7, #fff 90%);
background-image:	    radial-gradient(50% 50%, ellipse closest-side, #c7c7c7, #fff 90%);
box-shadow: inset 0 1px 2px #575757;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}

input[type=checkbox]:checked~#hover{
height:25px;
}

input[type=checkbox]:checked~#hover #img {
top: 5px;
}

input[type=checkbox]:checked~#label .opacity{
left: -100px;
visibility:hidden;
}

input[type=checkbox]:checked~#label .thanks{
visibility: visible;
left: 48px;
}







رابط المعاينة


http://3ra.be/WCfIK
 
  Sans titre.png   تحميل png Sans titre.png مرات التحميل :(2)
الحجم :(12.4) KB
 
  les stle ta3 css.zip   تحميل zip مرات التحميل :(27)
الحجم :(1.816) KB



تم تحرير الموضوع بواسطة :abdalatif
بتاريخ:04-07-2012 06:35 مساء

سبب التعديل : نسيت رابط معاينة


10-08-2012 06:58 صباحا
مشاهدة مشاركة منفردة [1]
madahost.com
عضـو مشارك
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 09-08-2012
رقم العضوية : 2363
المشاركات : 24
الدولة : سورية
الجنس : ذكر
تاريخ الميلاد : 27-10-1988
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 116
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif طلب حول اعجاب بمواضيع
ياريت تصبح اضافة
المشكلة ليس لدي خبرة في منتديات pbboard
ياريت اي شخص يعملها اضافها ورح نكون من الشاكرين له yes


المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
ملحق الاعجاب للمواضيع والمشاركات الإصدار 1.2 للنسخة 3.0.2 PBBoard Soliman
3 414 Dzkhalwi
ملحق الاعجاب بالمشاركات المنبه [Like_v1.1] للجيل الثالث عبد العزيز
43 5599 Soliman
ملحق الاعجاب الشامل لPBBoard الجيل الثالث Dragon_for_ever
12 1740 mohamedelking1997
هل هناك هاك اعجاب؟ سناء
2 222 سناء
تعديل علي كود spoiler وهك الاعجاب ziadmasry
3 341 ziadmasry

الكلمات الدلالية
لا يوجد كلمات دلالية ..







الساعة الآن 01:12 صباحا