garmoni

Как сверстать такой блок

Recommended Posts

Возникла проблема с версткой такого блока как на картинке. Подскажите в каком направлении искать информацию?

 

paprika.jpg

Share this post


Link to post
Share on other sites
<div class="box">
<div class="inner"></div>
  <div class="circle"></div>
</div>
*{
box-sizing: border-box;}
.box{
  width: 300px;
  height: 300px;
  border: 1px solid grey;
  position: relative;
  margin-top: 100px;
    background-color: #fff;
  
}
.inner{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.inner:before{
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  border-radius:50%;
  box-shadow: 0 0 0 11px grey;   
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -50px;

}
.circle{
  width: 100px;
  height: 100px;
  border: 1px solid grey;
  border-radius:50%;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -50px;
  background-color: #fff;
  box-shadow: 0 0 0 10px #fff
}

тени добавить труда не составит я думаю

Share this post


Link to post
Share on other sites

тень получилось сделать. как при наведении мышки сделать тень не только на inner но и на inner:before? и чтобы они одновременно реагировали на наведение. а не отдельно

Edited by garmoni

Share this post


Link to post
Share on other sites
11 минуту назад, AlexZaw сказал:

Так я ваш пример переделал, а именно размеры и поведение inner:before

я уже успела поменять то что делала :facepalmxd:

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

http://garmoni.inf.ua/paprika/#sport-bar

Share this post


Link to post
Share on other sites

у вас в стилях указано

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

отключите это правило или увеличьте размеры inner:before и подправьте ему маржины чтобы он был по центру

Share this post


Link to post
Share on other sites
16 минут назад, AlexZaw сказал:

у вас в стилях указано


*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

отключите это правило или увеличьте размеры inner:before и подправьте ему маржины чтобы он был по центру

Спасибо. Все получилось. И еще вопрос :rolleyes:

При наведении, у inner вместе с тенью появляется бордер на 2 пикселя. Как его уменьшить?

 

111.jpg

Share this post


Link to post
Share on other sites
29 минут назад, garmoni сказал:

При наведении, у inner вместе с тенью появляется бордер на 2 пикселя. Как его уменьшить?

Это же вроде у .box указан бордер, просто он заметнее становится когда появляется тень. Или вы про что то другое?

Share this post


Link to post
Share on other sites
8 минут назад, AlexZaw сказал:

Это же вроде у .box указан бордер, просто он заметнее становится когда появляется тень. Или вы про что то другое?

Да, в box. Как сделать, чтобы при наведении бордер темнее не становился?

Share this post


Link to post
Share on other sites

Это конечно просто оптический обман, но поправить можно вот так:

.box:hover {
    border: 2px solid rgba(234,234,234,.2);
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Gora
      Доброго времени суток, при написании одного из макетов встала проблема, нужно связать форму input с кнопкой, то есть задав параметр ввода через pattern="[a-z]{1,26}".
      Нужно сделать так чтобы при неправельно заполнены форме кнопка было не активной.
      <h2>Введіть Ключ</h2> <input id="key" class="form-control" pattern="[a-z]{1,26}" value="key" placeholder="Писати сюди"> <h2>Введіть слово</h2> <input id="slov" class="form-control" pattern="[a-z]{1,26}" value="hello" placeholder="Писати сюди"> <input class="btn btn-block btn-success" value="Закодувати" onclick="zakoduvaty5(this);" type="submit"> <h2>Закодоване слово</h2> <input class="form-control" id="zakodslov" readonly> <h2>Введіть код</h2> <input id="zakodslovo" class="form-control" pattern="[0-9 ]{1,50}" placeholder="Писати сюди"> <input class="btn btn-block btn-success" value="Розкодувати" onclick="rozkoduvaty5(this);" type="submit"> <h2>Розкодоване слово</h2> <input class="form-control" id="rez" readonly>
      примерно так это должно выглядеть, чуть не забыл 1 и 2 форма должны быть связаны.
      Благодарю за внимание, Всего самого лучшего вам.
    • By digenis
      Проблема заключается в том что мне нужно чтобы изображение было на левом краю до конца блочного элемента, а список чтобы был справа и также до конца блочного элемента. Это все в заголовке.  https://jsfiddle.net/Lyguc520/3/

  • Member Statistics

    46,614
    Total Members
    3,128
    Most Online
    PPPoison
    Newest Member
    PPPoison
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • сделал класс narrow чтобы уменьшить ширину, но на место не возвращается блок читал что ширина сетки 960px, а в шаблоне ширина 1140px
    • Потому что 1-й блок не имеет отступа слева. А 4-й имеет, из-за чего доступная область на втором рже меньше.
      В связи с этим последний блок "перескочил" на следующую строку только потому, что ему не хватает места.
    • <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Закрыть" class="close">X</a> <h2>Обратная связь</h2> <form name="MyForm" action="#openModal" method="post"><br> <input name="name" style="width: 420px" type="text" placeholder="Ваши фамилия, имя, отчество" /><br> <input name="tel" style="width: 420px" type="tel" placeholder="Ваш номер телефона" /><br> <input name="email" style="width: 420px" type="email" placeholder="Ваша электронная почта" /><br> <textarea name="body" style="width: 420px" placeholder="Ваше сообщение"></textarea><br> <br>Нажимая на кнопку "Отправить", я даю согласие на обработку своих персональных данных в соответствии с <a href="politika.htm" target="_blank">Политикой конфиденциальности</a><br> <p style="text-align: center"><input type="submit" value="Отправить" id="btnpng4" /></p> </form> <?php if (isset($_POST["email"]) || isset($_POST["tel"])){ if (isset($_POST["name"])) {$name = $_POST["name"];} if (isset($_POST["tel"])) {$tel = $_POST["tel"];} if (isset($_POST["email"])) {$email = $_POST["email"];} if (isset($_POST["body"])) {$body = $_POST["body"];} if(empty($email) or empty($name) or empty($body)){   //отправка сообщения на email } else if(empty($tel) or empty($name) or empty($body)){   //отправка сообщения на tel } else{   //вывод предупреждения, что не заполнены обязательные поля } комментарии    
      Заменить на соответствующий код который будет выполнять эти действия
  • Popular Contributors