قائمة عمودية باستخدام اكواد css3

1-القائمة ستكون كما يلي

كود:
<ul class="tt-wrapper"> <li><a class="tt-google plus" href="#"><span>قوقل بلس</span></a></li> <li><a class="tt-twitter" href="#"><span>تويتر</span></a></li> <li><a class="tt-youcef-bijed" href="#"><span>مدونة بجاد</span></a></li> <li><a class="tt-facebook" href="#"><span>فيس بوك</span></a></li> <li><a class="tt- rss" href="#"><span>خلاصات rss</span></a></li> <li><a class="tt-youtube" href="#"><span>يوتيوب</span></a></li> </ul> 

2-قائمة العناصر العائمة ستكون الى جهة اليسار وسيكون النمط كالتالي


كود:
.tt-wrapper li a{ display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; background: transparent url(http://1.bp.blogspot.com/-TL6CzyoaG2...nman_icons.png) no-repeat top left; position: relative; } 
3-كما يسكون لكل مرساة موقف مختلف عن خلفية صورة الخلفية

كود:
.tt-wrapper li .tt-google plus{ background-position: 0px 0px; } .tt-wrapper li .tt-twitter{ background-position: -68px 0px; } .tt-wrapper li .tt-youcef-bijed{ background-position: -136px 0px; } .tt-wrapper li .tt-facebook{ background-position: -204px 0px; } .tt-wrapper li .tt-rss{ background-position: -272px 0px; } .tt-wrapper li .tt-youtube{ background-position: -340px 0px; }; } 

4-الان نعمل على تاثير الظهور من أعلى 


كود:
.tt-wrapper li a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: 'Alegreya SC', Georgia, serif; font-weight: 400; font-style: italic; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out; } 
5-الان نستخدم اسلوب العناصر الزائفة ونعمل ايضا على شفافية الحدود

اقتباس:
.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
} 

-6الان نقوم بابعاد العنصر المستعار عن طريق البكسل وسنجعله ابيض مثل حدود التلميحات تماما

كود:
.tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #fff; } 

7-ناتي الى تاثير الهوفر وسنجعل الSPAN يمتد من اعلى ويتلاشى في :

كود:
.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; } 

وبهذا نحصل على هذه الاضافة الرائعة انا في هذا النموذج جعلت الاضافة شريط للمفضلات الاجتماعية وليس بالضرورة تعمل مثلي تستطيع ان تغير الايقونات لتجعلها شريط ادوات او قائمة تبويب لاعلى الصفحة