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

منتدى شروحات ودروس منتديات PBBoard

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

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

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

abdalatif

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

كلاس الاول
[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]

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

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

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

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

abdalatif

[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

اقتبـاس ،، كود اخر رائع
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=&amp;#39;#6F7B8B&amp;#39;, endColorstr=&amp;#39;#8D96A5&amp;#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>

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

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

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

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

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

abdalatif

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

كود
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=&amp;#39;code code-html&amp;#39;>
    <label>HTML</label>
    [code]&amp;lt;button&amp;gt;Press Me!&amp;lt;/button&amp;gt;

</pre>

[p]
<label>CSS</label>

CODE


button {
  width:20px;
  height:28px;
  color:#fff;
  font-size:28px;
  padding:11px 15px;
  border-radius:5px;
  background:#14ADE5;
}

</pre>[/code]

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

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

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

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

abdalatif

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

رائع أخي .. شكرًا لك

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

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

bad_boy

رائع اخى وفى تقدم ان شاء الله

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

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

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

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

الساعة الآن 10:45 AM