CSS – aycan.net | aycan bülbül

`object-fit` nedir? nasıl kullanılır?

Merhaba arkadaşlar, eskiden belirli bir orana sahip kutular içinde resmin en/boy oranını bozmadan göstermek için türlü türlü şeyler yapardık ama şuanda object-fit var.

Kısaca `object-fit` : img veya video gibi en/boy oranına sahip bir öğenin, onu kapsayan kutuya istenilen şekilde yeniden boyutlandırılması sağlar.

object-fit özelliğinin alabileceği değerler

fill: Görüntü, konteynırın tamamını dolduracak şekilde boyutlandırılır. Oranlar korunmaz, bu nedenle görüntü bozulabilir.

contain: Görüntü, konteynırın içine sığacak şekilde boyutlandırılır. Oranlar korunur, bu nedenle görüntü konteynırın içinde tamamen görünür, ancak boşluklar olabilir.

cover: Görüntü, konteynırı tamamen kaplayacak şekilde boyutlandırılır. Oranlar korunmaz, bu nedenle görüntü konteynırın içinde tamamen görünmez, ancak tamamen kaplar.

none: Görüntü, boyutları değiştirilmeden konteynır içinde yerleştirilir. Oranlar korunmaz ve görüntü istenilen boyuta sığdırılır, ancak oranlar bozulabilir.

scale-down: contain ile benzer şekilde davranır. Ancak, görüntü oranı konteynır oranından büyükse, contain gibi davranır. Görüntü oranı konteynır oranından küçükse, none gibi davranır.

Codepen ‘de en son transformla nasıl img en boy oranı korunarak kutuya sığdırılır onu da custom adı altında gösterdim

See the Pen css object-fit by Aycan BÜLBÜL (@AycanB) on CodePen.

CSS ile İnternet siteleriniz için Filigran yapmak (pointer-events)

Merhaba arkadaşlar,

Özel ürettiğiniz yazılımlar/bilgi sistemleri için demo sürümlerinde projenin resminin dağıtılmaması veya kullanıcıya demo kullandığını hatırlatmak için filigran eklemek gerekebiliyor. Benden bu iş istenildiğinde ilk fikrim, css’de herşey katman katman’dır en üstte görünecekse tıklanma sorunu olur dedim ama sonra araştırdım ve pointer-events’i buldum. (Dinazor kafalı olmamakta fayda var.)

pointer-events:none;

1	pointer-events:none;

pointer-events: Bir element için fare’nin click/hover olayların da tepki verip/vermemesi ayarlamamızı sağlayan ve CSS3 ile gelen property.

See the Pen CSS ile İnternet siteleriniz için Filigran yapmak (pointer-events) by Aycan BÜLBÜL (@AycanB) on CodePen.

Tarayıcı uyumluluğu

Tarayıcı uyumluluğu da gayet güzel, özel yazılımlarda kullanıcılara demo sunarken tarayıcıya yönlendirebiliyoruz. o yüzden IE Edge haricini pek takmıyorum.

Kaynaklar

Arkadaşlar pointer-events’in alabileceiği diğer değerleri(auto, none, visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all) öğrenmek için sizi aşağıdaki kaynaklara yönlendiriyorum.

Sayfa yüklenirken çirkin duran transition’ları engellemek

Merhaba arkadaşlar,

Artık yaptığımız işlerde transition kullanıyoruz, bazı elementleri rotate yapıyoruz veya kaydırma işlemlerinde kullanıyoruz.

Bu efekt sayfa yüklenirken aynı işlemi yapıyor ve kötü görüntü oluşturuyor.

Örnek :

Bunu engellemek için body’ye bir class veriyoruz

<body class="preload">

1	<body class="preload">

CSS’e aşağıdaki kodu ekliyoruz

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.preload * {

-webkit-transition: none !important;

-moz-transition: none !important;

-ms-transition: none !important;

-o-transition: none !important;

transition: none !important;

}

Şimdi sitedeki tüm transition’ları iptal etmiş olduk. Şimdi sayfa yüklendikten sonra Jquery ile body’ye eklediğimiz preloader class’ını sileceğiz.

$(window).on("load", function (e) {
  $("body").removeClass("preload");
});

$(window).on("load", function (e) {

$("body").removeClass("preload");

});

Sorun çözüldü 🙂

Kaynak : https://css-tricks.com/transitions-only-after-page-load/

Google PageSpeed Insights puanlarını yükseltmek

Merhaba arkadaşlar,

Google’ın PageSpeed aracında artık yeşil puanları görmek biraz zorlaştı, bunun sebebi yapacağımız işlemlerin çeşitli alanlarda olması.

|Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın

(bkz: google oluşturmayı önleyen JavaScript…)
Burada google Okumaya devam et Google PageSpeed Insights puanlarını yükseltmek

Apple safari tarayıcıda telefon numaralarının şekillenmesini engellemek

Merhaba arkadaşlar. (Uzun zamandır merhaba demiyorum, özlemişimm)

iPhone akıllı cep telefonları internet sitesindeki telefon numaralarını algılıyor, şekillendiriyor ve bizim yapımızı bozuyor.

İnternetde arama yaptığımda aşağıdaki meta tag’ın olayı çözdüğünü gördüm.

<meta name="format-detection" content="telephone=no">

1	<meta name="format-detection" content="telephone=no">

Bu tag Apple’a özel bir meta tag. (Apple’a özgün diğer taglara apple meta tag ulaşabilirsiniz.)

Sağlıcakla kalın.