Второе испытание 16/23


#41
16/23
/* Базовые стили, изменять не нужно */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 520px;
  min-height: 270px;
  padding: 20px;

  font-size: 14px;
  line-height: 1.5;
  font-family: "Arial", sans-serif;
  color: white;

  background-color: #3a78a1;
  background-image: url("grid.png");
  background-repeat: repeat;
  background-position: -80px -80px;
}

input[type="text"] {
  height: 38px;

  font-size: 18px;
  font-family: inherit;

  border: 2px solid #cccccc;
  border-radius: 5px;
}

.block {
  background-color: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */
input {
  box-sizing: border-box;
  padding:0 0 0 10px;
}
.block1 {
  border: 2px solid white;
}
.block2 {
  padding: 20px; 
  margin: 18px;
}

#42

Всех приветствую, я тут новенький … Подскажите насколько не приемлемо мое решение:
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;

font-size: 14px;
line-height: 1.5;
font-family: “Arial”, sans-serif;
color: white;

background-color: #3a78a1;
background-image: url(“grid.png”);
background-repeat: repeat;
background-position: -80px -80px;
}

input[type=“text”] {
height: 38px;

font-size: 18px;
font-family: inherit;

border: 2px solid #cccccc;
border-radius: 5px;
}

.block {
background-color: rgba(0, 255, 255, 0.2);
}

/* Пользовательские стили */
.block {
padding: 20px !important;
}

.block1 {
border: 2px solid white;
padding: 18px !important;
}

input[type=“text”] {
padding-left: 10px;
box-sizing: border-box;
}


#43

попробуйте сделать без !important, используя внешний отступ


#44

спасибо, попробую.


#45

Подскажите кто-нибудь, я понимаю как задан цвет целиком для класса block, а каким образом он ранжируется здесь на два цвета? Где это прописано, что цвет block1 светлее, чем цвет block2??? http://prntscr.com/mqe8s1


#46

обратите внимание, что цвет задан в формате rgba, т.е.
background-color: rgba(0, 255, 255, 0.2);
и вот это 0.2 это прозрачность, которая задваивается при наложении слоев.
по факту цвет один. но т.к. он прозрачный, то они накладываются друг на друга искажая восприятие.


#47

Спасибо, теперь более или менее понятно