Haftanın Fragmanı

Bu hafta oyun tanıtım rehberlerimiz başlıyor .Dreamweaver,PhotoShop vb. Derslerimizin videoları paylaşıma açılacak.Yazarlarımızdan gelen video,köşe yazısı gibi içerikleri sitemizde derleyip yayınlıyoruz.Sitemizde Yayın yapmak isteyenler Bizlerle iletişime Geçsinler.

Opencore | Açık Çekirdek Platformu

Metin Alanı Elemanı

 CSS Metin Alan Eleman

CSS Metin Alan Elemanı(Textarea)

Merhaba arkadaşlar bu dersimizde sizlere textarea alanını css ile nasıl şekillendirebiliriz buna değinicem.Form elemanlarından biri olan Textarea türçe tabiri ile metin alanı CSS ile bir çok değişikliler yapabiliriz.Basit bir metin alanı kodu;

<textarea>Bu bir metin kutusu elemanıdır.</textarea>

Background-Color:
Arkaplan rengini değiştirmek için kullanılır.İlk önce genişlik ve yükseklik değerlirini verdim.Sonra ise background-color(Arka Plan Rengi) değeri atadım.

textarea
{
width:230px;
height:60px;
background-color:#99FFCC;
border:1px solid #008800;
}
Background Image:
Arkaplana resim ekleme için kullanılır ben küçük bir resim parçasına repeat değeri verdi böylelikle resim kutus içinde sürekli olarak tekrar ediyor.Kodada mavi renkle damgaladığım yere resmin urlsi gelecek.

Bazı Arkaplan Resimleri Örnek olması için koydum.


textarea
{
background-image: url(https://img.webme.com/pic/o/opencore/bg.png);
border: 1px solid #6297BC;
width: 230px;
height: 60px;
}
Büyük Yan Sınır:
Metin alanının belirli bir yanına border değerini biraz fazla verip renk olarak farklı bir değer vererek yaptığımız bir Metin Alanı.


textarea 
{
width: 230px;
height:60px;
border:1px solid #3366FF;
border-left: 4px solid #3366FF;
}
Yuvarlak Köşeler
Metin kutusunu köşelerini ovalleştirmeye yarayan border-radius değerini veriyoruz.


textarea {
border: 2px solid #765942;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
height: 60px;
width: 230px;
}
Çift Kenarlık:
Çift kenarlık yaparak Metin alanın köşesini güzel bir şekillendirme yapabiliriz.Bunu için double değerini kullanıyoruz.

textarea {
border: 3px double #CCCCCC;
width: 230px;
height: 60px;
}
Metin Alanında Görüntü:
Bazı sitelerde muhakkak görmüş sünüzdür.Metin alanları içinde belirli bir sabit resim bulunur.


textarea {
background:#FFFFFF url(RESIM URL) no-repeat 85px 8px;
border: 1px solid #CCCCCC;
width: 230px;
height: 80px;
}




Bu sayfa hakkındaki yorumlar:
Yorumu gönderen: MetinDermencioglu, 24.01.2015, 20:33 (UTC):

Yorumu gönderen::24.12.2014, 16:51 (UTC)
lotrdefteri
lotrdefteri
Kapalı

gayet iyi anlatım olmuş. böyle makalelere devam etmelisin.

Yorumu gönderen::23.12.2014, 10:05 (UTC)
radyomaskot
radyomaskot
Kapalı

Çok faydalı olmuş Süpersin OpenCore ) Boşa haftanın sitesi olmadın sitem de dostum



Bu sayfa hakkında yorum ekle:
İsminiz:
Siteniz:
Mesajın:


=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=