من الضروري ان تقوم بتلخيص وجولة وترتيب التقنيات المراد استخدامها في عملك ليسهل عليك البحث وترتيب الأفكار ولابد ان تلاحظ أنه من الأهميه ان تقوم بإضافة روابط في موقعك
أداة css نقية :
لجعل هذا ممكنا ستحتاج لمثل هذه العلامات :
[/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] <li><a href="#">
<img src="images/02_1s.jpg" alt="gallery thumbnail" />
<span><img src="images/02_1.jpg" alt="gallery image" /></span>
</a>
</li>
[/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]
اضغط هنــــــــــــــا لمشاهدة النتيجه
زر ثلاثي الأبعاد:
<div>
<pre><a href="#"><span>Roll over here</span></a>
[/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]
