100% Линейные градиенты / Испытание: флаги [11/23]

le_fay · 11.Август.2016 14:06:03

Пользуйтесь на здоровье

`html,
body {
margin: 0;
padding: 0;
}

body {
width: 505px;
height: 260px;
padding-top:30px;
padding-left:15px;
}

.flag {
float: left;
width: 150px;
height: 100px;
margin-right: 15px;
margin-bottom: 30px;
background-color: #ffffff;
border: 1px solid #aaaaaa;
}

.ireland {
background-image: linear-gradient(to right, #009b48 33%, #ffffff 33%,#ffffff 66%, #ff7900 66%)

/* цвета: #009b48, #ffffff, #ff7900 */

}

.trinidad {
background-image: linear-gradient(45deg, #ce1126 40%, #ffffff 40%, #ffffff 43%, #000 43%, #000 57%, #000 57%, #ffffff 57%, #ffffff 60%, #ce1126 60%)

/* цвета: #ce1126, #ffffff, #000, #ce1126 */

}

.congo {
background-image: linear-gradient(135deg, #009543 40%, #fbde4a 40%, #fbde4a 60%, #dc241f 60%)

/* цвета: #009543, #fbde4a, #dc241f */

}

.mauritius {
background-image: linear-gradient(#ea2839 25%, #1a206d 25%, #1a206d 50%, #ffd500 50%, #ffd500 75%, #00a551 75%);

/* цвета: #ea2839, #1a206d,  #ffd500, #00a551 */

}

.botswana {
background-image: linear-gradient(#449ed3 30%, #ffffff 30%, #ffffff 35%, #ffffff 35%, #000000 35%, #000000 40%, #000000 65%, #ffffff 55%, #ffffff 55%, #ffffff 70%, #449ed3 70%)

/* цвета: #449ed3, #ffffff, #000000 */

}

.madagaskar {
background-image: linear-gradient(#fc3d32 25%, #fc3d32 50%, #007e3a 50%);

/* цвета: #fc3d32, #007e3a */ 

background-position: 50px 0;
background-repeat: no-repeat;

}`

webhero · 31.Январь.2017 13:07:18

Извиняюсь, а почему вы два раза прописали белый цвет в флаге Ирландии, хотя там указан один раз?

Ineska · 31.Январь.2017 13:11:52

Если цвет промежуточный, то нужно прописывать две точки: первая, где цвет начинается, вторая - где заканчивается.

Boris · 05.Февраль.2017 13:35:16

Вот мои 100%
html,
body {
margin: 0;
padding: 0;
}

body {
width: 505px;
height: 260px;
padding-top:30px;
padding-left:15px;
}

.flag {
float: left;
width: 150px;
height: 100px;
margin-right: 15px;
margin-bottom: 30px;
background-color: #ffffff;
border: 1px solid #aaaaaa;
}

.ireland {
/* цвета: #009b48, #ffffff, #ff7900 */
background-image: linear-gradient(to right, #009b48 33%, #ffffff 33%, #ffffff 66%, #ff7900 66%);
}

.trinidad {
/* цвета: #ce1126, #ffffff, #000, #ce1126 */
background-image: linear-gradient(45deg, #ce1126 40%, #ffffff 40%, #ffffff 43%, #000 43%, #000 57%, #ffffff 57%, #ffffff 60%, #ce1126 60%);
}

.congo {
/* цвета: #009543, #fbde4a, #dc241f */
background-image: linear-gradient(135deg, #009543 40%, #fbde4a 40%, #fbde4a 60%, #dc241f 40%);
}

.mauritius {
/* цвета: #ea2839, #1a206d, #ffd500, #00a551 */
background-image: linear-gradient(to bottom, #ea2839 25%, #1a206d 25%, #1a206d 50%, #ffd500 50%, #ffd500 75%, #00a551 75%);
}

.botswana {
/* цвета: #449ed3, #ffffff, #000000 */
background-image: linear-gradient(#449ed3 30px, #ffffff 30px, #ffffff 35px, #000000 35px, #000000 65px, #ffffff 65px, #ffffff 70px, #449ed3 70px);
}

.madagaskar {
/* цвета: #fc3d32, #007e3a */
background-image: linear-gradient(#fc3d32 50%, #007e3a 50%);
background-position: 50px 0;
background-repeat: no-repeat;
}

Tadanobu · 02.Март.2017 08:35:18

Отличное испытание!

televizor · 25.Октябрь.2017 21:50:00

Вот мое, но так проверялка не срабатывает
html,
body {
margin: 0;
padding: 0;
}

body {
width: 505px;
height: 260px;
padding-top:30px;
padding-left:15px;
}

.flag {
float: left;
width: 150px;
height: 100px;
margin-right: 15px;
margin-bottom: 30px;
background-color: #ffffff;
border: 1px solid #aaaaaa;
}

.ireland {
background-image: linear-gradient(to right,#009b48 33%, #ffffff 33%,66%, #ff7900 66%);
}

.trinidad {
background-image: linear-gradient(45deg, #ce1126 40%, #ffffff 40%, 43%, #000 43%,57%, #ffffff 57%,60%, #ce1126 60%);
}

.congo {
background-image: linear-gradient(135deg, #009543 40%, #fbde4a 40%,60%, #dc241f 60%);
}

.mauritius {
background-image: linear-gradient(#ea2839 25%, #1a206d 25%,50%, #ffd500 50%,75%, #00a551 75%);
}

.botswana {
background-image: linear-gradient(#449ed3 30%, #ffffff 30%,35%, #000000 35%,65%, #ffffff 65%,70%, #449ed3 70%);
}

.madagaskar {
background-image: linear-gradient(#fc3d32 50%, #007e3a 50%);

background-position: 50px 0;
background-repeat: no-repeat;

}

Hierumo · 07.Ноябрь.2018 08:10:24

решение с нижней/верхней границей мне много больше нравится, жаль что в курсе про это не написано явно =)

Razor · 05.Март.2021 14:12:57

Мои 100%
.ireland {
background-image: linear-gradient(to right, #009b48 33%, #ffffff 33%, #ffffff 66%, #ff7900 66%);
/* цвета: #009b48, #ffffff, #ff7900 */
}

.trinidad {
background-image: linear-gradient(45deg, #ce1126 40%, #ffffff 40%, #ffffff 43%, #000 43%, #000 57%, #ffffff 57%, #ffffff 60%,#ce1126 60%);
/* цвета: #ce1126, #ffffff, #000, #ce1126 */
}

.congo {
background-image: linear-gradient(135deg, #009543 40%, #fbde4a 40%, #fbde4a 60%, #dc241f 60%);
/* цвета: #009543, #fbde4a, #dc241f */
}

.mauritius {
background-image: linear-gradient(to bottom, #ea2839 25%, #1a206d 25%, #1a206d 50%, #ffd500 50%, #ffd500 75%, #00a551 75%);
/* цвета: #ea2839, #1a206d, #ffd500, #00a551 */
}

.botswana {
background-image: linear-gradient(to bottom, #449ed3 30%, #ffffff 30%, #fff 35%, #000000 35%, #000 65%, #fff 65%, #fff 70%,#449ed3 70%);
/* цвета: #449ed3, #ffffff, #000000 */
}

.madagaskar {
background-image: linear-gradient(to bottom, #fc3d32 50%, #007e3a 50%);
/* цвета: #fc3d32, #007e3a */

background-position: 50px 0;
background-repeat: no-repeat;
}

antropian · 05.Апрель.2021 10:29:36

Кому интересно, теперь можно прописывать оба колорстопа сразу. Гораздо удобнее и понятнее:

.mauritius {
  background-image: linear-gradient(#ea2839 25%, #1a206d 25% 50%, #ffd500 50% 75%, #00a551 75%);
}

Adverse · 25.Июль.2021 15:04:15

почему при указании начала и конца цвета,в проверке кода указывает на ошибку в значении свойства? Код проверку прошел,но раздражает этот указательный знак)

julia.d · 30.Апрель.2022 09:31:12

Привет! попыталась найти и прочитать об изменениях, благодаря которым можно упростить запись, но не нашла. Поделитесь, пожалуйста, ссылкой где можно прочитать об этом

antropian · 30.Апрель.2022 18:14:28

Вот здесь есть: linear-gradient() на MDN

annpostnikova98 · 18.Сентябрь.2022 20:35:07

.ireland {
background-image: linear-gradient(to right, #009b48 33%, #ffffff 33%, #ffffff 66%,#ff7900 66%);
/* цвета: #009b48, #ffffff, #ff7900 */
}

.trinidad {
background-image: linear-gradient(45deg, #ce1126 40%, #ffffff 40%, #ffffff 43%, #000 43%, #000 57%, #ffffff 57%, #ffffff 60%, #ce1126 60%);
/* цвета: #ce1126, #ffffff, #000, #ce1126 */
}

.congo {
background-image: linear-gradient(135deg, #009543 40%, #fbde4a 40%, #fbde4a 60%, #dc241f 60%);
/* цвета: #009543, #fbde4a, #dc241f */
}

.mauritius {
background-image: linear-gradient(to bottom, #ea2839 25%, #1a206d 25%, #1a206d 50%, #ffd500 50%, #ffd500 75%, #00a551 75%);
/* цвета: #ea2839, #1a206d, #ffd500, #00a551 */
}

.botswana {
background-image: linear-gradient(to bottom, #449ed3 30%, #ffffff 30%, #ffffff 35%, #000000 35%, #000000 65%, #ffffff 65%, #ffffff 70%, #449ed3 70%);
/* цвета: #449ed3, #ffffff, #000000 */
}

.madagaskar {
background-image: linear-gradient(to bottom, #fc3d32 50%, #007e3a 50%);
/* цвета: #fc3d32, #007e3a */

background-position: 50px 0;
background-repeat: no-repeat;
}