Resimler Nasıl Responsive Yapılır

CSS Media Query Kullanmadan Sitedeki Bir Resmi Nasıl Responsive Hale Getiririz?

Ön Yüz(Front End) geliştirme ile uğraşan herkesin bildiği gibi, bir web sayfası responsive hale getirilmek istendiğinde, tasarımdaki nesnelerin farklı ekran boyutları için nasıl öçleklendirileceğini CSS Media Query metodlarını kullanarak belirliyoruz.  Stilleri yazdığımız css dosyamızın içine @media ile başlayan aşağıdaki gördüğünüze benzeyen özel kodlama yöntemini kullanarak aynı eleman ya da classlar için farklı CSS kuralları belirleyebiliyoruz. 

@media screen and (max-width: 680px) {
    img .resim1{
        width:200px;
        height:150px;
    }
}

Yukarıdaki kod genişliği 680 pixelden küçük olan ekranlarda resim1 Class'ına sahip img elemanı için yeni bir boyutlandırma tanımlıyor. Ancak her ölçü için ayrı ayrı media query'ler oluşturmak bazen sizin için sıkıcı ve zaman ve alan bir uğraşı olabilir. Özellikle resim elemanlarının her ekran boyutuna otomatik olarak ölçeklenmelerini sağlamak için aşağıdaki CSS kodunu kullanmanız hayatınızı baya kolaylaştıracaktır. İşte size resimleri responsive yapan CSS kodu:

img{
 max-width:100%;
 height:auto;
 } 

Ne kadar basitmiş değil mi? uygulamasını görmek için aşağıdaki armut resmine(laf aramızda armutu çok severim)  tıklayın ve boyutunu değiştirin.

Metin Türkçe Karakter Çevirici

Metindeki Türkçe karakterleri İngilizce'deki karşılıklarıyla değiştiren basit bir javascript uygulaması.

Harflerini çevirmek istediğiniz metni aşağıdaki kutucuğa yapıştırın ve butona basın.

Yazıdaki Türkçe Karakterlerin İngilizceleri ile değiştirilmiş halini aşağıdaki kutudan kopyalayabilirsiniz.

SEO Description Aracı

SEO DESCRIPTION KARAKTER SAYACI

SEO Description Aracı

SEO çalışması yaparken kullanabileceğiniz basit bir araç hazırladım. Sitenizin Google optimizasyonunu yaparken en çok ihtiyacınız olan şeylerden biri meta- description kısmını doldururken, kuracağınız cümlenin seo için uygun karakater sınırlamasını aşıp aşmadığını bilmek olsa gerek. Ben de u ihtiyacınızı bir nebse olsun karşılamak istedim. Description için kullanacağınız cümleyi aşağıdaki kutucuğa yazın. Bu minik SEO tool'u size description için kaç karakter kaldığını ve description sınırını ne kadar geçtiğinizi söyleyecek. SEO çalışmanızda size yardımıcı olacak. Hızlı ve pratik bir SEO aracı olsun istedim umarım başarılı olmuşumdur







Karakter Sayısı : 0

Kalan : 156

Responsive Menü Bar Örneği

HTML ve CSS kullanarak yapılmış basit bir Responsive Menu Bar çalışması. Menü barın 600px ve daha büyük ekran genişlikleri için görünümü aşağıdaki gibidir.

Eğer ekran genişliği 600px in altına düşer ise görünümü şu ekilde oluyor.

Bu görünümü menü barıın CSS koduna eklenen @media  (max-width:600px) ile başlayan kod bloğu sayesinde sağlanıyor.  Menü barın HTML ve CSS kodları aşağıdaki gibidir.  Bu kodlara bakarak CSS media query ile responsive kodlamanın mantığını kolayca kavrayabilirsiniz.

        <style type="text/css">
        .menu-kutu1{
            max-width: 600px;
            float: left;
        }
        .menu-kutu1 ul,li{
            margin: 0px;
            padding: 0px;
            float: left;
        }
            .navi{
                background-color: #333;
                color:#fff;
                list-style-type: none;
                font-family: Helvetica;
                font-size:16px;
                text-align: center;
           

            }
            .navi li{
                float: left;
                line-height: 40px;
                width: 150px;

            }
            .navi li a{
                text-decoration: none;
                height: 40px;
                color: #fff;
                display: block;
                width: 100%;

            }
            .navi li a:hover{
                background-color: #22B807;
            }
            @media (max-width:600px){
                .navi{
                    font-size: 20px;
                }
                .menu-kutu1{
                    clear: left;
                    width: 100%;
                }
                .menu-kutu1 ul{
                    width: 100%;
                }
                .navi li{
                    display: block;
                    width: 100%;
                }
            }

        </style>
        <div class="menu-kutu1">
            <ul class="navi">
                <li><a title="Anasayfa" href="#">Anasayfa</a></li>
                <li><a title="Hakkımızda" href="#">Hakkımızda</a></li>
                <li><a title="Şirket Haberleri" href="#">Şirket Haberleri</a></li>
                <li><a title="İletişim" href="#">İletişim</a></li>
            </ul>

        </div>
Bu kodları bir de canlı görün :):

• Anasayfa
• Hakkımızda
• Şirket Haberleri
• İletişim

CSS Menu Bar Kodu

CSS Hazır Menu Bar Kodu

Kolayca sitenize ekleyebileceğiniz basit bir menü çubuğu kodladım.

• Anasayfa
• Hakkımızda
• Hizmetlerimiz
• Galeri
• İletişim

Menü barın kodlarını aşağıdan kopyalayabilirsiniz.


        <style type="text/css">
        div.menu-kutu{
            background-color:#575141;
            height: 34px;
            width: 600px;
            font-family: arial;
            font-size: 12px;
            font-weight: bold;

        }
        div.menu-kutu ul{
            list-style-type: none;
            float: left;
            margin: 0px;
            padding: 0px;
            border-top:2px solid #1D3327;
            border-bottom:2px solid #1D3327;

        }
        div.menu-kutu ul li{
            width: 120px;
            float: left;
            text-align: center;
        }
        div.menu-kutu ul li a{
            text-decoration: none;
            color:#fff;
            line-height: 30px;
            display:block;
        }
        div.menu-kutu ul li a:hover{
            background-color:#F0E1B9;
            color:#545454;
            font-weight: bold;
        }

        </style>
        <div class="menu-kutu">
            <ul>
                <li><a href="#" title="Anasayfa">Anasayfa</a></li>
                <li><a href="#" title="Hakkımızda">Hakkımızda</a></li>
                <li><a href="#" title="Hizmetlerimiz">Hizmetlerimiz</a></li>
                <li><a href="#" title="Galeri">Galeri</a></li>
                <li><a href="#" title="İletişim">İletişim</a></li>

            </ul>


        </div>