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

اليكم اروع كلاسات كلاس الاول كود html [code]CSAmbHQ7bGluayBocmVmPSZxdW90O3N0eWxlLmNzcyZxdW90OyByZWw9JnF1b3Q7c3R5bGVza ..


موضوع مغلق


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

كلاس الاول

كود html

	 <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
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;
}
 
  gff.png   تحميل png gff.png مرات التحميل :(5)
الحجم :(4.827) KB
 



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


05-07-2012 10:08 مساء
مشاهدة مشاركة منفردة [1]
abdalatif
عضـو مشارك
rating
العضو غائب الضروف
معلومات الكاتب ▼
تاريخ الإنضمام : 08-03-2012
رقم العضوية : 2055
المشاركات : 98
الجنس : ذكر
تاريخ الميلاد : 1-9-1991
الدعوات : 1
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 202
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif كلاسات رائعة css
كود رائع وجدته في احدى مواقع الاجنبية

7idad.css
body {
    position: relative;
    background: #eee;
}

@font-face {
    font-family: 'Collegia';
    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
 <link href="7idad.css" rel="stylesheet">
<a href="http://dz3d.funpic.org" target="_blank" class="forkme">منتدى<span>ايبو ديزاد</span></a>



هناك ملف خط في مرفقات حمله
 
  gff.png   تحميل png gff.png مرات التحميل :(5)
الحجم :(12.232) KB
 
  7idad.zip   تحميل zip مرات التحميل :(36)
الحجم :(30.129) KB


05-07-2012 10:12 مساء
مشاهدة مشاركة منفردة [2]
abdalatif
عضـو مشارك
rating
العضو غائب الضروف
معلومات الكاتب ▼
تاريخ الإنضمام : 08-03-2012
رقم العضوية : 2055
المشاركات : 98
الجنس : ذكر
تاريخ الميلاد : 1-9-1991
الدعوات : 1
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 202
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/upload/awt6.gif كلاسات رائعة css
اقتبـاس ،،
كود اخر رائع
box.css
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='#6F7B8B', endColorstr='#8D96A5',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

	  <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 gff.png مرات التحميل :(5)
الحجم :(155.068) KB
 



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

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


05-07-2012 10:16 مساء
مشاهدة مشاركة منفردة [3]
abdalatif
عضـو مشارك
rating
العضو غائب الضروف
معلومات الكاتب ▼
تاريخ الإنضمام : 08-03-2012
رقم العضوية : 2055
المشاركات : 98
الجنس : ذكر
تاريخ الميلاد : 1-9-1991
الدعوات : 1
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 202
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif كلاسات رائعة css
كلاس رائع خاص بمنطقة الاقتباس او امنطقة الاكود

كود
hh.css
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


	  <link href="hh.css" rel="stylesheet">
<pre class='code code-html'>
    <label>HTML</label>
    <code>&lt;button&gt;Press Me!&lt;/button&gt;</code>
</pre>

<pre class='code code-css'>
    <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 gff.png مرات التحميل :(5)
الحجم :(14.723) KB
 



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


05-07-2012 10:22 مساء
مشاهدة مشاركة منفردة [4]
abdalatif
عضـو مشارك
rating
العضو غائب الضروف
معلومات الكاتب ▼
تاريخ الإنضمام : 08-03-2012
رقم العضوية : 2055
المشاركات : 98
الجنس : ذكر
تاريخ الميلاد : 1-9-1991
الدعوات : 1
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 202
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif كلاسات رائعة css
html


	  <link href="style.css" rel="stylesheet">
<div id="bg">كتابة ماذا تريد في منطقة ملونة بالوان متعددة</div>




style.css



	   * {
    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 gff.png مرات التحميل :(5)
الحجم :(31.197) KB
 


07-07-2012 07:49 مساء
مشاهدة مشاركة منفردة [5]
isma3eliano
عضـو ستـار
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 03-11-2009
رقم العضوية : 188
المشاركات : 2152
الدولة : مصر Egypt
الجنس : ذكر
تاريخ الميلاد : 26-10-1994
الدعوات : 4
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 5518
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif كلاسات رائعة css
رائع أخي .. شكرًا لك

07-07-2012 11:21 مساء
مشاهدة مشاركة منفردة [6]
bad_boy
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 19-01-2012
رقم العضوية : 1986
المشاركات : 356
الدولة : Egypt
الجنس : ذكر
تاريخ الميلاد : 4-4-1994
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 1193
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
look/images/icons/i1.gif كلاسات رائعة css
رائع اخى وفى تقدم ان شاء الله


المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
شرح طريقة إضافة الكلاسات وتعديلها وحذفها في ستايل شييت add / edit / remove class in CSS Mr King
0 461 Mr King
إستفسار عن أسماء كلاسات، matree
2 312 matree
شرح كلاسات الـ css للنسخة [2.1.4] كنتارو
29 12090 matree
كيف أجعل كلاسات ال row عبارة عن صور alshweb
2 213 alshweb
[مجابه] اين قالب هذا الجزء وكلاساته jeiro33
4 323 ميدو المصري

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







الساعة الآن 11:19 مساء