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.

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

CSS prefers-color-scheme Sorgusu

CSS’de prefers-color-scheme sorgusu ile web sayfanıza giren kişinin açık renk m yoksa koyu renk mi görmek istediğini anlayabilir ve buna göre renge duyarlı bir web sayfası geliştirebilirsiniz. İşletim sisteminde koyu modu kullanan birisi girdiğinde siteniz koyu, açık modu kullanan birisi girdiğinde ise siteniz açık renkte gözükebilir.

Kullanımı ise şöyle;

// karanlık modu seçenler için
@media(preferes-color-scheme: dark){

}

// açık modu seçenler için
@media(prefers-color-scheme: light){

}

Bunu kullanarak basit bir arkaplan değiştirme örneği yapacak olursak;

<div class="test">
   test yazı
</div>
<style>
:root {
   --test-bg: #eee;
}
@media(prefers-color-scheme: dark){
   :root {
      --test-bg: #333;
   }
}
.test {
   background-color: var(--test-bg);
   padding: 15px;
}
</style>

Daha detaylı bir anlatım için videoya bakabilirsiniz 🙂 Kolay gelsin.

CSS’de Değişken Kullanımı

Herkese merhaba, bu yazımda sizlere CSS’de native olarak değişkenlerin kullanımını anlatmak istiyorum. Değişkenlere başlamadan önce sizlere bir sözde sınıftan bahsetmek istiyorum.

:root

:root sözde sınıfı, en üst düzey ebeveyn öğesini temsil eder. Yani bir html sayfada bu html etiketi anlamına geliyor. Fakat css’in kullanım alanlarının artmasıyla örneğin svg ve xml’de kullanılırken, :root sözde sınıfı başka bir öğeyi temsil ediyor olabilir.

Örnek bir değişken tanımlaması

Genelde değişkenleri tanımlarken başına iki tane tire işareti koyulması gerektiği söyleniyor. Ancak ben tiresizde denediğimde çalışıyordu, yine de ayırt edici olması adına başına iki tire koyarak :root içerisinde global bir değişen tanımlayalım.

:root {
--color: green;
}

Değişkenlerin kullanımı

Değişkenleri kullanırken var() fonksiyonunu kullanacağız. Örneğin yukarıdaki değişkeni bir etiketin rengi olarak belirlemek istersek;

h3 {
color: var(--color);
}

Local olarak değişken tanımlamak

:root içerisinde biz global olarak değişkenimizi tanımladık. Yani orada tanımlanan değişken sayfanın tamamında kullanılabilirdi. Ancak local olarak belli bir scope’u kapsayacak şekilde oluşturmak istersek, html etiketini seçip değişkeni oluşturuyoruz.

.box {
--color: blue;
}

Artık .box divinin içinde kullanılan değişken değer olarak maviyi alacak. Çünkü local tanımı bu şekilde yapmış olduk.

jQuery ile Değişkenlerin Değerini Değiştirmek

Genelde jQuery kullandığımız için bundan da bir örnek vermek istiyorum. Örneğin yukarıda oluşturduğumuz renk değişkenini jquery ile dinamik olarak ayarlamak istersek;

<input type="color" id="color">
<script src="jquery.min.js"></script>
<script>
$('#color').on('input', () => {
$(':root').css('--color', $(this).val());
});
</script>

CSS ile Mobilde Kaydırma Hassaslığı

Bildiğiniz gibi mobil için ayrı ayrı css kodları yazmak durumundayız, çünkü mobil tarayıcılar henüz her özelliği desteklemediği gibi, sadece mobil tarayıcılar için özelliklerde mevcut. Hal böyle olunca, yazarken dikkat edilmesi gereken bazı durumlar oluyor. Bu makalede en temel problem olan kaydırma problemini ele alacağız.

Nedir bu problem dersenizde, aşağıdaki gif’e gözatalım;

Şimdi bunun html ve css kodları şu şekilde;

<div class="content">
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
    Erbilen.net <br>
........
</div>
<style type="text/css">
.content {
    height: 300px;
    overflow: auto;
}
</style>

Hal böyle olunca kayma hassaslığı yok, ios cihazlarda boncuk boncuk kayar normalde. İşte kaymaya bu ivmeyi kazandırmak için css’de ufak bir kod eklemek gerekiyor. Yani kısaca;

<style type="text/css">
.content {
    height: 300px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
</style>

Ve sonuç ise;

İyi kodlamalar <3

CSS ile Kayan Label Yapımı vs jQuery Plugini

Bugün gezinirken şöyle bir jquery plugini gördüm;
https://www.jqueryscript.net/demo/jQuery-Floating-Placeholder-Text-Plugin-Placeholder-Label/

Amaç basit, input’un içine bir label yerleştiriyor, tıklayınca animasyonlu olarak onu yukarıya kaydırıyor. Eğer input’a yazı yazılırsa label yukarıda kalmaya devam ediyor ve label’ın texti değiştiriyor. Ve bunun için bir sürü kod yazması gerekmiş eklentiyi yazan arkadaşın.

Bende bu örneği sadece CSS ile nasıl yapacağımı göstermek istedim.

Kısaca şöyle bir HTML yapımız olsun;

<div class="field">
    <input type="text" required autocomplete="off" id="username" value="tayfunerbilen">
    <label for="username" title="Kullanıcı adınızı girin" data-title="Kullanıcı adı">
</div>

Ve CSS kodlarımız;

.field {
    position: relative;
    margin-bottom: 15px;
}

.field label::before {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 15px;
    line-height: 40px;
    font-size: 14px;
    color: #777;
    transition: 300ms all;
}

.field input {
    width: 100%;
    line-height: 40px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.field input:focus {
    outline: 0;
    border-color: blue;
}

.field input:valid + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    padding: 0 6px;
    left: 9px;
    content: attr(data-title);
}

.field input:focus + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    color: blue;
    padding: 0 6px;
    left: 9px;
}

Daha fazla detay için dersi izlemeniz yeterli

Demo

CSS Flex ile Sticky Footer Yapmak

Bu dersimde son zamanlarda sıkça kullandığım css’in flex özelliğini kullanarak sticky (yapışkan) footer yapımını göstermek istiyorum. Temel anlamda aslında kodlarım şunlardan ibaret;

<body>
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</body>

<style>
body {
   height: 100%;
   display: flex;
   flex-direction: column;
}
.content {
   flex: 1;
}
</style>

Daha detaylı görmek isterseniz aşağıdaki örneği inceleyebilirsiniz;

CSS :nth-child() Örnekleri

Daha önce mutlaka :nth-child() filtresini kullanmışsınızdır css yazarken. Ancak bu filtrenin bazı güzel ipuçları var, işimize yarayacak. Bu yazıda size hızlıca bunları göstermek istiyorum. Önce basit bir html yapısı kuralım;

<ul>
  <li>kutu 1</li>
  <li>kutu 2</li>
  <li>kutu 3</li>
  <li>kutu 4</li>
  <li>kutu 5</li>
  <li>kutu 6</li>
  <li>kutu 7</li>
  <li>kutu 8</li>
  <li>kutu 9</li>
  <li>kutu 10</li>
</ul>

<style>
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul {
  overflow: hidden;
}
ul li {
  list-style: none;
  float: left;
  width: 100px;
  height: 100px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}
</style>

Şimdi gelelim örneklerimize..

İlk 5’i seçmek (:nth-child(-n+5))

Burada 5 yerine kaç yazarsanız ilk o kadarı seçilecektir.

ul li:nth-child(-n+5) {
   background-color: yellow;
}

Son 5’i seçmek (:nth-child(n+6))

Burada dikkat etmeniz gereken son kaçı seçecekseniz her zaman bir fazlasını yazmanız.

ul li:nth-child(n+6) {
   background-color: yellow;
}

3 ile 8 aralığındakileri seçmek (:nth-child(n+3):nth-child(-n+8))

ul li:nth-child(n+3):nth-child(-n+8) {
   background-color: yellow;
}

3’er 3’er seçmek (:nth-child(3n))

Ayrıca odd ve even ile de kullanımı var. Her ikisini de aşağıda gösteriyorum.

ul li:nth-child(3n) {
   background-color: yellow;
}


Her 3’ü ama sadece çift olanlar olsun istersek. Yani her 3’ü seçecek ama çift olan 6. oluyor. Dolayısı ile 3. yü atlayacak 6’yı seçecek 9. yu atlayacak 12’yi seçecek.

ul li:nth-child(3n):nth-child(even) {
   background-color: yellow;
}


Tam tersinde ise tekleri seçecek. Yani 3’ü seçecek 6’yı atlayacak 9’u seçecek…

ul li:nth-child(3n):nth-child(odd) {
   background-color: yellow;
}

4. den başlayıp 3’er 3’er seçmek (:nth-child(3n+4))

Burada eğer 2. den başlayıp 4’er 4’er seçmesini isterseniz 4n+2 demeniz yeterli 🙂

ul li:nth-child(3n+4) {
   background-color: yellow;
}

Daha fazla örnek görmek isterseniz, şuraya bir gözatın: http://nthmaster.com/

Tasarımlarda Standart Sistem Fontunu Kullanmak

Kodladığımız tasarımlarda farklı işletim sistemlerinde farklı font görüntüleri alıyoruz. Çünkü ne olursa olsun hepsinin kendine göre kriterleri var ve aynı sonucu göstermiyor. Ancak sistemlerin kendi standart fontları yeterince tutarlı öyle değil mi? O halde bootstrap 4’ün yaptığı gibi bizde hangi işletim sisteminden girildiyse o işletim sistemine ait standart fontu gösterebiliriz.

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Bunu kullandıktan sonra farklı işletim sistemlerinden deneyerek sonuca ulaşabilirsiniz.

Responsive Tablo Yapımı

Başlık biraz aldatıcı olabilir ama teknik olarak responsive tablo yapımı evet 🙂
Uzun bir tablonuzu tablet ya da telefon boyutlarında nasıl düzgün şekilde gösterebileceğinizden kısaca bahsettim.

Video

Demo

http://www.erbilen.net/demo/responsive-tablo/

Not: Telefon ve tabletlerde gerçek boyutta gözükmesi için aşağıdaki meta etiketini eklemeyi unutmayın!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Css’de geniş yazıyı üç nokta ile sınırlandırmak

Bazı durumlarda gelen verinin uzunluğu bilinmediği için css ile belli bir genişlik verip taşan kısımları üç nokta koyarak kısaltmamız gerekiyor. Bu gibi durumlar için css’de text-oveflow özelliğini kullanıyoruz. ellipsis değeri bize bu görevi sağlıyor. Ancak taşanların gizlenmesi için ve yazının hiçbir zaman 2. satıra inmemesi için oveflow ve white-spcae özellikleri de bize lazım. Örnek vermek gerekirse;

<div>test et bakalım ne kadar uzun bir yazı..</div>

Bunu kısaltmak istediğimde yapmam gereken;

div {
    width: 60px;
    overflow: hidden; /* taşanları gizle */
    white-space: nowrap; /* alt satıra hiç inme */
    text-overflow: ellipsis; /* eğer uzunsa üç nokta koy */
}

Ben SCSS ve LESS içinde sizlere mixinlerimi paylaşayım, kullanmak isteyenler için daha kolaylık olur.

SCSS dotdotdot Mixin

@mixin dotdotdot($width, $display: block){
  width: $width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: $display;
}

Kullanımı;

div {
    @include dotdotdot(60px);
}

LESS dotdotdot Mixin

.dotdotdot(@width, @display: block){
  width: @width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: @display;
}

Kullanımı;

div {
    .dotdotdot(60px);
}

İşte bu kadar, kolay gelsin 🙂