Задать вопрос
Anna_BS

Anna_BS

Ответы пользователя по тегу Вёрстка

  • Как сделать блоки как на скрине?

    Anna_BS
    @Anna_BS
    Можно еще использовать 
    legend {
  text-align: center;
}
<fieldset>
  <legend>Заголовок</legend>
  Текст текст текст
</fieldset>
    Ответ написан
    1 комментарий
    1 комментарий

  • Как убрать у фиксированного меню ширину?

    Anna_BS
    @Anna_BS
    price_plan twitter_contact вылазят и делают отступ
    Ответ написан
    2 комментария
    2 комментария

  • Как создать svg фильтр с нужным цветом?

    Anna_BS
    @Anna_BS
    kazzkiq.github.io

    <filter id="linear">
    <feColorMatrix
      type="matrix"
      values="0 1.0 0 0 0
              0 1.0 0 0 0
              0 0.6 1 0 0
              0 0 0 1 0 "/>
  </filter>
</feColorMatrix>
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать так чтобы меню не съезжало при изменении размера экрана?

    Anna_BS
    @Anna_BS
    getbootstrap.com/customize
    пункт @grid-float-breakpoint
    изменяешь на @screen-md-min
    и мобильное меню будет появляться раньше

    а потом лучше поучить, как писали выше, Flexbox или table-cell и media queries и писать меню самому
    Ответ написан
    Комментировать
    Комментировать

  • Как сверстать новости на обычном сайте?

    Anna_BS
    @Anna_BS
    Вы должны сделать шаблон блока новостей

    Например:
    Заголовок картинка(продумать будет всегда или нет) и текст и в админке будут отдельные поля для этого
    или же заказчик сам хочет писать и редактировать все отдельно
    тогда вам нужно стилизовать все возможные элементы (h2, h3, li. ol, blockquote и т.д.) в блоке новости

    Установите себе wordpress, посмотрите, как там все устроено - будет полезно
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать кнопку?

    Anna_BS
    @Anna_BS
    я бы использовала svg
    codepen
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно сделать баннеры?

    Anna_BS
    @Anna_BS
    73c4b3caebce45f8b82ce67d7a5d9827.jpg
    Для каждого слайда есть 5 картинок, каждая из которых активна на определенном разрешении. Измените эту логику
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать анимацию в сайте?

    Anna_BS
    @Anna_BS
    Все это можно посмотреть на самом сайте
    анимация лого:
    .logo:hover:before {
    -webkit-animation: buzz-out 1 linear 1.3s;
    -moz-animation: buzz-out 1 linear 1.3s;
    -o-animation: buzz-out 1 linear 1.3s;
    animation: buzz-out 1 linear 1.3s;
}
@-webkit-keyframes buzz-out{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}
	@-moz-keyframes buzz-out{10%{-moz-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-moz-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-moz-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-moz-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-moz-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-moz-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-moz-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-moz-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-moz-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-moz-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}
	@-o-keyframes buzz-out{10%{-o-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-o-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-o-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-o-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-o-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-o-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-o-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-o-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-o-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-o-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}
	@keyframes buzz-out{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg)}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg)}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg)}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg)}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0)}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0)}}


    анимация вопросов:
    .floating2 {
    -webkit-animation: floating2 infinite ease-in-out 4s;
    -moz-animation: floating2 infinite ease-in-out 4s;
    -o-animation: floating2 infinite ease-in-out 4s;
    animation: floating2 infinite ease-in-out 4s;
)
@-webkit-keyframes floating2{from {-webkit-transform:translate(0, 0px);}55% {-webkit-transform:translate(0px, -10px);}to {-webkit-transform: translate(0, -0px);}}
	@-moz-keyframes floating2{from {-moz-transform:translate(0, 0px);}65% {-moz-transform:translate(0px, -10px);}to {-moz-transform: translate(0, -0px);}}
	@-o-keyframes floating2{from {-o-transform:translate(0, 0px);}65% {-o-transform:translate(0px, -10px);}to {-o-transform: translate(0, -0px);}}
	@keyframes floating2{from {transform:translate(0, 0px);}65% {transform:translate(0px, -10px);}to {transform: translate(0, -0px);}}
    Ответ написан
    Комментировать
    Комментировать

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

    Anna_BS
    @Anna_BS
    codepen.io/Anna_Batura/pen/EPvZvB
    Ответ написан
    Комментировать
    Комментировать

  • Как сверстать такой svg?

    Anna_BS
    @Anna_BS
    Реализация svg описана верно, а вот так можно изменять цвет:

    codepen.io/Anna_Batura/pen/OMNNQL

    fill задает заливку
    stroke - обводку
    Ответ написан
    Комментировать
    Комментировать