تحريك القوائم بالوان الجوابية color lists

عدد المشاهدات الان

 البحث عن

</head>

فوقه

<style>

.module h2 { 

  background-color: #D5D5D5;

  border-radius: 20px 0 0 20px;

  color: #FFFFFF;

  font-family: Verdana;

  font-size: 14px;

  line-height: 32px;

  margin: 0;

  padding: 0 0 0 20px;

  text-shadow: 2px 1px 1px #222;

}

.module h2 a { 

    border-left: 5px solid #ffffff;

    color: #101921;

    float: right;

    font-size: 14px;

    text-decoration: none;

    text-shadow: none;

    padding: 0 10px;

    position: relative;

   -moz-transition: padding 0.1s linear;

   -webkit-transition: padding 0.1s linear;

   -ms-transition: padding 0.1s linear;

   -o-transition: padding 0.1s linear;

}

.module h2 a:hover { 

  padding: 0 32px;

}

.module h2 a:before, .module h2 a:after {

    content: &quot;&quot;;

    height: 0;

    position: absolute;

    top: 50%;

    width: 0;

}

.module h2 a:before {

    border-bottom: 8px solid transparent;

    border-right: 8px solid #ffffff; 

    border-top: 8px solid transparent;

    left: -12px;

    margin-top: -8px;

}

.module h2 a:after {

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    left: -6px;

    margin-top: -6px;

}

.module.blue h2 a {background-color: #A2D5EC;}

.module.blue h2 a:hover {background-color: #C5F0FF;}

.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}

.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}

.module.yellow h2 a:hover {background-color: #FFD700;}

.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}

.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}

.module.green h2 a:hover {background: #C7E176;}

.module.green h2 a:after {border-right: 6px solid #bada55;}

.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}

.module.red h2 a:hover {background-color: #FFC7D2;}

.module.red h2 a:after {border-right: 6px solid #F0A5B5;}

.module.red h2 a:hover:after {border-right-color: #FFC7D2;}

</style>

واحفظ واعمل اضافه لـ

HTML/JavaScript

أحد الرموز أدناه لكل عنوان عنصر واجهة مستخدم:

الخلفية باللون الأزرق:

<div class="module blue">

<h2>Title in <a href="Link URL">Blue</a></h2>

</div>

الخلفية باللون الأصفر:

<div class="module yellow">

<h2>Title in <a href="Link URL">Yellow</a></h2>

</div>

الخلفية باللون الأخضر:

<div class="module green">

<h2>Title in <a href="Link URL">Green</a></h2>

</div>

الخلفية باللون الأحمر:

<div class="module red">

<h2>Title in <a href="Link URL">Red</a></h2>

</div>

ملاحظة: قم بتغيير نص "العنوان في" بعنوان عنصر واجهة المستخدم الخاص بك والأزرق والأصفر والأخضر والأحمر مع النص على اليمين ، ثم أضف عنوان URL للرابط.

الخطوة 5. بعد قيامك بحفظ أدوات HTML / Javascript التي تحتوي على الرموز أعلاه ، قم بسحبها وإفلاتها فوق الأدوات التي تريد إظهارها ... وحفظ الترتيب.

اذا حبيت نسخ المقالهـ