Faydalı CSS İpuçları

  • 05.01.2016
  • M.Tayyip Yetiş
  • CSS

1- Dikey Sıralamalı ve Sütunlu Listeleme

Ul etiketi ile listeleme default olarak yanyana sıralama yapar. eklenen her li eğer display inline olarak belirlenmiş ise bir öncekinin yanından devam eder display block olarak belirlenmiş ise de sürekli tek sütun olarak satır şeklinde eklenecektir fakat bazı durumlarda aşağıdan devam edip taşma olduğunda yeni bir sütun olarak yandan devam etmesini isteyebiliriz. sütun sayısını width özelliği ile azaltıp arttırabilirsiniz. aşağıdaki örneği inceleyin

Normalde

1. item     2. item    3. item

4. item     5. item    6. item

7. item     8. item    9. item

Yeni hali

1. item     4. item    7. item

2. item     5. item    8. item

3. item     6. item    9. item

HTML

<ul>
  <li> 1. item </li>
  <li> 2. item </li>
  <li> 3. item </li>
  <li> 4. item </li>
  <li> 5. item </li>
  <li> 6. item </li>
  <li> 7. item </li>
  <li> 8. item </li>
  <li> 9. item </li>
</ul>

CSS

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 90px;
  width: auto;
}

2- Halka Şeklinde ProgressBar Yapımı

Zaman zaman kullanılan çubuk şeklindeki progressbar yerine kullanılabilecek güzel bir çalışma. Bu linkten stackoverflow üzerindeki geliştiricisine ulaşabilirsiniz. Buradan ise jsfiddle üzerindeki canlı örneği inceleyebilirsiniz.

Javascript

var el = document.getElementById('graph'); // get canvas

var options = {
    percent:  el.getAttribute('data-percent') || 25,
    size: el.getAttribute('data-size') || 220,
    lineWidth: el.getAttribute('data-line') || 15,
    rotate: el.getAttribute('data-rotate') || 0
}

var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';
    
if (typeof(G_vmlCanvasManager) !== 'undefined') {
    G_vmlCanvasManager.initElement(canvas);
}

var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;

el.appendChild(span);
el.appendChild(canvas);

ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;

var drawCircle = function(color, lineWidth, percent) {
		percent = Math.min(Math.max(0, percent || 1), 1);
		ctx.beginPath();
		ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
		ctx.strokeStyle = color;
        ctx.lineCap = 'square'; // butt, round or square
		ctx.lineWidth = lineWidth
		ctx.stroke();
};

drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#555555', options.lineWidth, options.percent / 100);

 

HTML Kullanımı

<div class="chart" id="circleprogress" data-line="5" data-percent="75" data-size="100"></div>

3- Arkası çizgili yazı yapımı

CSS:

        #div:after {
            content: '';
            position: absolute;
            left: 100%;
            top: 50%;
            height: 0px;
            width: 1000px;
            border-bottom: 1px solid #aaa;
        }
        #div:after, #t1:before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            height: 0px;
            width: 1000px;
            border-bottom: 1px dashed #aaa;
        }

HTML:

<div style="text-align: center;font-family: Arial;font-size: 18px;overflow:hidden">
   <div  id="div"  style="position:relative;display:inline-block;padding: 0px 10px 0px 10px;">Merhaba, Dünya</div>
</div>

 

4- CSS ile Loader Örneği

Devamı gelecek...

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap