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

1. 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

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
                             }