Responsive-div-tasarimi

Divleri ekran genişliğine göre alta kaydırma işlemi.

Bu yazımızda divlerimizi responsive olacak şekilde  alt alta kaydırma, genişliğini ekrana  sığdırma gibi işlemleri göreceğiz. Anlatıma  başlamadan  önce  bu işlemleri yapabilmek için css bilginizin yeterli seviyede olması gerektiğini hatırlatıyor ve işlemlerimize geçiyoruz. Alttaki örnekte bir container içerisine 3 tane div koyduk ve yanyana sıraladık.   See the Pen div ayarları responsive by Bulut (@bulutaylak) on […]

Devamını Oku

fotograflari-responsive-yapmak

Resimleri veya fotoğrafları responsive uyumlu hale getirme.

Bu yazımda sizlere web sitenizde kullandığınız  fotoğrafları responsive hale getirmek için bir kaç önemli detay sunacağım. İlk olarak dikkat etmemiz gereken detay; Resimlerin boyutlandırılması yapılırken, px cinsinden ölçü vermek yerine % değer üzerinden boyutlandırma yapacağız.   Aşağıda paylaştığım kodlarda dikkat edersiniz, fotoğrafın width ve height değerleri 100% üzerinden verilerek resim tam ekranda responsive olarak yerleştirilmiş. […]

Devamını Oku

tıklayınca büyüyen fotoğraf light box

Tıklayınca büyüyen fotoğraf / lightbox

Birçok web sitesinde kullanılan, “Fotoğrafa tıklayınca büyüyen fotoğraf” eklentisini kullanmasını anlatacağım. Bununla alakalı bir çok eklenti var fakat işin içine responsive (mobil uyum) olayını da katmak gerek ve kullanacağımız eklentinin responsive uyumlu olmasına dikkat etmemiz gerek. İlk olarak BURAYA   tıklayarak eklentimizi indiriyoruz. Dağıtımın yapıldığı siteyi ve dökümanları incelemek isteyenler de  buraya  tıklasın.   Dosyayı indirdikten […]

Devamını Oku

Responsive-div-tasarimi

Responsive layout (Div Düzeni) Bölüm-1

Responsive bir web sitesi tasarlamak için öncelikle css bilginiz olması gerekmektedir. Css kodlarımızı yazarken en çok dikkat edilmesi gereken, divlere uzunluk ölçülerini px değil, % cinsinden vereceğiz. Aynı zamanda height ölçüsünü de “auto” yapıp bir de “min-height” değeri gireceksiniz ki böylelikle divlerde taşma olmasın ve içerisindeki elementlere göre uyumluluk sağlasın. Ben Bölüm Bölüm Giderek bu […]

Devamını Oku