قائمة جانبيه أحترافيه بخصائص CSS3 - معدلة




بسم الله الرحمن الرحيم

والصلاة والسلام على خير خلق الله , سيدنا محمد عليه الصلاة واتم التسليم

السلام عليكم ورحمة الله وبركاته .

اليوم اقدم لكم قائمة بأفضل خصائص الـ CSS3 لمتابعين مدونتي فقط :) القائمة من تصميم مدونة حلول بلوجر و انا قمت بتعديلها

القائمة الجانبيه هذه تتميز بخصائص جدأَ رائعه ومن أفضل المميزات انها حصريه وخفيفه جداَ ومنظرها انيق لكل المدونات ولكل الأذواق بأذن الله .



على العموم لن اطيل وللنبداء :

الصورة : 


مثال حي :


الان الكود  :



<div align="center">
<div class="menu-by-7lolblogger">
<ul>
<li><a dir="rtl" href="https://www.blogger.com/blogger.g?blogID=5518574037961670168#">أخبار تقنية</a></li>
<li><a dir="rtl" href="https://www.blogger.com/blogger.g?blogID=5518574037961670168#">أيقونات</a></li>
<li><a dir="rtl" href="https://www.blogger.com/blogger.g?blogID=5518574037961670168#">إضافات بلوجر</a></li>
<li><a dir="rtl" href="https://www.blogger.com/blogger.g?blogID=5518574037961670168#">إضافات للمتصفحات</a></li>
<li><a dir="rtl" href="https://www.blogger.com/blogger.g?blogID=5518574037961670168#">قائمة احترافيه</a></li>
<li><a dir="rtl" href="https://www.blogger.com/blogger.g?blogID=5518574037961670168#">عالم الشروحات</a></li>
<li><a dir="rtl" href="https://www.blogger.com/blogger.g?blogID=5518574037961670168#">تجريب</a></li>
<li><a dir="rtl" href="https://www.blogger.com/blogger.g?blogID=5518574037961670168#">تجريب</a></li>
</ul>
</div>
<style>  /* this is menu by : http://www.7lolblogger.com -- */ .menu-by-7lolblogger ul{width:300px;float:right;display:block;}.menu-by-7lolblogger li{margin: 0;text-align: right;list-style:none;width:48%;float:right;padding:0 2px 0 3px;}.menu-by-7lolblogger li a{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.1em 0 .1em 2.5em;background:#F1F1F1;border:1px solid #DDD;border-radius:3px;color:#444;text-decoration:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:12px tahoma,arial;text-shadow:1px 1px rgba(255, 255, 255, 0.48);}.menu-by-7lolblogger li a:before{content:'#';position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#ffa800;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}.menu-by-7lolblogger li a:after{position:absolute;content:'';border:.5em solid rgba(0, 0, 0, 0);left:-1em;top:50%;margin-top:-.5em;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:12px tahoma,arial;text-shadow:1px 1px rgba(255, 255, 255, 0.53);}.menu-by-7lolblogger li a:hover:after{left:-.5em;border-left-color:#ffa800;} </style>



هل أعجبك الموضوع ؟

ليست هناك تعليقات:

إرسال تعليق

جميع الحقوق محفوظة DZ PC MAKERS ©2016-2017 | ، نقل بدون تصريح ممنوع . Privacy-Policy| أنضم ألى فريق التدوين