LARAVEL
SASS
Web sayfalarında tasarım önemli bir bölümünüde metin düzeni oluşturmaktadır. Her ne kadar hemen her yerde rastladığımız fontların dışınıda farlı bir fontla yazılmış metinler daha çok dikkat çekmekte ve kullanıcıyı siteye bağlamaktadır. Bu gibi küçük ama bir o kadarda önemli değişiklikleri metin işlemleri bölümünde öğreneceğiz. BAŞARILAR
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .metinislemleri{ color:rgba(0,119,0,1);/*Metinlere renk vermek için kullanılır.*/ direction: ltr;/*Metnin sağdan veya soldan başlamasını sağlar.(ltr,rtl)*/ line-height:120%;/*Satır arasındaki boşluğu düzenler.(normalsayı,uzunluk,yüzde)*/ letter-spacing:12px;/*Harfler ve sözcükler arası boşluğu düzenler*/ text-align:center;/*Metni hizalar.(left,right,center,justify)*/ vertical-align:sub;/*Metni dikey hizalar.*/ text-decoration:none;/*Metne çizgi ekler veya var olan çizgiyi siler.()*/ text-indent:5%;/*Metne istenilen kadar girinti verir.*/ text-shadow:rgba(34,34,34,1) 5px;/*Metne gölgelendirme verir.*/ text-transform:uppercase;/*Metnin boyutunu büyük küçük olarak belirler.*/ unicode-bidi:bidi-override;/*Çift yönlü metinler için Unicode tanımlar. Arapça, İbranice..*/ white-space:nowrap;/*Bayaz boşluk tanımlaması yapar.*/ word-spacing: 30px;/*Kelimeler arası boşluk miktarını tanımlar.*/ font-family:Verdana, Geneva, sans-serif;/*Metnin font ailesini belirler.*/ font-size:14px;/*Fontun boyutunu belirler.*/ font-style:italic;/*Yazı tipini belirler.*/ font-weight:bold;/*Fontun kalınlığını belirler.*/ font-variant:small-caps;/*Font biçimi.*/ font: italic small-caps bold 34px/100px Verdana, Geneva, sans-serif; font:/*<font-style> <font-variant> <font-weight> <font-size> <font-family>*/; } |
color Kullanımı
1 2 3 4 5 6 | .metinrengi{ color: rgba(68,68,68,1); color:hsla(120,33%,30%,1); color:#CCC; color:red; } |
line-height Kullanımı
1 2 3 4 5 | .satirarasibosluk{ line-height:1.2; line-height:12pt; line-height:120%; } |
Letter-Spacing Kullanımı
1 2 3 4 | .harfSozcukArasıBosluk{ letter-spacing:12px; letter-spacing:-0.7; } |
text-align Kullanımı
1 2 3 4 5 6 | .metinHizalama{ text-align:center;/*Metni ortalar*/ text-align:justify;/*Metni sağa sola yaslar.*/ text-align:left;/*Metnin sola yaslar.*/ text-align:right;/*Metni sağa yaslar.*/ } |
vertical-align Kullanımı
1 2 3 4 5 6 7 8 9 10 11 12 | .dikeyMetin{ vertical-align:baseline;/*Varsayılan değerdir alt köşeden başlar.*/ vertical-align:bottom;/*En alttan başlar.*/ vertical-align:sub;/*Üst köşeden başlar ve genellikle üstlü sayılar için kullanılır.*/ vertical-align:super;/*Alt köşeden başlar ve taban sayıları için kullanılır.*/ vertical-align:top;/*En üstten başlar.*/ vertical-align:text-top;/*Elementin üst hizasına göre başlar.*/ vertical-align:middle;/*Ortadan başlar.*/ vertical-align:text-bottom;/*Elementin en alt hizasında başlar.*/ vertical-align:lenght;/*Bir sayı ile birlikte pt,px,em,cm ölçü değeri alabilir.*/ vertical-align:2%;/*Bir sayı kullanılara yüzde değer verilebilir.*/ } |
text-decoration Kullanımı
1 2 3 4 5 6 | .altiCizili{ text-decoration:underline;/*Yazının altına çizgiyi ekler*/ text-decoration:overline;/*Yazının en üstüne çizgi çeker.*/ text-decoration:line-through;/*Yazının üzerine çizgi ekler.*/ text-decoration:blink;/*Yazının yanıp sönmesini sağlar IE desteği yok.*/ } |
text-indent Kullanımı
1 2 3 | .soldanGiringi{ text-indent:50px;/*Metne soldan başlayarak 50px kadar girinti verir.*/ } |
text-shadow Kullanımı
1 2 3 4 | .metinGolge{ text-shadow:1px 1px 1px #333399;/*Metne gölge verir.(x konum, y konum, blur, renk)*/ filter:shadow(direction=5,color=red,strength=4);/*IE 9 ve öncesi kullanımı için.*/ } |
text-transform Kullanımı
1 2 3 4 5 6 | .metinBoyu{ text-transform:none;/*Var sayılan kullanımı.*/ text-transform:capitalize;/*Sadece metinin ilk harfini büyük yapar.*/ text-transform:uppercase;/*Metnin bütün harflerini büyük harf yapar.*/ text-transform:lowercase;/*Metnin bütün harflerini küçük yapar.*/ } |
White-space Kullanımı
1 2 3 4 | .beyazBosluk{ white-space:pre;/*Metni boşluk ve satırları ile birlikte olduğu gibi görüntüler.Kod yazımında kullanılır.*/ white-space:nowrap;/*Metnin satırlarını yok sayar. Tek satırmış gibi gösterir.*/ } |
Word-spacing Kullanımı
1 2 3 | .kelimeBosluk{ word-spacing:30px;/*Kelimeler arası boşluk miktarını ayarlar.*/ } |
Word-wrap Kullanımı
1 2 3 | .sigdir{ word-wrap:break-word;/*Aralarında boşluk olmayan metinin alana sığmasını sağlar.*/ } |
text-overflow Kullanımı
1 2 3 | igdir2{ text-overflow:clip /*ellipsis*/;/*Aralarında boşluk olmayan ve çok uzun yazılan metinlerin dışa taşamadan görüntüler.*/ } |
@font-face Kullanımı
Öncelikli olarak google dan veya fonttr.com adresinden beğendiğini bir font ailesinin ttf dosyasını indiriniz.ttf dosyalarını ise eot a dönüştürmek için http://code.google.com/p/ttf2eot/ adresinden yapabiliriz. Tekrardan Başarılar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>@font-face Kullanımı</title> <!--www.caglarbostanci.com.tr--> <style> @font-face{ font-family:"CBFont1"; font-style:normal; font-weight:normal; src:url(AnkeCall.ttf); } @font-face{ font-family:"CBFont2"; font-style:normal; font-weight:normal; src:url(Cocainesans.ttf); } .kutu{ font-family:"CBFont1", sans-serif; font-size:40px; } .kutu span{ font-family:"CBFont2",sans-serif;11 } </style> </head> <body> <div class="kutu">Hani o bırakıp <span>giderken</span> seni.</div> </html> |