CSS Tricks, Labs
CSS Kod Deposu
CSS ile çoğu zaman kullandığım kodlardan bazılarını sizlerle paylaşıyorum. Aklıma geldikçe ekleyeceğimden güncel kalacak bir konu olarak buraya bırakıyorum (:
- Multiple Transition Kullanımı
.nav a { transition: color .2s, text-shadow .2s; } transition: color .2s linear, text-shadow .2s linear; transition-property: color, text-shadow; transition-duration: .2s; transition-timing-function: linear;
Responsive Tema Kodlama
-
@Media Query: Çoğu Akıllı Telefon İçin Geçerli:
/* ##Aygıt = Akıllı Telefonlar İçin @Media Query */ @media (max-width: 480px) { //CSS }
-
@Media Query: Tablet ve Telefon Yatay Pozisyonu:
/* ##Aygıt = Tablet ve Telefon Yatay Pozisyonu İçin @Media Query */ @media (min-width: 481px) and (max-width: 767px) { //CSS }
-
@Media Query: Tablet, Ipad (dikey ve yatay ekranda):
/* ##Aygıt = Tablet, Ipad (dikey) */ @media (min-width: 768px) and (max-width: 1024px) { //CSS } /* ##Aygıt = Tablet, Ipad (yatay) */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { //CSS }
-
@Media Query: Laptop, Desktop:
/* ##Aygıt = Laptop, Desktop */ @media (min-width: 1025px) { //CSS }
Efekler
-
Resme siyah-beyaz efekti:
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%);
-
Siyah Bir Resmi Beyaza Çevirme:
.css_selector { background: linear-gradient( rgba(20,20,20, .5), rgba(20,20,20, .5)), url( resminiz ); }
-
Arkaplan Resmine Karartma Efekti:
.css_selector { background: linear-gradient( rgba(20,20,20, .5), rgba(20,20,20, .5)), url( resminiz ); }
Araçlar
-
Basit Etiketler:
<div class="tagcloud"> <a href="#" title="etiket ismi">etiket1</a> <a href="#" title="etiket ismi2">etiket2</a> </div>
// etiketler .tagcloud { color: #999; margin: 10px auto; line-height: 1.2; font-size: 14px; } .tagcloud a { display: inline-block; font-weight: 600; font-size: 12px; color: #666; padding: 3px 10px; background-color: #ddd; margin: 4px } .tagcloud a:hover { color: #fff; background-color: #0091ea }
Etiket: css kod deposu css türkçe cheatsheets
Kat: CSS Tricks, Labs Tarih: 28 Ağustos 2019 Okunma:1.262
Paylaş:
Kat: CSS Tricks, Labs Tarih: 28 Ağustos 2019 Okunma:1.262
Paylaş:
Henüz yorum eklenmemiş.