HTML

CSS Kod Deposu

23 Oca 2019
yzr: Hakkı Cengiz

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. Siyah bi resmi beyaza çevirme:
    filter: brightness(0) invert(1);
  2. Resme siyah-beyaz efekti: 
    filter: grayscale(100%);
  3. Basit Yazı Etiketleri
    CSS: 
    .tagcloud{font-size:0;margin-left:-4px;margin-right:-4px;margin-bottom:16px}
    .tagcloud a{display:inline-block;font-weight:600;font-size:12px !important;
    color:#666;padding:3px 10px;background-color:#ddd;margin:4px}
    .tagcloud a:hover{color:#fff;background-color:#0091ea}

    HTML: 
     <div class="tagcloud">
    <a href="#" title="etiket ismi">etiket1</a>
    <a href="#" title="etiket ismi2">etiket2</a>
    </div>
  4. Responsive Tasarım @Media Query: Masaüstü, Laptop, Tablet ve Telefonlar için
    /*
    ##Device = Desktops
    ##Screen = 1281px to higher resolution desktops
    */@media (min-width: 1281px) {

    //CSS

    }

    /*
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
    */

    @media (min-width: 1025px) and (max-width: 1280px) {

    //CSS

    }

    /*
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
    */

    @media (min-width: 768px) and (max-width: 1024px) {

    //CSS

    }

    /*
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
    */

    @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    //CSS

    }

    /*
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
    */

    @media (min-width: 481px) and (max-width: 767px) {

    //CSS

    }

    /*
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
    */

    @media (min-width: 320px) and (max-width: 480px) {

    //CSS

    }

  5. arkaplan resmini karartma
    .css_selector {
    background: linear-gradient(
                         rgba(20,20,20, .5), 
                         rgba(20,20,20, .5)),
                         url( your image);
    }
    

Henüz yorum eklenmemiş. Bi yorum atmaya ne dersin?

    Bi yoruma ne dersin ?

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

Choose A Format
Trivia quiz
Poll
Story
List
Video
Audio