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 (: Responsive Tema Kodlama @Media Query: Çoğu Akıllı Telefon İçin Geçerli: […]

yzr: Hakkı Cengiz
A+ A A- okuma

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 (:

Responsive Tema Kodlama

  1. @Media Query: Çoğu Akıllı Telefon İçin Geçerli:

                      
                          /*
                          ##Aygıt = Akıllı Telefonlar İçin @Media Query
                          */
                          @media (max-width: 480px) {
                            //CSS
                          }
                      
    
  2. @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
                                
                              }
                          
    
  3. @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
                                
                              }
                          
    
  4. @Media Query: Laptop, Desktop:

                          
                              /*
                              ##Aygıt = Laptop, Desktop
                              */
                              
                              @media (min-width: 1025px) {
                              
                              //CSS
                              
                              }
                          
    

Efekler

  1. Resme siyah-beyaz efekti:

                          
                              -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
                              filter: grayscale(100%);
                          
    
  2. Siyah Bir Resmi Beyaza Çevirme:

                          
                            .css_selector {
                              background: linear-gradient(
                                rgba(20,20,20, .5), 
                                rgba(20,20,20, .5)),
                                url( resminiz );
                            }
                          
    
  3. Arkaplan Resmine Karartma Efekti:

                          
                            .css_selector {
                              background: linear-gradient(
                                rgba(20,20,20, .5), 
                                rgba(20,20,20, .5)),
                                url( resminiz );
                              }
                          
    

Araçlar

  1. 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
                              }
                            
    
0 Yorumları: Yorum Formunu:

Henüz yorum eklenmemiş.

Bi yoruma ne dersin ?

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir