IRCRehberi.Net- Türkiyenin En iyi IRC ve Genel Forum Sitesi  
 sohbet
derya sohbet


Programlama C , C# , C++ , Java , Python , Php , Javascript , Matlab Örnekleri

14Beğeni(ler)
  • 5 Post By Mix
  • 1 Post By Sim
  • 1 Post By SosiN
  • 1 Post By Software
  • 1 Post By OmerAti
  • 1 Post By yeSa
  • 1 Post By WildCat
  • 1 Post By ZeyNa
  • 1 Post By Artist
  • 1 Post By oMeN


 
 
Seçenekler Stil
Alt 02 Haziran 2022, 20:23   #1
Mix
★ GeneraL ★
Mix - ait Kullanıcı Resmi (Avatar)

Standart Dönüşüm Simgesi ile Light/Dark Geçiş | Sadece Html Css ile Açık Karanlık Mod

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Açık Koyu Mod için temel bir HTML yapısıyla başlayalım.

HTML Kodu

PHP- Kodu

<label for="theme" class="theme">  
      <
span>Light</span>  
      <
span class="theme__toggle-wrap">  
           <
input id="theme" class="theme__toggle" type="checkbox" role="switch" name="theme" value="dark">  
           <
span class="theme__fill"></span>  
           <
span class="theme__icon">  
                <
span class="theme__icon-part"></span>  
                <
span class="theme__icon-part"></span>  
                <
span class="theme__icon-part"></span>  
                <
span class="theme__icon-part"></span>  
                <
span class="theme__icon-part"></span>  
                <
span class="theme__icon-part"></span>  
                <
span class="theme__icon-part"></span>  
                <
span class="theme__icon-part"></span>  
                <
span class="theme__icon-part"></span>  
           </
span>  
      </
span>  
      <
span>Dark</span>  
 </
label

Açık Karanlık Modu için tüm HTML kodu vardır. Şimdi çıktıyı CSS olmadan görebilirsiniz, ardından Açık Karanlık Modu için CSS yazıyoruz.

Çıktı

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

CSS code

PHP- Kodu

* {  
      
border0;  
      
box-sizingborder-box;  
      
margin0;  
      
padding0;  
 }  
 :
root {  
      --
hue223;  
      --
bghsl(var(--hue),10%,100%);  
      --
fghsl(var(--hue),10%,0%);  
      --
primaryhsl(var(--hue),90%,55%);  
      --
primaryThsla(var(--hue),90%,55%,0);  
      --
transDur0.3s;  
      
font-sizecalc(16px + (32 16) * (100vw 320px) / (1280 320));  
 }  
 
html,  
 
body {  
      
background-color: var(--bg);  
 }  
 
body,  
 
input {  
      
font1em/1.5 Fredokasans-serif;  
 }  
 
body {  
      
color: var(--fg);  
      
height100vh;  
      
displaygrid;  
      
place-itemscenter;  
 }  
 
/* Default */  
 
.theme {  
      
displayflex;  
      
align-itemscenter;  
      -
webkit-tap-highlight-colortransparent;  
 }  
 .
theme__fill,  
 .
theme__icon {  
      
transitiontransform var(--transDurease-in-out;  
 }  
 .
theme__fill {  
      
background-color: var(--bg);  
      
displayblock;  
      
mix-blend-modedifference;  
      
positionfixed;  
      
inset0;  
      
height100%;  
      
transformtranslateX(-100%);  
 }  
 .
theme__icon,  
 .
theme__toggle {  
      
z-index1;  
 }  
 .
theme__icon,  
 .
theme__icon-part {  
      
positionabsolute;  
 }  
 .
theme__icon {  
      
displayblock;  
      
top0.75em;  
      
left0.75em;  
      
width1.5em;  
      
height1.5em;  
 }  
 .
theme__icon-part {  
      
border-radius50%;  
      
box-shadow0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;  
      
topcalc(50% - 0.5em);  
      
leftcalc(50% - 0.5em);  
      
width1em;  
      
height1em;  
      
transition:  
           
box-shadow var(--transDurease-in-out,  
           
opacity var(--transDurease-in-out,  
           
transform var(--transDurease-in-out;  
      
transformscale(0.5);  
 }  
 .
theme__icon-part ~ .theme__icon-part {  
      
background-colorhsl(0,0%,100%);  
      
border-radius0.05em;  
      
box-shadownone;  
      
top50%;  
      
leftcalc(50% - 0.05em);  
      
transformrotate(0degtranslateY(0.5em);  
      
transform-origin500;  
      
width0.1em;  
      
height0.2em;  
 }  
 .
theme__icon-part:nth-child(3) {  
      
transformrotate(45degtranslateY(0.5em);  
 }  
 .
theme__icon-part:nth-child(4) {  
      
transformrotate(90degtranslateY(0.5em);  
 }  
 .
theme__icon-part:nth-child(5) {  
      
transformrotate(135degtranslateY(0.5em);  
 }  
 .
theme__icon-part:nth-child(6) {  
      
transformrotate(180degtranslateY(0.5em);  
 }  
 .
theme__icon-part:nth-child(7) {  
      
transformrotate(225degtranslateY(0.5em);  
 }  
 .
theme__icon-part:nth-child(8) {  
      
transformrotate(270degtranslateY(0.5em);  
 }  
 .
theme__icon-part:nth-child(9) {  
      
transformrotate(315degtranslateY(0.5em);  
 }  
 .
theme__label,  
 .
theme__toggle,  
 .
theme__toggle-wrap {  
      
positionrelative;  
 }  
 .
theme__toggle,  
 .
theme__toggle:before {  
      
displayblock;  
 }  
 .
theme__toggle {  
      
background-colorhsl(48,90%,85%);  
      
border-radius25% / 50%;  
      
box-shadow0 0 0 0.125em var(--primaryT);  
      
padding0.25em;  
      
width6em;  
      
height3em;  
      -
webkit-appearancenone;  
      
appearancenone;  
      
transition:  
           
background-color var(--transDurease-in-out,  
           
box-shadow 0.15s ease-in-out,  
           
transform var(--transDurease-in-out;  
 }  
 .
theme__toggle:before {  
      
background-colorhsl(48,90%,55%);  
      
border-radius50%;  
      
content"";  
      
width2.5em;  
      
height2.5em;  
      
transition:  
           
background-color var(--transDurease-in-out,  
           
transform var(--transDurease-in-out;  
 }  
 .
theme__toggle:focus {  
      
box-shadow0 0 0 0.125em var(--primary);  
      
outlinetransparent;  
 }  
 
/* Checked */  
 
.theme__toggle:checked {  
      
background-colorhsl(198,90%,15%);  
 }  
 .
theme__toggle:checked:before,  
 .
theme__toggle:checked ~ .theme__icon {  
      
transformtranslateX(3em);  
 }  
 .
theme__toggle:checked:before {  
      
background-colorhsl(198,90%,55%);  
 }  
 .
theme__toggle:checked ~ .theme__fill {  
      
transformtranslateX(0);  
 }  
 .
theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) {  
      
box-shadow0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;  
      
transformscale(1);  
 }  
 .
theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part {  
      
opacity0;  
 }  
 .
theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) {  
      
transformrotate(45degtranslateY(0.8em);  
 }  
 .
theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) {  
      
transformrotate(90degtranslateY(0.8em);  
 }  
 .
theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) {  
      
transformrotate(135degtranslateY(0.8em);  
 }  
 .
theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) {  
      
transformrotate(180degtranslateY(0.8em);  
 }  
 .
theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) {  
      
transformrotate(225degtranslateY(0.8em);  
 }  
 .
theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) {  
      
transformrotate(270degtranslateY(0.8em);  
 }  
 .
theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) {  
      
transformrotate(315degtranslateY(0.8em);  
 }  
 .
theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) {  
      
transformrotate(360degtranslateY(0.8em);  
 }  
 .
theme__toggle-wrap {  
      
margin0 0.75em;  
 }  
 @
supports selector(:focus-visible) {  
      .
theme__toggle:focus {  
           
box-shadow0 0 0 0.125em var(--primaryT);  
      }  
      .
theme__toggle:focus-visible {  
           
box-shadow0 0 0 0.125em var(--primary);  
      }  
 } 

Sonuç

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]


Alıntı:
Written by - Code With Random/Anki
code by - Jon Kantner
 
Alt 02 Haziran 2022, 20:28   #2
Sim
civciv~🐥
Sim - ait Kullanıcı Resmi (Avatar)

Standart

emegine saglik @[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

________________

Hope. . . ✨
 
Alt 02 Haziran 2022, 20:35   #3
SosiN - ait Kullanıcı Resmi (Avatar)

Standart

@[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] emeğine sağlık.

________________


Dönüşüm Simgesi ile Light/Dark Geçiş | Sadece Html Css ile Açık Karanlık Mod
 
Alt 02 Haziran 2022, 20:36   #4
Sükut eyledim , "Kahrı var" dediler.
Software - ait Kullanıcı Resmi (Avatar)

Standart

Emeğinize sağlık..

________________

Sükut eyledim, ''Kahrı var'' dediler. Biraz söyledim, ''Zehri'' var dediler.

Sustum, kahrından susuyor dediler; biraz konuştum, zehrini kusuyor dediler..
 
Alt 02 Haziran 2022, 21:21   #5
Standart

Faydali Paylaşım Emegine Sağlık !

 
Alt 02 Haziran 2022, 22:16   #6
Standart

Emeğine sağlık

 
Alt 03 Haziran 2022, 13:36   #7
Standart

emegine saglik

________________

No MoRe DramA
 
Alt 04 Haziran 2022, 15:13   #8
Standart

Emeğine sağlık

 
Alt 04 Haziran 2022, 15:30   #9
Yanlış Bildiğin Yolda; Herkesle yürüyeceğine Doğru Bildiğin Yolda; Tek başına yürü..
Artist - ait Kullanıcı Resmi (Avatar)

Standart

Emeğine sağlık

________________

Dönüşüm Simgesi ile Light/Dark Geçiş | Sadece Html Css ile Açık Karanlık Mod
 
Alt 05 Haziran 2022, 14:02   #10
✰ ÖzeL..
oMeN - ait Kullanıcı Resmi (Avatar)

Standart

Emeğine sağlık @[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

________________

Edep; aklın Tercümanıdır. İnsan edebi kadar akıllı, Aklı kadar şerefli, Şerefi kadar Kıymetlidir. Massive..




~ E & B ~
 


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Kapalı
Pingbacks are Kapalı
Refbacks are Kapalı





Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 16:36.