إضافة مكتبة أكواد الألوان إحترافية ومتجاوبة

4 minute read

إضافة مكتبة أكواد الألوان إحترافية ومتجاوبة - مكتبة الالوان تحوي عدد كبير من الالوان وبدرجاتها المختلفة وايضا يمكنك نسخ كود كل لون على حذى هذه الالوان مريحة للعين جذابة تحوي هذه المكتبة على قدر كبير من الالوان الشائع استخدامها والميزة في هذه الاضافة هي التجاوب مع خاصية التلميحات يمكنك معاينتها من هنا

شرح طريقة تركيب هذه المكتبة

1. اذهب الى الصفحات الثابتة .

2. اختار صفحة جديدة .

3. اذهب الى تبويب ال html وامسح كل الموجود .

4. اضف الكود التالي :

<div id="flatuarlina">
<ul class="flatui">
<li style="background: #5C97BF;">كود اللون #5C97BF
</li>
<li style="background: #4B77BE;">كود اللون #4B77BE
</li>
<li style="background: #1F3A93;">كود اللون #1F3A93
</li>
<li style="background: #2574A9;">كود اللون #2574A9
</li>
<li style="background: #67809F;">كود اللون #67809F
</li>
<li style="background: #34495E;">كود اللون #34495E
</li>
<li style="background: #3A539B;">كود اللون #3A539B
</li>
<li style="background: #1E8BC3;">كود اللون #1E8BC3
</li>
<li style="background: #6BB9F0;">كود اللون #6BB9F0
</li>
<li style="background: #22313F;">كود اللون #22313F
</li>
<li style="background: #336E7B;">كود اللون #336E7B
</li>
<li style="background: #19B5FE;">كود اللون #19B5FE
</li>
<li style="background: #89C4F4;">كود اللون #89C4F4
</li>
<li style="background: #2C3E50;">كود اللون #2C3E50
</li>
<li style="background: #3498DB;">كود اللون #3498DB
</li>
<li style="background: #22A7F0;">كود اللون #22A7F0
</li>
<li style="background: #94E0EE;">كود اللون #94E0EE
</li>
<li style="background: #52B3D9;">كود اللون #52B3D9
</li>
<li style="background: #59ABE3;">كود اللون #59ABE3
</li>
<li style="background: #26A65B;">كود اللون #26A65B
</li>
<li style="background: #1E824C;">كود اللون #1E824C
</li>
<li style="background: #00B16A;">كود اللون #00B16A
</li>
<li style="background: #2ABB9B;">كود اللون #2ABB9B
</li>
<li style="background: #4DAF7C;">كود اللون #4DAF7C
</li>
<li style="background: #03A678;">كود اللون #03A678
</li>
<li style="background: #26C281;">كود اللون #26C281
</li>
<li style="background: #019875;">كود اللون #019875
</li>
<li style="background: #3FC380;">كود اللون #3FC380
</li>
<li style="background: #16A085;">كود اللون #16A085
</li>
<li style="background: #2ECC71;">كود اللون #2ECC71
</li>
<li style="background: #C5EFF7;">كود اللون #C5EFF7
</li>
<li style="background: #C8F7C5;">كود اللون #C8F7C5
</li>
<li style="background: #049372;">كود اللون #049372
</li>
<li style="background: #36D7B7;">كود اللون #36D7B7
</li>
<li style="background: #66CC99;">كود اللون #66CC99
</li>
<li style="background: #1BA39C;">كود اللون #1BA39C
</li>
<li style="background: #1BBC9B;">كود اللون #1BBC9B
</li>
<li style="background: #65C6BB;">كود اللون #65C6BB
</li>
<li style="background: #BFBFBF;">كود اللون #BFBFBF
</li>
<li style="background: #ABB7B7;">كود اللون #ABB7B7
</li>
<li style="background: #DADFE1;">كود اللون #DADFE1
</li>
<li style="background: #95A5A6;">كود اللون #95A5A6
</li>
<li style="background: #C5DCE2;">كود اللون #C5DCE2
</li>
<li style="background: #BDC3C7;">كود اللون #BDC3C7
</li>
<li style="background: #EEEEEE;">كود اللون #EEEEEE
</li>
<li style="background: #D2D7D3;">كود اللون #D2D7D3
</li>
<li style="background: #F0E2C5;">كود اللون #F0E2C5
</li>
<li style="background: #EB9532;">كود اللون #EB9532
</li>
<li style="background: #E67E22;">كود اللون #E67E22
</li>
<li style="background: #F27935;">كود اللون #F27935
</li>
<li style="background: #F9BF3B;">كود اللون #F9BF3B
</li>
<li style="background: #F7CA18;">كود اللون #F7CA18
</li>
<li style="background: #F9690E;">كود اللون #F9690E
</li>
<li style="background: #F39C12;">كود اللون #F39C12
</li>
<li style="background: #D35400;">كود اللون #D35400
</li>
<li style="background: #F4D03F;">كود اللون #F4D03F
</li>
<li style="background: #F5AB35;">كود اللون #F5AB35
</li>
<li style="background: #EB974E;">كود اللون #EB974E
</li>
<li style="background: #F2784B;">كود اللون #F2784B
</li>
<li style="background: #F4B350;">كود اللون #F4B350
</li>
<li style="background: #E87E04;">كود اللون #E87E04
</li>
<li style="background: #E74C3C;">كود اللون #E74C3C
</li>
<li style="background: #CF000F;">كود اللون #CF000F
</li>
<li style="background: #C0392B;">كود اللون #C0392B
</li>
<li style="background: #D64541;">كود اللون #D64541
</li>
<li style="background: #EF4836;">كود اللون #EF4836
</li>
<li style="background: #96281B;">كود اللون #96281B
</li>
<li style="background: #D91E18;">كود اللون #D91E18
</li>
<li style="background: #E26A6A;">كود اللون #E26A6A
</li>
<li style="background: #FF0000;">كود اللون #FF0000
</li>
<li style="background: #F22613;">كود اللون #F22613
</li>
<li style="background: #E08283;">كود اللون #E08283
</li>
<li style="background: #9B59B6;">كود اللون #9B59B6
</li>
<li style="background: #8E44AD;">كود اللون #8E44AD
</li>
<li style="background: #BE90D4;">كود اللون #BE90D4
</li>
<li style="background: #BF55EC;">كود اللون #BF55EC
</li>
<li style="background: #9A12B3;">كود اللون #9A12B3
</li>
<li style="background: #913D88;">كود اللون #913D88
</li>
<li style="background: #722D6A;">كود اللون #722D6A
</li>
<li style="background: #740A4E;">كود اللون #740A4E
</li>
</ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by www.sh7na.blogspot.com/ */
#flatuarlina ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatuarlina ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatuarlina ul.flatui li:hover{z-index:4}
#flatuarlina ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatuarlina ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatuarlina ul.flatui li:after{content:'انسخ كود اللون';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatuarlina ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatuarlina ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatuarlina ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;font-family: Droid Arabic Kufi;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatuarlina ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatuarlina ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatuarlina ul.flatui li{width:100%}}
</style></div>

واخيرا احفظ الصفحة

ان واجهتك اي مشكلة ضعها في تعليق وسيتم الرد عليك قريبا ان شاء الله

في أمان الله

12 تعليقًا

Unknown Seconds ago

الصراحه مدونه جميله جداً وفيها كل حاجه وربنا

وشكراً للاخ عماد الذي اقام كل هذا
- عماد إياد Seconds ago
  
  @MoDY_ BoB صراحة اخي والله اتحفتني في تعليقك شكرا لك
Unknown Seconds ago

رائع اخي.. اكمل ❤
- عماد إياد Seconds ago
  
  @Unknown اهلا بك اخي شكرا لزيارتك
admin Seconds ago

شكرا جزيلا لك اخي على هذا المجهود
- عماد إياد Seconds ago
  
  @AMARE KH لا شكر على واجب الهم انه يعجبكم
غير معرف Seconds ago

شكرا أخي
- عماد إياد Seconds ago
  
  @Hassen Amri لا شكر على واجب زرنا مجددا
Ahmed laghzal Seconds ago

شرح رائع واصل اخي
- عماد إياد Seconds ago
  
  @قناة المستعمل شكرا لك اخي زرنا مجددا
mostafa Seconds ago

شرح رائع
- عماد إياد Seconds ago
  
  @الغواص ويب شكرا لزيارتك

مدونة شحنة

إضافة مكتبة أكواد الألوان إحترافية ومتجاوبة

قد تُعجبك هذه المشاركات

12 تعليقًا

قالب من أكون للتعريف بالشخصيات

أستٌمر - قالب للشركات والأعمال

قالب برولكس قالب من صفحة واحدة