كيف تصنع شريط اد وات مع فقاعات التلميح المتحركة بتأثيرات css3

بسم الله السلام عليكم





ساقدم اضافة باحدى تقنيات css 3

وعلى ماعتقد انا اول من يستخدم هذه التقنية في مدونات بلوجر العربية والله اعلم












اولا قم بمعاينة الاضافة من هنـــا



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; }

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



وفي المرات القادمة ساطرح اشكال اخرى مميزة لهذه التقنية

ايقونات الايضافة بواسطة مدونة الريشة







لتحميل سورس الاضافة اضغط هنا

الباب مفتوح لاستفساراتكم وتعليقاتكم