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

VBagmut · 02.Декабрь.2017 19:16:49

Оцените пожалуйста качество кода.

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

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

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

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

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

.madagaskar {
    background-image: linear-gradient(180deg, #fc3d32 50%, #007e3a 50%);
    background-position: 50px 0;
    background-repeat: no-repeat;
}

Romzes · 10.Январь.2018 10:00:54

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 33%);
}

.trinidad {
/* цвета: #ce1126, #ffffff, #000, #ce1126 */
background-image:linear-gradient(45deg,#ce1126 40%, #ffffff 40%,#ffffff 43%, #000 14%, #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(180deg,#ea2839 25%, #1a206d 25%,#1a206d 50%, #ffd500 50%,#ffd500 75%, #00a551 25%);
}

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

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

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

nerealist · 06.Сентябрь.2018 12:06:29

Хорошее испытание, мне понравилось

флаги

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%, #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%, #000000 35%, #000000 65%, #ffffff 65%, #ffffff 70%, #449ed3 70%);
    /* цвета: #449ed3, #ffffff, #000000 */
}

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

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

Hierumo · 17.Декабрь.2018 07:51:12

приделайте орнамент для белорусского флага xD а то мадагаскар какой-то заморскай.

moto83 · 28.Февраль.2020 09:59:37

странно что при -45deg не получается .congo. по полпикселя идёт перекрытие и только 98% выполнения.

Mat · 03.Июль.2020 09:11:02

100% Испытание интересное!

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

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

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

.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(#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%, #000000 35%, #000000 65%, #ffffff 65%, #ffffff 70%, #449ed3 70%);
/* цвета: #449ed3, #ffffff, #000000 */
}

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

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

flex-box · 27.Январь.2021 11:18:01

У меня на 135deg отлично прошло всё)

renegade · 14.Февраль.2023 08:00:51

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

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

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

.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%, #000000 43%, #000000 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 {
  /* цвета: #fc3d32, #007e3a */
  background-image: linear-gradient(#fc3d32, #fc3d32 50%, #007e3a 50%);
  background-position: 50px 0;
  background-repeat: no-repeat;
}