CSS ile Tek Satırda Koyu-Açık Mod Yapılır mı?
HTML-код
- Опубликовано: 12 сен 2020
- Bu ders Tayfun Erbilen tarafından prototurk.com için hazırlanmıştır.
Ders hazırlanırken yararlanılan kaynak:
dev.to/ekaterina_vu/dark-mode...
Kısaca css'de filter özelliğinin invert() fonksiyonunu kullanarak renkleri tersine çeviriyoruz ve tek satırda koyu mod ya da açık mod yapabiliyoruz. Elbette biraz düzenleme gerektiriyor ancak pratik çözüm arayanlar için güzel bir sonuç veriyor.
Kanala destek olmak için KATIL üzerinden size uygun seçeneği belirleyerek desteğinizi gösterebilirsiniz.
/ @prototurkcom
Yeni çıkardığım PHP Eğitim Setime gözatın!
udemy.com/php-egitim-seti/?co...
-- Sosyal Hesaplarım;
/ erbilennet
/ prototurkcom
/ tayfunerbilen
/ prototurkcom
/ tayfunerbilen
Derste bahsi geçen makale: dev.to/ekaterina_vu/dark-mode-with-one-line-of-code-4lkm
Bu arada makalede yorumlarda da bir öneri vermişler, ek olarak hue-rotate() kullanarakt renklerde yakın tonu yakalayabiliyorsunuz onu da bir denemeyi unutmayın! :)
En sevdigim youtube kanali, harikasin Tayfun hoca 😊
sen süpersin abi 💜 2 günde 2 video
kral devam et nolur valla piyasadaki en iyilerdensin
Videolari izlemeden once like atiyorum.izleyince beğeniceğime zaten eminim
Her zamanki gibi süpersin Tayfun hocam emeklerinize sağlık. Bu arada prototürk'ü bir ara responsive yapsanız iyi olur zira genel olarak mobilden giriyoruz
Teşekkürler Hocam
Aslında proje ödevim yaparken bu özellik ile dark mode yapmayı denemiştim. Lakin renklerde ve bazı yerlerde sorun olduğu için bırakıp sizden dark mode nasıl yapılır diye video çekmenizi istemiştim. Ve 2-3 gün sonra hem js hemde php ile nasıl yapılacağını göstermiştiniz. Sayenizde eklemiştim. Belki o zaman bırakmak yerine biraz daha üstüne gitseydim daha önceden bulmuş olacaktım. Seyenizde çok şey öğrendim teşekkürler.
ÇOK güzel
Güzelmiş :D
her siteye lazım bundan ben de kullanacağım projelerimde teşekkürler.
Peki bu koyu moda buton nasıl ekleriz?
Reiz heykelini diksek taşaklarına beton yetmez !
yine tek satırla (ufak tefek düzenlemeler olacak tabii)
*:not(img):not() {
filter: invert(1);
}
yaparsak daha mantıklı olmaz mı? img lar ve ler dışında tüm nesneler?
@prototurk
* ile tümünü seçince bazı problemler oluyordu o yüzden öyle kullanmak istemedim, demek istediğimi birkaç sitede test ederek anlayabilirsin belki :)
Tayfun merhaba, video için teşekkürler. Ben bir şey sormak istiyorum. Geliştirici konsolundan inline olarak CSS özelliği verdin ancak sayfa değiştirince bu özellikler kaybolmadı. Bunu nasıl yaptın?
prototurk'de sayfa yenilenmeden geçiyor o yüzden yazdığım css geçerli oldu :)
@@PROTOTURKCOM pjax mı kullanıyorsun o geçişler için peki, yoksa react gibi bir framework falan mı kullandın yazarken o yüzden mi oluyor? Yani kısaca sayfa geçişini nasıl yaptın :)
evet ajax var ama yeni versiyonda react' e geçirmeyi planlıyorum
@@PROTOTURKCOM aslında yanlış yazmadım. Pjax sormuştum ama o da ajax ile çalışıyor zaten. Neyse bir de şunu paylaşmak istiyorum.
filter: invert(1) hue-rotate(180deg)
şeklinde yazınca renkler sabit kalıyor. Sadece siyah ve beyazlar renk değiştiriyor. Tabi griler ile birlikte. Mesela iş aldığın sitedeki turuncular mavi olmak yerine turuncu olarak kalabilir. Bu da benden olsun :)
eyvallah :) yorum sabitleyip belirtmiştim bunu ben de ama yine de teşekkürler ^^
Hocam prototurk (.) com'daki sayfada bazı kısımlar var böyle şekilli gibi onlar nasıl yapılıyor?
getwaves.io/ bu siteden oluşturuyorsun svg olarak sonra sayfana koyuyorsun :)
@@PROTOTURKCOM teşekkür ederim hocam, başarılar.
@@PROTOTURKCOM Bende bu sorunun cevabını arıyordum :) site tasarımı çok başarılı olmuş hocam kolay gelsin
674 görüntüleme 106 beğenme! Bilgiye saygınız olsun biraz yavv sadece bir kere dokunacaksın oraya beleş yavv para falan istemiyorlar!
Dərsdə istifadə edilən template. P.S mən başqa birini istifadə etdim))
bulmatemplates.github.io/bulma-templates/templates/blog-tailsaw.html