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
                             }