Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Tayfun Erbilen tarafından Prototurk.com için hazırlanan bir eğitim içeriğidir. Tayfun, web geliştirme konusunda bilgi paylaşmaktadır.
- Videoda, beyaz bir ürünün farklı renklerde nasıl görüneceğini göstermek için CSS'deki mix blend mode özelliğinin nasıl kullanılacağı anlatılmaktadır. Tayfun, önce bir beyaz koltuğun SVG formatına dönüştürülmesi, ardından HTML ve CSS kodlarıyla bu SVG'nin üzerine renk değiştirme işleminin nasıl yapılacağını adım adım göstermektedir. Ayrıca jQuery ile renk seçici ekleme ve CSS ile bu renk seçici ile SVG'nin rengini değiştirme işlemleri de detaylı olarak açıklanmaktadır.
- Ürün Görsellerini Farklı Renklerde Gösterme
- Video, beyaz bir ürünün farklı renklerde nasıl göründüğünü kullanıcıya göstermek için bir yöntem anlatıyor.
- Bu yöntem için beyaz görselin SVG formatına dönüştürülmesi ve CSS'deki mix blend mode özelliği kullanılıyor.
- Mix blend mode, iki etiketin renklerini birbirine karıştırmak için kullanılan bir özellik.
- 01:19SVG Formatına Dönüştürme
- Beyaz görselin SVG formatına dönüştürülmesi için Editor Metot sitesi kullanılıyor.
- Görselin arka planı kaldırılıp, pen tool ile dikkatli bir şekilde kesiliyor.
- Arka plandaki görsel silinerek SVG formatındaki resim hazır hale getiriliyor.
- 03:29HTML ve CSS Kodlaması
- HTML sayfasında image div'i oluşturulup, içinde SVG resmi yerleştiriliyor.
- SVG'ye "svg" id'si veriliyor ve position relative özelliği ekleniyor.
- SVG'nin path'i seçiliyor ve mix blend mode özelliği "multiply" olarak ayarlanıyor.
- 05:03Renk Değiştirme ve jQuery Kullanımı
- SVG'nin fill özelliği değiştirilerek farklı renkler verilebiliyor.
- jQuery kullanılarak renk seçici ekleniyor ve renk değiştiğinde konsola yazdırılıyor.
- Path'e "svg-path" id'si verilerek CSS ile renk değiştirme işlemi yapılıyor.
- 07:52Sonuç ve Öneriler
- Bu yöntem sayesinde ürünün arkasındaki çizgiler, gölgeler ve inikler bozulmadan farklı renklere bürünmesi sağlanıyor.
- Çok koyu renklerde olumlu sonuç alınamıyor, bu durumda opacity değeri %50 olarak ayarlanabilir.
- Bu yöntem birçok yerde kullanılabilir ve orijinal rengi birebir korumak isteyenler için ideal bir çözüm sunuyor.