İlk olarak Facebook’un popup ve lightbox olarak uyguladığı, en azından benim orada gördüğüm bir uygulama idi.

Benzer bir uygulamayı yapmak için kodları yazdım. Daha önce bahsettiğim rgba tanımı ile bu iş çok basit olacaktı.

 #popup{
	position: absolute;
	top: 90px;
	left: 40%;
	border: 10px solid rgba(0,0,0, 0.5);
	text-align: center;
	font-size: 24px;
	background-color: #FFFFFF;
	width: 350px;
	padding: 50px 0;
	border-radius: 10px;
	z-index: 100;
}

Ancak aşağıdaki gibi bir görüntü elde ettim.

Çözümü biraz araştırdım ancak pek bir şey bulamadım derken css-tricks’in çözümü bana ilaç gibi geldi. Çözüm background-clip özelliği tanımı ile sağlanıyor.

#popup{
	position: absolute;
	top: 90px;
	left: 40%;
	border: 10px solid rgba(0,0,0, 0.5);
	text-align: center;
	font-size: 24px;
	background-color: #FFFFFF;
	width: 350px;
	padding: 50px 0;
	border-radius: 10px;
	z-index: 100;
	moz-background-clip: padding;
	webkit-background-clip: padding;
	background-clip: padding-box;
}

Kaynak

CSS ile büyük kardeşe söz geçirme

Başlığa bakınca sanki bir aile olayına dair bir yazı geçecek anlamı çıkarmayın. HTML'deki elemanların birbiriyle olan ilişkilerini anlatm...… Devamını oku

Javascript ile medya kontrolü

17 February 2017 tarihinde yayınlandı.

Yenilenen Google Çeviri hizmeti

31 January 2017 tarihinde yayınlandı.