Tek Renkli Bir Arka Plan Ayarlamak Geçişli Bir Arka Plan Yaratmak Değişken Bir Arka Plan Yaratmak
Belgenin en üstüne yakın bir yerde olması gerekir. Body parantezlerinin arasına background-color: yaz. Bu aşamada aşağıdaki "body" elemanına sahip olman gerekir:  body {     background-color:  }   Bu bağlamda "color" kelimesinin yalnızca bir türlü yazımı çalışır; burada "colour" kullanamazsın. Bunun için "background-color:" elemanının yanına seçtiğin rengin sayısal kodunu yaz ve sonrasında noktalı virgül koy. Örneğin; sayfanın arka planını pembe yapmak için aşağıdaki kodu yazarsın:  body {     background-color: #d24dff; } Bu noktada HTML belgenin başlığının aşağıdaki koda benzemesi gerekir:  <!DOCTYPE html> <html> <head> <style> body { background-color: #d24dff } </style> </head> </html> Body elemanında yaptığın gibi "background-color" özelliğini header ve paragraph gibi diğer elemanların arka planlarını belirlemek için kullanabilirsin. Örneğin; ana başlığa (<h1>) veya bir paragrafa (<p>) arka plan rengi uygulamak için aşağıdaki koda benzer bir kod yazarsın:  <!DOCTYPE html> <html> <head> <style> body {     background-color: #93B874; } h1 {     background-color: #00b33c; } p {     background-color: #FFFFFF); } </style> </head> <body> <h1>Yeşil Arka Planlı Başlık</h1> <p>Beyaz arka planlı paragraf</p> </body> </html> Belgenin en üstüne yakın bir yerde olması gerekir. Geçişli bir renk oluştururken iki bilgiye ihtiyacın olur: başlangıç noktası/açısı ve geçiş yapılacak renkler. Hepsinin arasında geçiş yapılabileceği birden fazla renk seçebilirsin ve geçiş için bir yön veya açı seçebilirsin.  background: linear-gradient(yön/açı, renk1, renk2, renk3 vb.); Bir yön belirlemezsen geçiş yukarıdan aşağı doğru olur. Kendi geçişini oluşturmak için aşağıdaki kodu <style></style> etiketlerinin arasına ekle:  html {     min-height: 100%;  } body {     background: -webkit-linear-gradient(#93B874, #C9DCB9);      background: -o-linear-gradient(#93B874, #C9DCB9);      background: -moz-linear-gradient(#93B874, #C9DCB9);      background: linear-gradient(#93B874, #C9DCB9);      background-color: #93B874;  }   Farklı tarayıcılar farklı geçiş uygulama fonksiyonlarına sahiptir; bu yüzden kodun birkaç farklı sürümünü eklemen gerekir. Dikey olmayan bir geçiş yaratmayı tercih edersen, renk geçişinin oluşma yönünü değiştirmek için geçişe yön ekleyebilirsin. Bunun için <style></style> etiketleri arasına aşağıdaki kodu yaz:  html {     min-height: 100%; }  body {     background: -webkit-linear-gradient(left, #93B874, #C9DCB9);      background: -o-linear-gradient(right, #93B874, #C9DCB9);      background: -moz-linear-gradient(right, #93B874, #C9DCB9);      background: linear-gradient(to right, #93B874, #C9DCB9);      background-color: #93B874;  }   Geçişte farklı yönler denemek için "left" (sol) ve "right" (sağ) etiketleriyle oynayabilirsin. Geçişler üzerinde yapabileceğin birçok şey vardır.  Örneğin; ikiden fazla renk ekleyebilmenin yanı sıra her renkten sonra bir yüzde ekleyebilirsin. Bu, her renk diliminin ne kadar alana sahip olacağını ayarlamanı sağlar. İşte bu prensibe uygun örnek bir geçiş:   background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);    Renklerine şeffaflık ekle. Bu rengin solmasını sağlar. Solmanın farklı bir renge doğru olmaması için aynı rengi kullan. Rengi belirlemek için rgba() fonksiyonunu kullanman gerekir. Bitiş değeri şeffaflığı belirler: opak için 0, şeffaf için 1 kullanılır.   background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1)); Web sitenin arka planında bir renk geçişi yaratma kodu şuna benzer:  <!DOCTYPE html> <html> <head> <style> html {     min-height: 100%; }   body {     background: -webkit-linear-gradient(left, #93B874, #C9DCB9);      background: -o-linear-gradient(right, #93B874, #C9DCB9);     background: -moz-linear-gradient(right, #93B874, #C9DCB9);      background: linear-gradient(to right, #93B874, #C9DCB9);      background-color: #93B874;  } </style> </head> <body> </body> </html> Belgenin en üstüne yakın bir yerde olması gerekir. "body {" parantezinin altına ve kapatma parantezinin üstüne aşağıdaki kodu yaz:      -webkit-animation: colorchange 60s infinite;      animation: colorchange 60s infinite;   Üstteki satır Chromium tabanlı tarayıcılar için yazılmışken, alttaki satır diğer tarayıcılar içindir. Bu aşamada geçiş yapılacak olan arka plan renklerini ve her bir rengin sayfada ne kadar kalacağını belirlemek için @keyframes kuralını kullanacaksın. Farklı tarayıcılar için yine farklı girdiler gerekecek. Kapalı olan "body" parantezinin altına aşağıdaki kod satırlarını gir:  @-webkit-keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} } @keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} }    (@-webkit-keyframes ve @keyframes kurallarının aynı arka plan renklerine ve yüzdelerine sahip olduklarını unutma. Tüm tarayıcılarda aynı deneyimin yaşanması adına tutarlılığı sağlamak için bunlara ihtiyacın olur. (0%, 25% vb.) yüzdeleri animasyonunu toplam uzunluğunun (60s) yüzdeleridir. Sayfa yüklendiği zaman 0%'da arka plan belirlenen renge (#33FFF3) döner. Animasyon 60 saniyenin yüzde 25'i oranında oynadığı zaman arka plan #7821F rengine döner. Bu böyle devam eder. İstediğin sonucu elde etmek için zamanları ve renkleri değiştirebilirsin. Değişken arka plan rengi için yazdığın kodun tamamının aşağıdakine benzemesi gerekir:  <!DOCTYPE html> <html> <head> <style> body {     -webkit-animation: colorchange 60s infinite;      animation: colorchange 60s infinite; } @-webkit-keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} } @keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} }    </style> </head> <body> </body> </html>
Belgenin "html" başlığını bul. "body" elemanına "background-color" özelliğini ekle. İstediğin arka plan rengini "background-color" özelliğine ekle. "style" bilgini incele. Arka plan renklerini diğer elemanlara uygulamak için "background-color" özelliğini kullan. Belgenin "html" başlığını bul. Bu işlemin temel sözdizimini anla. Dikey bir geçiş yarat. Yönlü bir geçiş yarat. Geçişi ayarlamak için diğer özellikleri kullan. Tamamlanan kodunu incele. Belgenin "html" başlığını bul. "body" elemanına animasyon özelliğini ekle. Renklerini animasyona ekle. Kodunu incele.
https://www.wikihow.com/Set-Background-Color-in-HTML https://www.wikihow.com/Set-Background-Color-in-HTML https://www.wikihow.com/Set-Background-Color-in-HTML
Setting a Solid Background Color Creating a Gradient Background Creating a Changing Background