AlexZaw

Expert
  • Content count

    534
  • Joined

  • Last visited

  • Days Won

    37

AlexZaw last won the day on March 10

AlexZaw had the most liked content!

Community Reputation

78 Хорошая

6 Followers

About AlexZaw

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

Information

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

Recent Profile Visitors

1,680 profile views
  1. <fieldset> <legend> Lorem ipsum dolor sit amet. </legend> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam harum facere provident nostrum eos fugit saepe quia quos natus maiores libero, nulla reprehenderit tempore. Sit quae culpa cupiditate voluptatum aspernatur? </fieldset> fieldset { border-radius: 5px; width: 400px; } К тег legend тоже можно применять разные css свойства если что.
  2. Без вашего кода только пример: <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> * { margin: 0; padding: 0; } ul { list-style: none; background: #111; display: flex; justify-content: center; } li { padding: 50px 20px; color: #fff; font-size: 20px; position: relative; z-index: 1; } li:not(:first-child) { margin-left: 10px; } li:before { content: ""; width: 100%; height: 100%; background: gold; position: absolute; top: -100%; left: 0; transition: top 0.3s; z-index: -1; } li:hover:before { top: 0; }
  3. Начнем с того что вы изначально смешали блок с модификатором :) Ну нет возможности выбрать родителя родителя, хоть убейся. Либо так, либо делать дополнительную обертку или переименовывать классы. Выбирайте. еще вариант: .sharing-new { &.position-left { } &.position-left &-title { color: red; } &.position-bottom { } &.position-bottom &-title { color: green; } }
  4. Насколько я знаю less, самый короткий вариант будет такой: .sharing-new.position { &-left { .sharing-new-title { color: red; } } &-bottom { .sharing-new-title { color: green; } } }
  5. Мое извращение: Нужные размеры можно либо подобрать, либо использовать JS для автоматизации. Но, имхо, лучше с SVG разобраться, так как в моем примере не получится залить полупрозрачным фоном See the Pen pmqBMv by Alexandr (@AlexZaw) on CodePen. <div class="wrap"> <ul> <li> <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem lorem lorem lorem</div><span></span> </li> <li> <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem</div> <span></span></li> </ul> </div> *, :before, :after{ margin: 0; padding: 0; box-sizing: border-box; } .wrap{ background: url(http://placekitten.com/1000); } ul{ margin: 50px; list-style: none; display: inline-block; } li{ margin-bottom: 30px; position: relative; } .el{ position: relative; padding: 10px; } .el:before,.el:after, li:before,li:after,span:before,span:after{ content: ''; position: absolute; height: 100%; width: calc(50% - 40px); top: 0; border: 2px solid #ccc; } .el:before{ border-radius: 50px 0 0 50px; border-right: none; left: 0; } .el:after{ right: 0; border-left: none; border-radius: 0 50px 50px 0; } li:before,li:after,span:before,span:after{ width: 50px; top: calc(-100% + 2px); left: 50%; transform: translateX(calc(-100% + 2px)); border: 2px solid #ccc; border-radius: 0 0 50% 0; border-top: none; border-right: none; border-left: none; } li:after{ transform: scaleX(-1); } span{ position: absolute; height: 100%; width: 100%; top: 0; left: 0; } span:before{ top: calc(100% - 2px); transform: translateX(calc(-100% + 2px)) scaleY(-1); } span:after{ top: calc(100% - 2px); transform: scale(-1,-1); }
  6. Так в чем проблема попробовать? Хоть от хтмл начинайте и классы с id присваивайте для всех родителей - не поможет. Ибо инлайн стиль перебить можно только с !important (ну или пользовательскими настройками), ну а так как !important есть в инлайн стиле то, по условию задачи, только js
  7. Ну и умеете же вы темы называть... :) Ну а если серьезно, то в данном cлучае только js
  8. Ноликов в зарплате не маловато? :) При таких то требованиях.
  9. var formComment = document.querySelector('.write-comment'); formComment.innerHTML = '<b>' + userName + ',' + '</b>' + '&nbsp;'; formComment.appendChild(userNameHtml); Можно так: <p id='aaa' style=" padding: 10px; background: white; width: 50%;" contenteditable="true" class="write-comment"></p> <button id="btn">Click me</button> var userName = "Vasya Pupkin"; btn.onclick = function () { var formComment = document.querySelector(".write-comment"); formComment.innerHTML = "<b>" + userName + "</b>" + ", "; formComment.focus(); var sel = window.getSelection(); var range = document.createRange(); range.setStart(formComment, formComment.childNodes.length); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); };
  10. AlexZaw

    не работают табы

    console.log('лик по табу');
  11. На днях была точно такая же тема:
  12. Попробуйте адаптировать ваш код для мобильных устройств с разным расширением. С учетом того что количество текста напротив "строк" с картинками может быть разным (количество строк тоже, кстати, может меняться). Желательно еще что бы, промежуточные от основных разрешения, тоже выглядели бы прилично и не рассыпались как попало. Если получиться сделать это с легкостью - все нормально. Если же возникнут трудности, то так делать не стоит :) Я конечно придираюсь, и задаю сложные задачи для начинающего, но, в будущем, все это вам придется учитывать.
  13. Примерно так можно: <div class="wrap"> <ul> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> </ul> </div> .wrap { border: 1px solid #000; max-width: 800px; margin: 0 auto; } ul { display: flex; flex-direction: column; list-style: none; padding: 0; } li { display: flex; align-items: center; } li * { width: 33.33%; } li:nth-child(odd) { direction: rtl; text-align: right; } img { border-radius: 50%; vertical-align: middle; }
  14. Сделайте плюсик отдельным блоком или с помощью псевдоэлемента и залейте фон градиентом
  15. Зачем? Используйте обычный div, и внутри него уже расположите кнопку