ملامح جديده للينكات في css3

مدهش — Sat, 07 Jan 2012 19:20:45 +0000

من الضروري ان تقوم بتلخيص وجولة وترتيب التقنيات المراد استخدامها في عملك ليسهل عليك البحث وترتيب الأفكار ولابد ان تلاحظ أنه من الأهميه ان تقوم بإضافة روابط في موقعك

أداة css نقية :
لجعل هذا ممكنا ستحتاج لمثل هذه العلامات :

[html] Title Tooltip
[/html]

عليك أن تقوم بإضافة ملف css مثل هذا الملف:

[html] a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}
[/html]

اضغط هنـــــــا لمشاهده التنسيق

معرض صورنقية بـ Css

في هذه الخدعة سوف نعرض صور كبيرة تتدحرج تحت مصغرات.

وهذا هو هيكل الـHTML :

[html]

[/html]

وهذا هو الستايل css :

[html] ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
width:400px;
height:375px;
position:relative;
background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%;
}
ul#gallery li{
float:left;
display:inline;
margin-top:300px;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a:hover span{
position:absolute;
width:400px;
height:300px;
float:left;
top:0;
left:0;
display:block;
}
[/html]

اضغط هنــــــــــــــا لمشاهدة النتيجه

زر ثلاثي الأبعاد:

سوف نقوم بإنشاء زر ثلاثي الأبعد وسوف نقوم بتغيير جمه وعرضه وارتفاعه ليظهر بشكل 3d المراد عمله

كود الـ html :

[html]

Roll over here

[/html]
وهذا هو الستايل لـ css:

[html]
a.button{

	float:left;

	font-size:110%;

	font-weight:bold;

	border-top:1px solid #999;

	border-left:1px solid #999;

	border-right:1px solid #333;

	border-bottom:1px solid #333;

	color:#333;

	width:auto;

	}

a.button:hover{

	border-top:1px solid #333;

	border-left:1px solid #333;

	border-right:1px solid #999;

	border-bottom:1px solid #999;

	color:#333;

	}

a.button span{

	background:#d4d0c8 url(images/bg_btn.gif) repeat-x;

	float:left;

	line-height:24px;

	height:24px;

	padding:0 10px;

	border-right:1px solid #777;

	border-bottom:1px solid #777;

	}

a.button:hover span{

	border:none;

	border-top:1px solid #777;

	border-left:1px solid #777;

	background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;

	cursor:pointer;

	}

[/html]

فواصل » ملامح،جديده،في،سي،اس،اس،ثري،css3،برمجه،دروس،فواصل،دوره،فيديو

ملامح جديده للينكات في css3

معرض صورنقية بـ Css

زر ثلاثي الأبعاد: