Jump to content
  • Sign Up

AlexZaw

Expert
  • Content Count

    613
  • Joined

  • Last visited

  • Days Won

    50

AlexZaw last won the day on May 15

AlexZaw had the most liked content!

Community Reputation

95 Хорошая

10 Followers

About AlexZaw

  • Rank
    Активный участник
  • Birthday 12/03/1978

Information

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

Recent Profile Visitors

4,421 profile views
  1. Использовать картинку с разрешением в 4 раза больше. Ну или, если есть возможность, сделать svg картинку
  2. IE поддерживает единицы измерения vh и vw только с 9 версии. Так что если нужна поддержка более ранних версий то можно с помощью js определять высоту экрана и задавать такую же высоту картинке
  3. задайте для картинки стили display: block; margin: 0 auto; height: 100vh;
  4. как вариант: (вставка кода что то не работает, поэтому как текст) body{ margin: 0; } body:before{ position: absolute; content: ''; width: 100%; height: 10px; background: #f00; top: 50%; transform: translateY(-50%); }
  5. РоманФ судя по скругленным окончанием кривой, она сделана с помощью svg. Сделал грубый пример без свг, но принцип остального, думаю, будет понятен: <div class="wrap"> <div class="box"> <div class="line1"> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> </div> <div class="line2"> <div class="item"><span></span></div> <div class="item"><span></span></div> </div> </div> </div> *, :after, :before { box-sizing: border-box; } .wrap { display: flex; justify-content: center; width: 500px; border: 1px solid #000; overflow: hidden; } .box { display: inline-block; position: relative; } .box:before { content: ""; height: 130px; width: 130px; position: absolute; left: -100px; top: 42%; border-radius: 50%; border: 5px solid transparent; border-top: 5px solid #ccc; } .box:after { content: ""; height: 130px; width: 130px; position: absolute; right: -100px; top: 42%; border-radius: 50%; border: 5px solid transparent; border-top: 5px solid #ccc; } .line2 { margin-top: 100px; margin-left: 77px; } .item { width: 100px; height: 100px; border: 1px solid #000; display: inline-block; position: relative; background: #f00; } .item:not(:last-child) { margin-right: 50px; } span { background: inherit; } .line1 .item:after { content: ""; height: 130%; width: 130%; position: absolute; left: -15%; top: 40%; border-radius: 50%; border: 5px solid transparent; border-bottom: 5px solid #ccc; } .line2 .item:after { content: ""; width: 130%; height: 130%; position: absolute; left: -15%; top: -70%; border-radius: 50%; border: 5px solid transparent; border-top: 5px solid #ccc; } .line1 .item:before { content: ""; height: 20px; width: 20px; background: #000; border-radius: 50%; position: absolute; left: 50%; top: 156%; z-index: 1; transform: translateX(-50%); } .line2 .item:before { content: ""; height: 20px; width: 20px; background: #000; border-radius: 50%; position: absolute; left: 50%; top: -78%; z-index: 1; transform: translateX(-50%); } .line1 span:before { content: ""; height: 50px; border-left: 1px dotted #000; position: absolute; left: 50%; top: 120%; transform: translateX(-50%); } .line1 span:after { content: ""; width: 25px; height: 25px; background: inherit; border: 1px solid #00f; position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%) rotate(36deg) skewY(20deg); z-index: -1; } .line2 span:before { content: ""; height: 50px; border-left: 1px dotted #000; position: absolute; left: 50%; top: -70%; transform: translateX(-50%); } .line2 span:after { content: ""; width: 25px; height: 25px; background: inherit; border: 1px solid #00f; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%) rotate(36deg) skewY(20deg); z-index: -1; }
  6. Sharmat, У вас не закрыты теги. А именно: <A HREF="http:ru.wikipedia.org/wiki/HTML" TARGET="_blank">вся статья<A> и тег таблицы. Также приведите к одному виду все ваши наименования ID. А то у вас в HTML они написаны маленькими буквами, а в CSS большими. Названия классов и id - регистрозависимы.
  7. по идее может спасти pointer-events:none; правда придется для всяческих input-ов и т.п. прописывать поведение курсора при наведении
  8. Вообще-то можно, если убрать z-index у родителя. Но тогда возникнет другая проблема - будет видно правую тень у родителя и ее придется перекрывать вторым псевдоэлментом. Как-то так: <div class="box"></div> .box{ height: 50px; width: 200px; box-shadow: 0 0 10px #000; position: relative; background: #f00; border-radius: 5px; } .box:after, .box:before{ display: block; content: ''; height: 37px; width: 36px; position: absolute; left: calc(100% - 20px); top: 50%; transform: translateY(-50%) scaleX(.5) rotate(45deg); background: #f00; border-radius: 5px; } .box:after{ box-shadow: 0 0 10px #000; z-index: -1; } Можно воспользоваться способом выше, а можно, если совместимость не сильно важна, воспользоваться свойствами clip-path и filter: drop-shadow
  9. Не может. Все это легко делается с помощью html+css
  10. Код не смотрел, но вам нужно либо прописать тег viewport, либо познакомиться с медиа запросами
  11. Нужно просто знать как работают отрицательные маржины 🙂 У меня решение заняло чуть больше времени. Но я искал решение без использования дополнительного div. Единственный минус - не работает в IE6, но ведь в условии про него ничего и не сказано, верно? 🙂 Если бы до меня это сразу дошло, решил бы быстрее, а так где -то минут за 40 управился. Причем я не сказал бы что я хорошо разбираюсь в верстке 🙂 .columns { width: 100%; overflow: hidden; } .sidebar-left { width: 300px; float: left; } .sidebar-right { width: 300px; float: right; } .content{ width: 100%; float: left; box-sizing: border-box; padding-left: 300px; padding-right: 300px; margin-right: -100%; }
  12. С гаданиями по фотографии это не сюда, а к гадалке. Всегда пожалуйста.
  13. В верстке, в подавляющем большинстве случаев, нет единственно правильных решений. С одной стороны, для того что-бы не раздувать код, нужно делать якорь на тот тег на который отправляет ссылка. Но, с другой стороны, а если завтра этот тег поменяется, например, с параграфа на заголовок? Тогда выходит правильнее сделать пустой якорный тег 🙂
×
×
  • Create New...