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/

CSS3 box-sizing nedir ? nasıl kullanılır ?

İştah kabartan bir css3 özelliği ile karşınızdayım.

Heryerde belirtmişimdir teorik bilgiyi sevmiyorum diye. Bu ön yargım beni çok gerilere götürdü, daha uzun kodlar yazmak zorunda kalıyorum. O yüzden teorik bilgiye önem vermek gerekiyor bunu tekrar tekrar anlıyorum.

box-sizing özelliği nedir ?

Html bir objenin genişlik değerine border, padding değerlerini dahil etmek için kullanılır. (Esnek bir yapı oluşturmak için vazgeçilmez bir özellik.) Okumaya devam et CSS3 box-sizing nedir ? nasıl kullanılır ?