5 تأتير css على سحابة تسميات

الاثنين، 27 أغسطس 2012
اداة سحابة التسميات عبارة عن اداة بها اقسام المدونة عى شكل غيوم و هي مفيدة للزوار تساعدهم للوصول الى الاقسام بطريقة سهله وسوف نشرح كيفية اضافة تأتير css على سحابة

ولتركيب الاضافة من لوحة تحكم مدونتك توجه إلى صفحة "التصميم" ثم "تحرير HTML" و قبل أي تعديل رجاء احفظ نسخة احتياطية من قالب مدونتك على جهازك

ابحث عن   ]]></b:skin>  و قبله أي فوقه مباشرة نلصق الكود الآتي و نحفظ القال:



.label-size { 
    float: left; 
    margin: 0 0 7px 20px; 
    position: relative; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 0.75em; 
    font-weight: bold; 
    text-decoration: none; 
    color: #996633; 
    text-shadow: 0px 1px 0px rgba(255,255,255,.4); 
    padding: 0.417em 0.417em 0.417em 0.917em; 
    border-top: 1px solid #d99d38; 
    border-right: 1px solid #d99d38; 
    border-bottom: 1px solid #d99d38; 
    -webkit-border-radius: 0 0.25em 0.25em 0; 
    -moz-border-radius: 0 0.25em 0.25em 0; 
    border-radius: 0 0.25em 0.25em 0; 
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); 
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); 
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); 
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47'); 
    -webkit-box-shadow: inset 0 1px 0 #faeaba, 
        0 1px 1px rgba(0,0,0,.1); 
    -moz-box-shadow: inset 0 1px 0 #faeaba, 
        0 1px 1px rgba(0,0,0,.1); 
    box-shadow: inset 0 1px 0 #faeaba, 
        0 1px 1px rgba(0,0,0,.1); 
    z-index: 1; 

.label-size:before { 
    content: ''; 
    width: 1.30em; 
    height: 1.39em; 
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); 
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); 
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); 
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); 
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47'); 
    position: absolute; 
    left: -0.69em; 
    top: .2em; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    border-left: 1px solid #d99d38; 
    border-bottom: 1px solid #d99d38; 
    -webkit-border-radius: 0 0 0 0.25em; 
    -moz-border-radius: 0 0 0 0.25em; 
    border-radius: 0 0 0 0.25em; 
    z-index: 1; 

.label-size:after { 
    content: ''; 
    width: 0.5em; 
    height: 0.5em; 
    background: #fff; 
    -webkit-border-radius: 4.167em; 
    -moz-border-radius: 4.167em; 
    border-radius: 4.167em; 
    border: 1px solid #d99d38; 
    -webkit-box-shadow: 0 1px 0 #faeaba; 
    -moz-box-shadow: 0 1px 0 #faeaba; 
    box-shadow: 0 1px 0 #faeaba; 
    position: absolute; 
    top: 0.667em; 
    left: -0.083em; 
    z-index: 9999; 

#Label1 { 
    height: 210px; 

.label-size:hover { 
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); 
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); 
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); 
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); 
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c'); 
    border-color: #e1b160; 

.label-size:hover:before { 
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); 
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); 
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); 
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); 
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c'); 
    border-color: #e1b160; 
}
مصادر 1
كاتب الموضوع

بقلم يونس

يونس من بلاد المغرب عمري 20 سنة طالب و أهتم حاليا بعلوم التصميم وفوتوشوب كلك كوريل و الستيرتور وافتر افكت وجميع برامج التصميم وانا اسعي دائما للاحتراف ومن لا يسعى الى الاحتراف

5 تعليق على تأتير css على سحابة تسميات

أضف تعليق

رجاء تجنب استعمال التعليقات لبث روابط إعلانية. كذلك ننبه إلى ضرورة الالتزام بصلب الموضوع و عدم الخروج عليه. تدكر ( مَا يَلْفِظُ مِنْ قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ))

القائمة البريدية

اضف ايميلك ليصلك جديد المدونة :

اعلانات

مدونة تكنو
مدونة فياض
memolia
مدونة ماروتك

احصائيات المدونة

المتابعون

اعلانات