كلاسات رائعة css

أهلا وسهلا بك زائرنا الكريم في PBBoard Community Forum، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

: اضافة رد جديد اضافة موضوع جديد

: كلاسات رائعة css

05-07-2012 09:59 مساءً

abdalatif

عضـو مشارك

تاريخ الإنضمام : 08-03-2012

رقم العضوية : 2055

المشاركات : 98

الجنس :

تاريخ الميلاد : 1-9-1991

الدعوات : 1

قوة السمعة : 202

موقعي : زيارة موقعي

PBBoard Version : 2.1.4

العضو غائب الضروف

اليكم اروع كلاسات

كلاس الاول
[frame=2]
كود html

CODE

	 <link href="style.css" rel="stylesheet">

<span class="label">توريري عبداللطيف  </span>



<span class="label label-success">توريري عبداللطيف </span>



<span class="label label-warning">توريري عبداللطيف  </span>



<span class="label label-important">توريري عبداللطيف  </span>



<span class="label label-info">توريري عبداللطيف  </span>



<span class="label label-inverse">توريري عبداللطيف  </span>

كود style.css

CODE



body {

  margin: 0;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-size: 13px;

  line-height: 18px;

  color: #333333;

  background-color: #ffffff;

  

  /* changes for better demo */

  margin: 20px 0 0;

  text-align: center;

}



.label {

  padding: 1px 4px 2px;

  font-size: 10.998px;

  font-weight: bold;

  line-height: 13px;

  color: #ffffff;

  vertical-align: middle;

  white-space: nowrap;

  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

  background-color: #999999;

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  border-radius: 3px;

}

.label:hover {

  color: #ffffff;

  text-decoration: none;

}

.label-important {

  background-color: #b94a48;

}

.label-important:hover {

  background-color: #953b39;

}

.label-warning {

  background-color: #f89406;

}

.label-warning:hover {

  background-color: #c67605;

}

.label-success {

  background-color: #468847;

}

.label-success:hover {

  background-color: #356635;

}

.label-info {

  background-color: #3a87ad;

}

.label-info:hover {

  background-color: #2d6987;

}

.label-inverse {

  background-color: #333333;

}

.label-inverse:hover {

  background-color: #1a1a1a;

}

[/frame]

gff.png تحميل png

مرات التحميل :(5)
الحجم :(4.827) KB

تم تحرير الموضوع بواسطة :abdalatif بتاريخ:05-07-2012 10:01 مساءً

: كلاسات رائعة css

05-07-2012 10:08 مساءً [1]

abdalatif

عضـو مشارك

تاريخ الإنضمام : 08-03-2012

رقم العضوية : 2055

المشاركات : 98

الجنس :

تاريخ الميلاد : 1-9-1991

الدعوات : 1

قوة السمعة : 202

موقعي : زيارة موقعي

PBBoard Version : 2.1.4

العضو غائب الضروف

[frame=9]كود رائع وجدته في احدى مواقع الاجنبية

7idad.css

CODE

body {

    position: relative;

    background: #eee;

}



@font-face {

    font-family: &#39;Collegia&#39;;

    font-style: normal;

    font-weight: normal;

    src: local("Bangers"), url("khat-kitaba/khat-kitaba.otf") format("woff");

}



.forkme {

    display: block;

    position: absolute;

    top: 30px;

    left: -75px;

    background: #FAFAFA;



    background: -webkit-linear-gradient(#FAFAFA,#EAEAEA);

    background: -moz-linear-gradient(#FAFAFA,#EAEAEA);

    background: -o-linear-gradient(#FAFAFA,#EAEAEA);

    background: -ms-linear-gradient(#FAFAFA,#EAEAEA);

    background: linear-gradient(#FAFAFA,#EAEAEA);

    color: black;

    height: 44px;

    width: 250px;

    text-decoration: none;

    text-align: center;

    font-family: "Collegia";

    font-size: 38px;

    line-height: 32px;



    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    transform: rotate(-45deg);

    border-bottom: 1px solid #CACACA;

}



.forkme span {

    display: block;

    text-transform: uppercase;

    position: absolute;

    left: 100px;

    top: 20px;

    font-size: 15px;

}



.forkme:hover {

    color: #2C6EB4;

}

كود html

CODE

 <link href="7idad.css" rel="stylesheet">

<a href="http://dz3d.funpic.org" target="_blank" class="forkme">منتدى<span>ايبو ديزاد</span></a>

هناك ملف خط في مرفقات حمله
[font=Traditional Arabic][/font][/frame]

gff.png تحميل png

مرات التحميل :(5)
الحجم :(12.232) KB

7idad.zip تحميل zip مرات التحميل :(36)
الحجم :(30.129) KB

: كلاسات رائعة css

05-07-2012 10:12 مساءً [2]

abdalatif

عضـو مشارك

تاريخ الإنضمام : 08-03-2012

رقم العضوية : 2055

المشاركات : 98

الجنس :

تاريخ الميلاد : 1-9-1991

الدعوات : 1

قوة السمعة : 202

موقعي : زيارة موقعي

PBBoard Version : 2.1.4

العضو غائب الضروف

اقتبـاس ،، كود اخر رائع
box.css

CODE



body {

    background: #6F7B8B; /* old browsers */

    background: -webkit-linear-gradient(top, #6F7B8B 20%, #8D96A5 58%);

    background: -moz-linear-gradient(top, #6F7B8B 20%, #8D96A5 58%);

    background: -o-linear-gradient(top, #6F7B8B 20%, #8D96A5 58%);

    background: -ms-linear-gradient(top, #6F7B8B 20%, #8D96A5 58%);

    background: linear-gradient(top, #6F7B8B 20%, #8D96A5 58%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#6F7B8B), color-stop(58%,#8D96A5)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#6F7B8B&#39;, endColorstr=&#39;#8D96A5&#39;,GradientType=0 ); /* ie */

}



img {

    height: 200px;

    width: 200px;

    /*border-radius*/

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

}

.container {

    display: block;

    width: 660px;

    height: 440px;

    margin: 30px auto;

}

.scene3D {

    display: block;

    float: left;

    margin: 10px;

    /*border-radius*/

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    /*perspective*/

    -webkit-perspective: 500px;

    -moz-perspective: 500px;

    -ms-perspective: 500px;

    -o-perspective: 500px;

    perspective: 500px;

}

.flip div {

    position: absolute;

    width: 200px;

    height: 200px;

    /*border-radius*/

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    /*backface-visibility*/

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    -o-backface-visibility: hidden;

    backface-visibility: hidden;

}

.flip div:first-child {

    /*border-radius*/

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    background: #333;

    /*transform*/

    -webkit-transform: rotateX(180deg);

    -moz-transform: rotateX(180deg);

    -ms-transform: rotateX(180deg);

    -o-transform: rotateX(180deg);

    transform: rotateX(180deg);

}

.flip div:first-child p {

    color: #FFF;

    text-shadow: 0 0 1px .111;

    padding-top: 50px;

    text-align: center;

}

.flip {

    width: 200px;

    height: 200px;

    /*border-radius*/

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    /*box-shadow*/

    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);

    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);

    box-shadow: 0 0 15px rgba(0,0,0,0.3);

    /*transform*/

    -webkit-transform: rotateX(0deg);

    -moz-transform: rotateX(0deg);

    -ms-transform: rotateX(0deg);

    -o-transform: rotateX(0deg);

    transform: rotateX(0deg);

    /*transition*/

    -webkit-transition: all 1s ease;

    -moz-transition: all 1s ease;

    -o-transition: all 1s ease;

    transition: all 1s ease;

    /*transform-style*/

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    -o-transform-style: preserve-3d;

    transform-style: preserve-3d;

}

.scene3D:hover .flip {

    /*transform*/

    -webkit-transform: rotateX(180deg);

    -moz-transform: rotateX(180deg);

    -ms-transform: rotateX(180deg);

    -o-transform: rotateX(180deg);

    transform: rotateX(180deg);

}

كود html

CODE





	  <link href="box.css" rel="stylesheet">

<div class="container">

    <div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 1st Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_1.png"/>

		  </div>

	   </div>

    </div>

    <div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 2nd Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_2.png"/>

		  </div>

	   </div>

    </div>

    <div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 3rd Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_3.png"/>

		  </div>

	   </div>

    </div>

    <div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 4th Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_4.png"/>

		  </div>

	   </div>

    </div>

    <div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 5th Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_5.png"/>

		  </div>

	   </div>

    </div>

    <div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Real apple...

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_6.png"/>

		  </div>

	   </div>

    </div>

</div>

#########################################""""//////////////////////////////////////////////////////////////////////////

<div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 4th Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_4.png"/>

		  </div>

	   </div>

    </div>

    

    

    <div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 4th Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_4.png"/>

		  </div>

	   </div>

    </div>

    

    <div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 4th Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_4.png"/>

		  </div>

	   </div>

    </div><div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 4th Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_4.png"/>

		  </div>

	   </div>

    </div><div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 4th Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_4.png"/>

		  </div>

	   </div>

    </div><div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 4th Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_4.png"/>

		  </div>

	   </div>

    </div><div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 4th Logo

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_4.png"/>

		  </div>

	   </div>

    </div><div class="scene3D">

	   <div class="flip">

		  <div>

			 <p>

				Apple 4th Logo  

			 </p>

		  </div>

		  <div>

			 <img src="http://lab.web-gate.fr/images/apple/apple_4.png"/>

		  </div>

	   </div>

    </div>

gff.png تحميل png

مرات التحميل :(5)
الحجم :(155.068) KB

تم تحرير المشاركة بواسطة :abdalatif بتاريخ:05-07-2012 10:13 مساءً

سبب التعديل : ارفاق صورة

: كلاسات رائعة css

05-07-2012 10:16 مساءً [3]

abdalatif

عضـو مشارك

تاريخ الإنضمام : 08-03-2012

رقم العضوية : 2055

المشاركات : 98

الجنس :

تاريخ الميلاد : 1-9-1991

الدعوات : 1

قوة السمعة : 202

موقعي : زيارة موقعي

PBBoard Version : 2.1.4

العضو غائب الضروف

كلاس رائع خاص بمنطقة الاقتباس او امنطقة الاكود

كود
hh.css

CODE



pre.code {

    margin:20px 25px;

    border:1px solid;

    border-color:#CDD2D6 #BFC6CB #B3BBC1 #BFC6CB;

    -webkit-border-radius:2px;

    -moz-border-radius:2px;

    border-radius:2px;

    position:relative;

    -webkit-box-shadow:0 1px 1px rgba(0,0,0,.08);

    -moz-box-shadow:0 1px 1px rgba(0,0,0,.08);

    box-shadow:0 1px 1px rgba(0,0,0,.08);

}

pre.code label {

    font-family:sans-serif;

    font-weight:bold;

    font-size:13px;

    color:#4b555c;

    position:absolute;

    left:1px;

    top:16px;

    text-align:center;

    width:60px;

}

pre.code code {

    font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;

    display:block;

    margin:0 0 0 60px;

    padding:15px 16px 14px;

    border-left:1px #E5EAEE solid;

    overflow-x:auto;

    font-size:13px;

    line-height:19px;

    color:#333;    

}

pre.code-css code {

    color:#D84400;

}

pre.code-html code {

    color:#4576D5;

}

كود html

CODE



	  <link href="hh.css" rel="stylesheet">

<pre class=&#39;code code-html&#39;>

    <label>HTML</label>

    <code>&lt;button&gt;Press Me!&lt;/button&gt;</code>

</pre>



<pre class=&#39;code code-css&#39;>

    <label>CSS</label>

    <code>

button {

  width:20px;

  height:28px;

  color:#fff;

  font-size:28px;

  padding:11px 15px;

  border-radius:5px;

  background:#14ADE5;

}

    </code>

</pre>

gff.png تحميل png

مرات التحميل :(5)
الحجم :(14.723) KB

تم تحرير المشاركة بواسطة :abdalatif بتاريخ:05-07-2012 10:17 مساءً

: كلاسات رائعة css

05-07-2012 10:22 مساءً [4]

abdalatif

عضـو مشارك

تاريخ الإنضمام : 08-03-2012

رقم العضوية : 2055

المشاركات : 98

الجنس :

تاريخ الميلاد : 1-9-1991

الدعوات : 1

قوة السمعة : 202

موقعي : زيارة موقعي

PBBoard Version : 2.1.4

العضو غائب الضروف

html

CODE





	  <link href="style.css" rel="stylesheet">

<div id="bg">كتابة ماذا تريد في منطقة ملونة بالوان متعددة</div>

style.css

CODE









	   * {

    margin: 0 auto;

    padding: 0;

}



#bg {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 0;

    background: -webkit-linear-gradient(+55deg, #CCCCFF 30%, #a2d49f 30%, #a2d49f 40%, #c7c12f 40%, #c7c12f 50%, #f26247 50%, #f26247 60%, #330000 60%, #ec2045 70%, #ffeeb0 70% );

    background: -moz-linear-gradient(-55deg, #000099 30%,#333399 30%, #006699 40%, #0000FF 40%, #3399FF 50%,#33CCFF 50%, #f26247 60%, #ec2045 60%, #ec2045 70%, #ffeeb0 70% );

    background: linear-gradient(+55deg, #ffeeb0 30%,#FF6633 30%, #a2d49f 40%, #c7c12f 40%, #c7c12f 50%, #f26247 50%, #f26247 60%, #ec2045 60%, #ec2045 70%, #ffeeb0 70% );

}

gff.png تحميل png

مرات التحميل :(5)
الحجم :(31.197) KB

: كلاسات رائعة css

07-07-2012 07:49 مساءً [5]

: isma3eliano

isma3eliano

مشاهدة الملف الشخصي

البحث عن مواضيع العضوisma3eliano

البحث عن ردود العضوisma3eliano

عضـو ستـار

تاريخ الإنضمام : 03-11-2009

رقم العضوية : 188

المشاركات : 2152

الدولة : مصر Egypt

الجنس :

تاريخ الميلاد : 26-10-1994

الدعوات : 4

قوة السمعة : 5518

موقعي : زيارة موقعي

PBBoard Version : غير محدد; رائع أخي .. شكرًا لك

: كلاسات رائعة css

07-07-2012 11:21 مساءً [6]

: bad_boy

bad_boy

مشاهدة الملف الشخصي

البحث عن مواضيع العضوbad_boy

البحث عن ردود العضوbad_boy

عضـو نشيط

تاريخ الإنضمام : 19-01-2012

رقم العضوية : 1986

المشاركات : 356

الدولة : Egypt

الجنس :

تاريخ الميلاد : 4-4-1994

قوة السمعة : 1193

موقعي : زيارة موقعي

PBBoard Version : 3.0.0; رائع اخى وفى تقدم ان شاء الله

: اضافة رد جديد اضافة موضوع جديد

الكلمات الدلالية

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

« لكل من يعاني توقف المنتدى وProcesses Running | كود رمضاني »

الساعة الآن 04:43 AM