Skip to content

smtaydemir/csstips

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 

Repository files navigation

CSS Tips

Merhaba, kullandığım ve tecrübe edindiğim css ipuçlarını derliyorum. Çok ekstrem bilgiler olmamakla birlikte el altında olması hoş olur diye düşündüm.

Shorthand

Gereksiz tanımlamalar yapmaktan kurtarır ve tek satırda işlerimizi halletmemizi sağlar. CSS kodumuzu daha düzenli ve temiz bir hale getirir.

Font Özellikleri
p{
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

Kısa Hali;

p{
  font: italic bold 16px/1.5 Arial, sans-serif;
}

Shorthand ile ilgili daha fazla örnek için şuraya bakabilirsiniz.

Selection Color (Seçim Rengi)

Tarayıcıda imlecimizle bir alanı seçtiğimizde mavi bir renk tonuyla seçim işlemini gerçekleştiriyor. Bunu ::selection ile değiştirebiliyoruz.

::selection{
  background-color:#f00;
  color:#fff;
}

/* Mozilla */
::-moz-selection{
  background-color:#f00;
  color:#fff;
}

##Placeholder Text

Bildiğiniz gibi form elemanlarında kullanıcı bir şey girmediğinde şeffaf olarak görünen text'i placeholder ile belirliyoruz. Ancak gelen tasarımda placeholder text'i default olandan farklı bir şekilde biçimlendirilmiş olabiliyor. CSS ile bu text özelliklerini değiştirebiliyoruz.

/** webkit **/
::-webkit-input-placeholder{
  color:#f00;
  background-color:#f5f5f5;
}

/** mozilla **/
::-moz-placeholder{
  color:#f00;
  background-color:#f5f5f5;
}

/** ms **/
::-ms-input-placeholder{
  color:#f00;
  background-color:#f5f5f5;
}

About

🔨 CSS İpuçları

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published