CSS ve SVG ile Görselleri İstediğiniz Gibi Renklendirin

Genelde alışveriş sitelerinde bir şapka beğenirsiniz bunun kırmızısı mavisi vs. nasıl olur diye diğer renklerine bakarsınız. Müşteri olarak pek ilgilenmeyiz ancak bunu kod tarafında yapmak istersek, her renk için ayrı resim mi eklememiz gerekir? Ya da her renk için o üründen bulunması mı? Peki ya müşteri kendi rengini seçip o rengin o üründe nasıl göründüğünü görmek isterse? İşte bu noktada CSS’te mix-blend-mode özelliği devreye giriyor 🙂

Yapmanız gereken, renklendirmek istediğiniz ürünün beyaz bir versiyonuna sahip olmak. Örneğin bu koltuğu ele alalım.

Illustrator ya da https://editor.method.ac/ bu adrese girerek pen tool ile koltuğun beyaz bölümlerini seçelim. Ve herhangi bir renkte bu şeklin SVG formatında kodlarına sahip olalım.

Ve artık yapmamız gereken, orijinal resim ile bu svg’yi üst üste getirmek. Önce HTML’i oluşturalım.

<div class="image">
    <svg id="svg" width="1000" height="393.99999999999994" xmlns="http://www.w3.org/2000/svg">
        <path id="svg-path" d="m8.13981,128.1789c0,-0.5618 -6.17985,-51.12424 -6.4544,-51.21163c0.27455,0.08739 10.94884,-8.33969 10.6743,-8.42707c0.27454,0.08738 83.42167,-15.08135 83.14712,-15.16874c0.27455,0.08739 6.4544,-3.84524 6.17986,-3.93263c0.27454,0.08739 -8.15253,-33.0591 -8.42708,-33.14649c0.27455,0.08739 4.76899,-6.65427 4.49444,-6.74166c0.27455,0.08739 12.07245,-3.28344 11.7979,-3.37083c0.27455,0.08739 68.81474,6.26725 68.5402,6.17986c0.27454,0.08739 162.07435,-1.59803 161.79981,-1.68542c0.27454,0.08739 110.9501,-1.03622 110.67556,-1.12361c0.27454,0.08739 32.29742,-1.59802 32.02288,-1.68541c0.27454,0.08739 8.70162,-2.15983 8.42707,-2.24722c0.27455,0.08739 12.07245,7.95265 11.79791,7.86527c0.27454,0.08738 10.94883,-9.4633 10.67429,-9.55069c0.27454,0.08739 22.74674,0.6492 22.47219,0.56181c0.27455,0.08739 25.55577,3.45822 25.28123,3.37083c0.27454,0.08739 208.14234,-3.28344 207.8678,-3.37083c0.27454,0.08739 131.73689,-1.03622 132.29869,-1.03622c0.56181,0 11.7979,3.37083 11.2361,3.37083c-0.56181,0 0.5618,11.7979 0.28727,11.71051c0.27453,0.08739 -1.41088,23.12139 -1.97268,23.12139c-0.56181,0 -2.80903,10.11249 -3.08357,10.0251c0.27454,0.08739 2.52176,5.14363 2.24722,5.05624c0.27454,0.08739 57.57864,12.4471 57.3041,12.35971c0.27454,0.08739 30.0502,10.76168 29.77566,10.67429c0.27454,0.08739 3.08356,11.32349 3.08356,11.32349c0,0 -26.40483,166.85605 -26.67937,166.76866c0.27454,0.08739 -10.39975,27.61583 -10.39975,27.61583c0,0 -17.41595,0 -17.41595,0c0,0 -226.96918,-1.12361 -227.24372,-1.211c0.27454,0.08739 -287.36956,-1.59802 -287.6441,-1.68541c0.27454,0.08739 -289.05497,-1.59803 -289.61678,-1.59803c-0.5618,0 -85.95615,-1.12361 -86.51795,-1.12361c-0.56181,0 -8.98888,-1.68541 -9.55068,-1.68541c-0.56181,0 -6.17986,1.68541 -6.74166,1.12361c-0.56181,-0.56181 -12.35971,-52.80966 -12.63426,-52.89705c0.27455,0.08739 -17.70321,-97.66666 -17.70321,-98.22847z" stroke-width="1.5" fill="#fff"/>
    </svg>
    <img src="koltuk.png" alt="">
</div>

Şimdi de CSS yazalım.

.image {
    margin: 50px auto;
    width: 1000px;
    position: relative
}
.image #svg {
    position: absolute;
    top: 0;
    left: 0;
}
.image #svg path {
    mix-blend-mode: multiply; /* işin sırrı burada */
    fill: #fa6585; /* burası istediğimiz renk olabilir */
}

mix-blend-mode ile iki html etiketinin renklerini birbirine karıştırdık ve ortaya şöyle harika bir görüntü çıktı;

Artık renk kodunu değiştirerek istediğiniz her rengi belirleyebilirsiniz, üstelik çizgileri kırışıklıkları gölgeleri vb. hiçbir şey orjinalliğini yitirmeden bunu yapabilirsiniz.

View this post on Instagram

Görsellerinizde gölgeleri, çizgileri vs. bozulmadan tamamen dinamik bir şekilde CSS ve SVG ile renk tanımı yapabilirsiniz. Nasıl yapıldığını öğrenmek için dersime gözatmayı unutmayın 🙂 İyi seyirler. https://www.youtube.com/watch?v=o_f_P9Zqk74 #css #svg #prototürk

A post shared by Tayfun Erbilen (@tayfunerbilen) on Sep 6, 2019 at 12:00pm PDT

Daha fazla detayı videomu izleyerek öğrenebilirsiniz, iyi kodlamalar 🙂