• Kaliteli sitelerden hacklink satın al Skype : live:.cid.c980c6c04ff9d24c
maltepe escort kadıköy escort pendik escort ataşehir escort ümraniye escort üsküdar escort kartal escort mersin escort izmir escort

Kendime Ait CSS Framework'u - LivelyFramework

Muzaffer Bayraktar

Forum Grand Üyesi
Üye
Mesajlar
14
Reaksiyon Puanı
31
Puanları
13
Herkese Merhaba,

sizlere bu konumda kendi yaptığım genel olarak renklerden oluşan CSS Framework'ümü tanıtacağım. Bu framework ile kolayca kendinize uygun renkler bulabilirsiniz. Ayrıca degrade (gradient) renklerde olduğu için sayfanıza biraz daha güzel hava katacaktır. Şuanda BETA aşamasında olduğu için pek özellik göremeyebilirsiniz. Bir üst sürümü çıktığında büyük değişiklikler olacaktır.

Framework İçeriği:

50 tane kırmızı renk tonları, 50 tane yeşil renk tonları, 50 tane mavi renk tonları, 50 gradient renk, 4 tane buton, 1 adet tablo, 4 tane scale animasyonu (üzerine gelince büyüyen) ve 3 tane de rotate (yön değiştiren) animasyonları bulunmaktadır.

Şimdi gelelim örnek olarak kodlara ve fotoğraflara.

butonlar.png

HTML:
<div class="btn-success"> btn-success </div>
<div class="btn-danger"> btn-danger </div>
<div class="btn-dark"> btn-dark </div>
<div class="btn-info"> btn-info </div>
animasyonlar.png



HTML:
/* Scale Sınıfları | Scale Class */
<div class="scale-5"> scale-5 </div>
<div class="scale-3"> scale-3 </div>
<div class="scale-2"> scale-2 </div>
<div class="scale-1"> scale-1 </div>

/* Rotasyon Sınıfları | Rotate Class */
<div class="rotate-360"> rotate-360 </div>
<div class="rotate-180"> rotate-180 </div>
<div class="rotate-90"> rotate-90 </div>
tablo.png



HTML:
/* Tablo | Table */
<table>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
<th>Başlık 3</th>
</tr>
<tr>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
</tr>
<tr>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
</tr>
<tr>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
</tr>
<tr>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
</tr>
<tr>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
</tr>
<tr>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
<td>Alt Kısım</td>
</tr>
</table>
kırmızırenkler.png
HTML:
/* Kırmızı Yazı Renkleri | Red Text Color */
/* red-1 sınıfı red-50 sınıfına kadar gider.
/* The red-1 class goes up to the red-50 class. */

<div class="red-1"> red-1 </div>
<div class="red-2"> red-2 </div>
<div class="red-3"> red-3 </div>
<div class="red-4"> red-4 </div>
<div class="red-5"> red-5 </div>
<div class="red-..."> red-... </div>
<div class="red-50"> red-50 </div>


/* Kırmızı Arkaplan Renkleri | Red Background Colors */
/* bg-red-1 sınıfı bg-red-50 sınıfına kadar gider.
/* The bg-red-1 class goes up to the bg-red-50 class. */

<div class="bg-red-1"> bg-red-1 </div>
<div class="bg-red-2"> bg-red-2 </div>
<div class="bg-red-3"> bg-red-3 </div>
<div class="bg-red-4"> bg-red-4 </div>
<div class="bg-red-5"> bg-red-5 </div>
<div class="bg-red-..."> bg-red-... </div>
<div class="bg-red-50"> bg-red-50 </div>

yesilrenk.png

HTML:
/* Yeşil Yazı Renkleri | Green Text Color */

/* green-1 sınıfı green-50 sınıfına kadar gider.

/* The green-1 class goes up to the green-50 class. */



<div class="green-1"> red-1 </div>

<div class="green-2"> red-2 </div>

<div class="green-3"> red-3 </div>

<div class="green-4"> red-4 </div>

<div class="green-5"> red-5 </div>

<div class="green-..."> red-... </div>

<div class="green-50"> red-50 </div>





/* Yeşil Arkaplan Renkleri | Green Background Colors */

/* bg-green-1 sınıfı bg-green-50 sınıfına kadar gider.

/* The bg-green-1 class goes up to the bg-green-50 class. */



<div class="bg-green-1"> bg-green-1 </div>

<div class="bg-green-2"> bg-green-2 </div>

<div class="bg-green-3"> bg-green-3 </div>

<div class="bg-green-4"> bg-green-4 </div>

<div class="bg-green-5"> bg-green-5 </div>

<div class="bg-green-..."> bg-green-... </div>

<div class="bg-green-50"> bg-green-50 </div>

mavirenk.png


HTML:
/* Mavi Yazı Renkleri | Blue Text Color */
/* blue-1 sınıfı blue-50 sınıfına kadar gider.
/* The blue-1 class goes up to the blue-50 class. */

<div class="blue-1"> blue-1 </div>
<div class="blue-2"> blue-2 </div>
<div class="blue-3"> blue-3 </div>
<div class="blue-4"> blue-4 </div>
<div class="blue-5"> blue-5 </div>
<div class="blue-..."> blue-... </div>
<div class="blue-50"> blue-50 </div>


/* Blue Arkaplan Renkleri | Blue Background Colors */
/* bg-blue-1 sınıfı bg-blue-50 sınıfına kadar gider.
/* The bg-blue-1 class goes up to the bg-red-50 class. */

<div class="bg-blue-1"> bg-blue-1 </div>
<div class="bg-blue-2"> bg-blue-2 </div>
<div class="bg-blue-3"> bg-blue-3 </div>
<div class="bg-blue-4"> bg-blue-4 </div>
<div class="bg-blue-5"> bg-blue-5 </div>
<div class="bg-blue-..."> bg-blue-... </div>
<div class="bg-blue-50"> bg-blue-50 </div>

degrade.png


HTML:
/* Degrade Arkaplan Renkleri */
/* Gradient Background Colors */
/* gradient-1 sınıfı gradient-50 sınıfına kadar çalışmaktadır.
/* The gradient-1 class goes up to the gradient-50 class. */

<div class="gradient-1"> gradient-1 </div>
<div class="gradient-2"> gradient-2 </div>
<div class="gradient-3"> gradient-3 </div>
<div class="gradient-4"> gradient-4 </div>
<div class="gradient-5"> gradient-5 </div>
<div class="gradient-..."> gradient-... </div>
<div class="gradient-50"> gradient-50 </div>
seperator.png

Şuanda framework BETA aşamasında olduğu için pek bir özellik yok. İlerleyen zamanlarda yeni sürümler ile birçok özellik gelecektir. Bu konu sadece tanıtım içindir. Şuanda size bu konuda göstermek istediğim görseller ve kod yapısıdır. Bir sonraki güncellemede indirme linki aktif olacaktır.
 
halkalı escort avrupa yakası escort şişli escort avcılar escort esenyurt escort beylikdüzü escort beylikdüzü escort şirinevler escort ataköy escort avcılar escort esenyurt escort
Üst Alt