CSS'de spesifik bir etiket içerisindeki spesifik satıra nasıl ulaşılır?

Calone dedi:

HTML:Panoya kopyala

<div id="div1">
   <div class="div1"></div>
   <div class="div2"></div>
   <div id="div3"></div>
   <div id="div4"></div>
</div>

CSS:Panoya kopyala

#div1 .div1 {
    height:40px;
    width:40px;
    background-color:#222222;
}
#div1 .div2 {
    height:40px;
    width:40px;
    background-color:#000000;
}

#div1 #div3 {
    height:40px;
    width:40px;
    background-color:#222222;
}

#div1 #div4 {
    height:40px;
    width:40px;
    background-color:#000000;
}

CSS sana bir sürü seçenek sunuyor bunu da inceleyebilirsin.

Genişletmek için tıkla...

William Crusader dedi:

Ayrıca gittikçe rengi değişen (örnekteki gibi) bir arka plan isterseniz bu site mükemmel.

CSS Gradient – Generator, Maker, and Background

As a free CSS gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

cssgradient.io

Eki Görüntüle 1474864

Genişletmek için tıkla...

Calone dedi:

Teşekkürler. Bu site birbiriyle uyumlu renkleri renk paleti olarak veriyor Color Palettes for Designers and Artists - Color Hunt.

Genişletmek için tıkla...

William Crusader dedi:

Bu siteyi pek beğenmedim. Bu daha iyi gibi.

uiGradients - Beautiful colored gradients

uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

uigradients.com

Genişletmek için tıkla...

Calone dedi:

GlyphSearch

Search for icons from Font Awesome, Foundation, Glyphicons, IcoMoon, Ionicons, Material Design, and Octicons

glyphsearch.com

Genişletmek için tıkla...

William Crusader dedi:

Ayrıca gittikçe rengi değişen (örnekteki gibi) bir arka plan isterseniz bu site mükemmel.

CSS Gradient – Generator, Maker, and Background

As a free CSS gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

cssgradient.io

Eki Görüntüle 1474864

Genişletmek için tıkla...

deezwend dedi:

Hocam harikasınız teşekkürler. Umarım VS Code uzantısı vardır bunun için.

Genişletmek için tıkla...

deezwend dedi:

Mesela type'i submit olan bir butonu mor yapmak istersem (ve onlara bir ID veya Class tanımlamak istemezsem) yapabilir miyim böyle bir şey?

Genişletmek için tıkla...

William Crusader dedi:

Sanırım şöyle bir şey yapabilirsiniz.
Ayrıca türünün (type) hiç bir önemi yok

HTML:Panoya kopyala

<button style="background-color:purple">sumbit</button>

Genişletmek için tıkla...

input[type=button] {
  background-color: #ff0000;
  border: none;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
input[type=submit] {
  background-color: #2986cc;
  border: none;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
input[type=reset] {
  background-color: #faff00;
  border: none;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">

dgknbzglu dedi:

Evet yapabilirsin. Aşağıdaki kodla tam olarak istediğin şeyi yaparsın hemde uygun bir şekilde.



Bu arkadaşın gösterdiği şekilde her butona tek tek stil ekleyip sağlıklı bir sonuç elde edemezsin. Evet sonuç odağı konusunda problem yok ama stabil değil. Önermiyorum.

Aşağıdaki kodları stil dosyana yazdıktan sonra herhangi bir yere submit reset veya normal bir buton koyduğunda farkı göreceksin. Kolay gelsin.

CSS:Panoya kopyala

input[type=button] {
  background-color: #ff0000;
  border: none;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
input[type=submit] {
  background-color: #2986cc;
  border: none;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
input[type=reset] {
  background-color: #faff00;
  border: none;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

HTML:Panoya kopyala

<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">

Genişletmek için tıkla...