AlexZaw

<div class="wrap">
  <div class="block">item1</div>
  <div class="block">item2</div>
  <div class="block">item3</div>
  <div class="block">item4</div>
</div>

 

.wrap{
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid #000;
}
.block{
  padding: 15px 30px;
}

.block:nth-child(1){
  background-color: #31D9FF;
}

.block:nth-child(2){
background-color: #67B2FF;
}

.block:nth-child(3){
background-color: #C289FF;
}

.block:nth-child(4){
background-color: #FF81FF;
}

.block:nth-child(4n + 1),
.block:nth-child(4n + 4) {
  position: relative;
}

.block:nth-child(4n + 1):before,
.block:nth-child(4n + 4):before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 100%;
  width: calc(100vw - 100%);
  height: 100%;
}

.block:nth-child(4n + 1):before{
  background: inherit;
}

.block:nth-child(4n + 4):before {
  box-shadow: 100vw 0 0 0 #FF81FF;
}

 

See the Pen by Alexandr (@AlexZaw) on CodePen.

12.08.2021 в 20:04, klierik сказал:

Code Review Вашей работы доступен по адресу:

Прям захотелось чтобы мою работу так же по косточкам разобрали 🙂

12.08.2021 в 19:07, Dessik123 сказал:

почему же не работает class?

Потому, что style.css не сохранен 🙂

19 часов назад, Алеся сказал:

Путь к файлу, если что, проверила

Судя по указанному пути папка с вашим шрифтом лежит в одной папке с файлом css

т.е. структура выглядит примерно так:

.
|   index.html
|   style.css
|
\—fonts
        Lato-Italic.ttf

так ли это на самом деле?

16 часов назад, CrystalCrystal сказал:

Почему я ошибаюсь?

Потому, что ширина сайдбара в 330 пикселей это ширина вместе с margin-ами слева и справа по 10 пикселей. Ну а так как margin это внешний отступ и он не закрашивается фоном сайдбара, отсюда и расстояние

8 часов назад, SergeAnt сказал:

HTML идеологически описывает логическую структуру документа, а не его внешний вид. 

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

8 часов назад, SergeAnt сказал:

.Язык программирования - набор правил, позволяющий человеку однозначно сформулировать компьютеру задачу

Ну вот как минимум по этому критерию CSS не проходит в ЯП 🙂

 

8 часов назад, SergeAnt сказал:

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

Абсолютно эквивалентны и абсолютно во всех случаях можно заменить как универсальное свойство отдельными свойствами, так и наоборот. Другое дело что некоторые отдельные свойства не имеют смысла в отрыве от других, но заменить можно всегда

37 минут назад, SergeAnt сказал:

Безусловно, CSS - это средство программирования, язык программирования, инструмент программирования

CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки

HTML и CSS описывают представление , тогда как языки программирования описывают функцию

52 минуты назад, SergeAnt сказал:

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

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

2 часа назад, SergeAnt сказал:

во всех более-менее известных алгоритмических языках

Так CSS это не язык программирования, поэтому здесь нет четких правил

2 часа назад, SergeAnt сказал:

Плюс к этому разнообразие реакций браузеров

А это вообще не является проблемой CSS 🙂

2 часа назад, SergeAnt сказал:

Возможно, при попытке расположить гладкий фон на втором месте

В этом то и дело, цвет фона должен задаваться в конце. А вообще это извечная проблема при использовании сокращенных свойств. Чтобы не путаться можно использовать полные свойства, тогда никаких конфликтов и недопонимания не будет.

16 минут назад, SergeAnt сказал:

Вот именно, если ЗАЗУБРИТЬ и методом проб и ошибок убедиться, что работает, а что нет. Интуитивно для новичка не всегда понятно.

Назовите хоть один язык где ничего не надо зубрить и все интуитивно понятно 🙂

16 минут назад, SergeAnt сказал:

в котором гладкий фон на последнем месте, но оно не работает:

background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.

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

Градиенты это не цвет фона, это фоновое изображение

Это как покрасить обои на стене и на них повесить картину. Фоном (background-color)будут являться обои, а картина будет градиентом, т.е. background-image

Если вы поклеите обои поверх картины вы ведь не будете удивляться почему вдруг картины не стало видно? Так и здесь

3 часа назад, SergeAnt сказал:

Насколько всё-таки нелогичен и неудобен CSS.

Все удобно и логично если знать как он работает:

Предупреждение: background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.

https://developer.mozilla.org/ru/docs/Web/CSS/background

28.06.2021 в 16:21, SergeAnt сказал:

почему не работает простая заливка

Потому, что слой с обычным фоновым цветом (другими словами это обычное свойство background-color) всегда находится в самом низу. А вот положением градиентов которые на самом деле задаются с помощью background-image мы можем управлять

23.06.2021 в 19:43, SergeAnt сказал:

Хотелось бы обойтись одним DIVом

Можно так:

<div class="box">Some text</div>

.box{
  position: relative;
  margin: 50px;
  width: 400px;
  height: 200px;
  background: url(http://placekitten.com/50), #fff ;
  background-repeat: no-repeat; 
  background-position: calc(100% - 10px) calc(100% - 10px);
  border: 15px dashed #000;
        background-clip: content-box;
}
.box:after{
  position: absolute;
  content: '';
  top: -15px;
  left: -15px;
  bottom: -15px;
  right: -15px;
  background-image: linear-gradient(to right, #361D10 50%, #E04E39 50%);
z-index: -1;
}

или так:

<div class="box2">Some text</div>

.box2{
  width: 400px;
  height: 200px;
  border: 15px solid transparent;
  border-image: linear-gradient(to right, #361D10 50%, #E04E39 50%);
  border-image-slice: 1;
  background-image: url(http://placekitten.com/50);
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) calc(100% - 10px);  
}

 

7 часов назад, Full-R сказал:

Для инвалидов верстаете? 😉

Может он не верстает, может вы не верстаете, но это не значит что никто не верстает для инвалидов. Или они не люди?

Вас уже носом в спеку ткнули, а вы продолжаете упорствовать.

7 часов назад, Full-R сказал:

Но, уже никто не берет 4.01

Опять упс: 

Вопрос ведь и был про то, почему для UL атрибут type считается устаревшим, а для OL нет. А вы, зачем то, начали показывать результаты валидации которые  и так были озвучены в первом сообщении 🙂

24.01.2021 в 10:38, Full-R сказал:

Ну да: перепутал. А что толку? Вот мы его и выяснили.

Упс:

16 минут назад, denis_alekss сказал:

Элементов 12, а индекс максимальный 11.
lastIndexOf(20, -2) ищет с 10 по 0
indexOf(20, -2) ищет с 10 по 12

Все верно, только если брать индексы, то indexOf(20, -2) ищет с 10 по 11

Roderen да нет, всегда все нормально было. Если переживаете, то можете заранее предупредить клиента, что перевод будет на другую фамилию. 

Ну или, если не проходили верификацию личности, заведите новый аккаунт на сайте.

Мне без всяких проблем переводили деньги на карту сестры. Просто уточняли правильно ли я указал данные.
А вообще, если вам лучше уточнить возможность смены фамилии у администрации weblancer.

12 часов назад, denis_alekss сказал:

Ведь результат такой же, также выводит индекс 10.

Все ваши рассуждения выше  этой строки верны. 

12 часов назад, denis_alekss сказал:

И что первое на пути с конца вначало совпадет с цифрой 30, тот и индекс выведется?

Только не 30,а 10 Ведь вы ищете scores.lastIndexOf(10,-5) ,а так все правильно

12 часов назад, denis_alekss сказал:

Получается отрицательный второй -2 не важно стоит в indexOf или lastIndexOf ищется с конца массива к началу?

Нет. indexOf всегда ищет слева направо от указанного элемента или от начала массива, если второй параметр (в данном случае -2) не указан, до первого совпадения. Если совпадение не было найдено до конца массива то возвращает -1

lastIndexOf всегда ищет справа налево от указанного элемента (или от конца массива если не указан второй параметр) до первого совпадения. Если совпадение не было найдено до начала массива то возвращает -1

12 часов назад, denis_alekss сказал:

Такое дело и со строками, не только с числами?

Да. Только не забывайте что поиск по строкам регистрозависимый. Т.е.
'Тестовая строка'.indexOf('тестовая') вернет -1

12 часов назад, denis_alekss сказал:

indexOf с конца идет вправо, а lastIndexOf c конца идет влево искать элемент..

Тут видимо опечатка? 🙂  Если не указан индекс с которого начинать поиск то indexOf с начала идет вправо.  Про lastIndexOf верно.

10 часов назад, denis_alekss сказал:

Откуда идет отсчет

Отсчет идет с указанного элемента, т.е. в вашем случае со второго с конца. Причем указанный индекс включается в поиск. Например если бы вы искали в arrNames строку "Антон" начиная с минус второго элемента то вам бы вернулся индекс этого элемента (в вашем случае 7) так как он подходит под условие.

Ну или применительно к scores использование и scores.indexOf(20, -2) и scores.lastIndexOf(20, -2) вернет вам цифру 20 которая встречается на 10 индексе

10 часов назад, denis_alekss сказал:

как он идет

Точно так же как если бы индекс был бы положительным. indexOf ищет совпадение слева направо начиная с указанного элемента до первого совпадения или до конца массива, lastIndexOf ищет совпадение справа налево начиная с указанного элемента до первого совпадения или до начала массива.

26.12.2020 в 07:46, rustamXx сказал:

делал так, к сожалению не помогает 

Значит либо вы что-то не так сделали, либо проблема где-то в другом месте. Описанный мной способ прекрасно работает для приведенного куска кода.

.main-menu li li {
  padding-left: 15px;
  /*     line-height: 40px; */
  background-color: #ffffff;
  width: 190px;
  padding-top: 15px; /*новое*/
}

.main-menu li li:last-child {
  padding-bottom: 15px; /*новое*/
}

.main-menu > li {
  background-color: #2980b9;
  width: 200px;
  /*     line-height: 40px; */
  border-bottom: 2px solid #2c3e50;
}
.main-menu a {
  display: block;
  /*     height: 40px; */
  width: 190px;
}

 

24.12.2020 в 20:20, rustamXx сказал:

Подскажите как мне сделать

Уберите или уменьшите line-height у li и уменьшите высоту у ссылок.

24 минуты назад, denis_alekss сказал:

для div, span, p никак не поиграешься

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

21.12.2020 в 18:28, denis_alekss сказал:

innerHTML равносильно document.write и так и так код переписывает документ

innerHTML переписывает не документ полностью, а только содержимое конкретного элемента. Сама страница при этом остается прежней.

23 минуты назад, denis_alekss сказал:

Если это так, тогда построим цепочку

Это маленько не так работает. Почитайте вот тут про навигацию по формам: https://learn.javascript.ru/form-elements

 

23 минуты назад, denis_alekss сказал:

Какой из этих 2-ух вариантов лучше?

 

не понял вопроса. У вас один вариант меняет содержимое, а второй просто получает элемент.

2 часа назад, denis_alekss сказал:

Что делает текст return false?

В данном случае отменяет действие браузера по умолчанию. По умолчанию, при нажатии кнопки submit браузер отправляет форму, return false отменяет это действие, из-за чего форма не отправляется и открытая страница остается прежней.

2 часа назад, denis_alekss сказал:

result - это объект объекта FORM, а форм объект объекта document?

Если по простому, то да.

 

2 часа назад, denis_alekss сказал:

браузер подвисает

Естественно он подвиснет, ведь внешний цикл в таком случае выполняется 50000 раз, а внутренний аж (барабанная дробь)

 

2 часа назад, denis_alekss сказал:

К примеру вот такой код не сработает:

Оба способа прекрасно работают и делают именно то, что вы и написали. Просто вы не успеваете увидеть всю работу кода, так как он слишком быстро меняет содержимое <p id="result"></p> Вы при каждом проходе цикла заменяете содержимое result на последующий элемент массива. В чем легко убедиться расставив брейкпоинты в инструментах и прогнав цикл по шагам. Если хотите что-бы в строку выводился каждый элемент массива, то сделайте так: result.innerHTML += arr[i]; или так: document.getElementById("result").innerHTML += arr[i];

2 часа назад, denis_alekss сказал:

Если дело обстоит с формой, можно использовать result.innerHTML, а если там просто <p id="result"></p>  Как правильней чтобы не переписывался документ производить вывод?

Не понял вопроса про форму и просто <p> Способов вывода информации существует несколько, и все они правильные 🙂 Можно с помощью innerHTML просто писать текст и теги (и причем теги будут работать как будто они написаны в html), можно использовать textContent который выведет теги просто как текст, а можно создавать создавать элементы с помощью createElement, цеплять их к другим элементам и потом выводить на экран целыми блоками 🙂 Все зависит от ситуации.