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

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

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

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

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

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

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

.tt-wrapper li a{
    display: block;
    width: 68px;
    height: 70px;
    margin: 0 2px;
    outline: none;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-wyyqIZxavqXjVLqW5Mqu0eQUaMtD9mIbTrrLUC2kuB3yq2R6g8s46VEd8X8Q0NeisrNc3PWZKtU1yWcIRS2wFIis_5RCnfdGuQP5Nyr1cKmlKsGvtHGmU_0zbSM6c08Z9nNz3xEwks/s1600/_gunman_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;
}

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

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

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

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

المدونة مفتوحة لاستفساراتكم وتعليقاتكم

إشترك لتحصل على جديد المواضيع

يوسف بجاد

مدون عربي مهتم بالتقنية الحديثة وتطوير الويب مهتم بشكل خاص بمنصة بلوجر واجيد الى حد ما التعامل مع css.html.jquery

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

إشترك لتحصل على جديد المواضيع

يوسف بجاد

شارك بتعليق

3 عدد التعليقات