Jump to content

AlexZaw

Expert
  • Posts

    650
  • Joined

  • Last visited

  • Days Won

    57

AlexZaw last won the day on July 18 2021

AlexZaw had the most liked content!

3 Followers

About AlexZaw

  • Birthday 12/03/1978

Information

  • Sex
    мужской
  • From
    Томск
  • Interests
    Верстка, книги, EVE Online :)

Recent Profile Visitors

13,919 profile views

AlexZaw's Achievements

  1. <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.
  2. Прям захотелось чтобы мою работу так же по косточкам разобрали 🙂
  3. Потому, что style.css не сохранен 🙂
  4. Судя по указанному пути папка с вашим шрифтом лежит в одной папке с файлом css т.е. структура выглядит примерно так: . | index.html | style.css | \—fonts Lato-Italic.ttf так ли это на самом деле?
  5. Потому, что ширина сайдбара в 330 пикселей это ширина вместе с margin-ами слева и справа по 10 пикселей. Ну а так как margin это внешний отступ и он не закрашивается фоном сайдбара, отсюда и расстояние
  6. а я и не говорил что HTML описывает внешний вид, хотя у него и есть такие возможности. Пусть немного, но есть. Ну вот как минимум по этому критерию CSS не проходит в ЯП 🙂 Абсолютно эквивалентны и абсолютно во всех случаях можно заменить как универсальное свойство отдельными свойствами, так и наоборот. Другое дело что некоторые отдельные свойства не имеют смысла в отрыве от других, но заменить можно всегда
  7. CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки HTML и CSS описывают представление , тогда как языки программирования описывают функцию по поводу этого я вам уже писал - используйте отдельные свойства, а не сокращенные и тогда не будет никаких неочевидных результатов
  8. Так CSS это не язык программирования, поэтому здесь нет четких правил А это вообще не является проблемой CSS 🙂 В этом то и дело, цвет фона должен задаваться в конце. А вообще это извечная проблема при использовании сокращенных свойств. Чтобы не путаться можно использовать полные свойства, тогда никаких конфликтов и недопонимания не будет.
  9. Назовите хоть один язык где ничего не надо зубрить и все интуитивно понятно 🙂 background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона. Т.е. этот "гладкий" фон лежит под градиентом. Он там есть и работает, но его просто не видно так как его сверху закрывает градиент. В том, что ваш "гладкий" фон на самом деле присутствует можно убедиться задав полупрозрачный градиент. Градиенты это не цвет фона, это фоновое изображение Это как покрасить обои на стене и на них повесить картину. Фоном (background-color)будут являться обои, а картина будет градиентом, т.е. background-image Если вы поклеите обои поверх картины вы ведь не будете удивляться почему вдруг картины не стало видно? Так и здесь
  10. Все удобно и логично если знать как он работает: Предупреждение: background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона. https://developer.mozilla.org/ru/docs/Web/CSS/background
  11. Потому, что слой с обычным фоновым цветом (другими словами это обычное свойство background-color) всегда находится в самом низу. А вот положением градиентов которые на самом деле задаются с помощью background-image мы можем управлять
  12. Можно так: <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); }
  13. Может он не верстает, может вы не верстаете, но это не значит что никто не верстает для инвалидов. Или они не люди? Вас уже носом в спеку ткнули, а вы продолжаете упорствовать.
  14. Опять упс: Вопрос ведь и был про то, почему для UL атрибут type считается устаревшим, а для OL нет. А вы, зачем то, начали показывать результаты валидации которые и так были озвучены в первом сообщении 🙂
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy