Giriş yap

CSS writing-mode Özelliği
CSS3

Bu özellik metinlerin yatay mı dikey mi gözükeceğini belirler.

Yapısı (Syntax)writing-mode: horizontal-tb | vertical-rl | vertical-lr

Varsayılan Değer horizontal-tb
JavaScript Yapısı object.style.writingMode = "vertical-rl"
Animasyon Özellikleri Uygulanabilir Hayır

Değerler

Değer Açıklama Versiyon
horizontal-tb İçeriğin yatay olarak soldan sağa, dikey olarak yukarıdan aşağı görünmesini sağlar. (varsayılan değerdir) CSS3
vertical-rl İçeriğin yatay olarak yukarıdan aşağı, dikey olarak sağdan sola görünmesini sağlar. CSS3
vertical-lr İçeriğin yatay olarak yukarıdan aşağı, dikey olarak soldan sağa görünmesini sağlar. CSS3

Örnekler

Örneğin bir yazıyı yatayda yukarıdan aşağı olacak şekilde gösterelim.

<div class="box">
	<h3>PROTOTURK.COM</h3>
	<p>
		Bu bir writing-mode örneğidir.
	</p>
</div>

<style>
.box {
	height: 400px;
	width: 400px;
	background: red;
	display: flex;
}
.box h3 {
	writing-mode: vertical-lr;
	text-align: center;
}
</style>

vertical-rl örneği

<div class="box">
	<h3>PROTOTURK.COM</h3>
	<p>
		Bu bir writing-mode örneğidir.
	</p>
</div>

<style>
.box {
	height: 400px;
	width: 400px;
	background: red;
	display: flex;
	writing-mode: vertical-rl;
}
.box * {
	flex: 1;
}
</style>

tayfunerbilen
50 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar