Ответы пользователя Александр по тегу «CSS»

Не отображается ширина бургера а высота отображается.что делать?

Александр @z80b

Frontend

@media (max-width: 767px) {
  .header_burger {
    display: block;
    position: relative;
    flex: 0 0 30px;
    height: 20px;
  }
....

и вот здесь у вас ошибка:

.header_burger:before,
  .header_burger:after {
    countent: "";
    background-color: black;
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
  }

countent -> content

Ответ написан более трёх лет назад

1 комментарий

Некорректно отображается background-image. В чём может быть проблема?

Александр @z80b

Frontend

Ну во первых это не ссылка на картинку, а ссылка на страницу с картинкой.
Сама картинка вот (ссылки здесь нельзя публиковать, скопируйте ее из контекстного меню):

а во вторых, другие css свойства элемента вы прописывали? такие как высота и ширина?

Ответ написан более трёх лет назад

6 комментариев

Как в данном случае сделать резиновый блок?

Александр @z80b

Frontend

Можно еще так (но уже не модно):

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial;
}

.wrapper{
  display: table;
  width: 100%;
  background: #f7f7f7;
}

.wrapper::before{
  content: '';
  height: 100%;
  vertical-align: middle;
}

.test1, .test2, .test3{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  line-height: 50px;
  color: #fff;
  padding: 0px 10px 0px 10px;
  border-radius: 10px;
}

.test1, .test3{
  width: 100px;
  height: 50px;
  background: orange;
}

.test2{
  background: red;
  height: 40px;
  line-height: 40px;
}

Ответ написан более трёх лет назад

Комментировать

Как выровнять изображение по центру блока?

Александр @z80b

Frontend

.slider-item {
  width: 900px;
  height: 413px;
  margin: auto;
}

.slider-item__img {
  height: 100%;
}

.slider-item__img picture,
.slider-item__img img {
  display: block;
  width: 100%;
  height: 100%;
}

.slider-item__img img {
  object-fit: cover;
  object-position: 50% 50%;
}

Ответ написан более трёх лет назад

Комментировать

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

Александр @z80b

Frontend

до загрузки картинка не имеет размера, установите ей конкретные размеры...

Ответ написан более трёх лет назад

2 комментария

Как сделать такой градиент?

Александр @z80b

Frontend

Градиент генератор вам в помощь: https://cssgradient.io/

Ответ написан более трёх лет назад

5 комментариев

Как сделать анимацию стрелки по кругу?

Александр @z80b

Frontend

Если по ховеру, то можно так:

div{
  width:100px;
  height: 50px;
  border: 2px dotted red;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-bottom:none;
  position:relative;
  color:red;
  transition: 3s all ease;
      transform-origin: 50% 100%;
}
div:after{
  position:absolute;
  content:'▼';
  bottom:-10px;
  right:-11px;
  transform: rotate(-38deg);
}
div:before{
  position:absolute;
  content:'▼';
  bottom:-10px;
  left:-11px;
  transform: rotate(38deg);
}
div:hover {
  transform: rotateZ(360deg)
}

Ответ написан более трёх лет назад

Комментировать

Как сделать такую кнопку, нужно сделать как на скрине?

Александр @z80b

Frontend

Примерно так:
<button class="btn">Дигаться к мечте</button>

.btn {
  font: 700 15px/3.5em sans-serif;
  text-align: center;
  color: #000;
  background: #ffd429;
  border: none;
  padding: 0 3em;
}

шрифт Ubuntu убрал, если он у вас где-то подгружается, тогда можно вернуть...

Ответ написан более трёх лет назад

Комментировать

Как сделать выравнивание?

Александр @z80b

Frontend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .top .down {
        width: 100%;
        border: 2px black;
      }

      .top {
        top: 50%;
        background: #C4C4C4;
      }

      .top-el {
        border: 2px black;
        text-align: center;
      }

      .items {
        border: 2px black;
      }

      .grid-item {
        border: 2px black;
        width: 380px;
        float: left;
        padding-top: 50px;
        padding-left: 20px;
        float: left;
      }

      .img {
        width: 100%;
        height: 200px;
        background: #C4C4C4;
      }

      .controls {
        text-align: center;
      }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="top">
        <h3 class="top-el">Тестовое задание ione</h3>
        <h1 class="top-el">Заголовок</h1>
        <h3 class="top-el">Подзаголовок</h3>
        <div class="controls">
          <input class="top-el" type="text" placeholder="Ваш телефон">
          <button class="top-el">Push me</button>
        </div>
    </div>
    <div class="down">
        <div class="items">
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
        </div>
    </div>
</body>
</html>

Ответ написан более трёх лет назад

5 комментариев

Как сделать такое меню адаптивным?

Александр @z80b

Frontend

Самый простой способ задать на корневом элементе (т.е. html) font-size, какой вам угодно, в зависимости от разрешения экрана. А дальше плясать от него, т.е. размеры задавать в rem или em.
А далее либо задавать размер шрифта на корневом элементе с помощью медиа запросов (опять же в зависимости от разрешения), либо выставить font-size допустим в vw.

Ответ написан более трёх лет назад

1 комментарий

Как сделать что бы ответ не слипался (как сделать пробел между ответами и переход на следующую строку)?

Александр @z80b

Frontend

function writeResult(result) {
  document.write('<p>' + result + '</p>');
}

var X = 55.55;
writeResult(X);

...

Ответ написан более трёх лет назад

Комментировать

С помощью какого CSS-свойства можно сделать такую секцию под фото?

Александр @z80b

Frontend

Ответ написан более трёх лет назад

1 комментарий

Как реализовать такой блок и главное сделать его резиновым?

Александр @z80b

Frontend

Flex вам в помощь. Как-то так:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blocks</title>
  <style>
    .content,
    .article,
    .article__content {
      display: flex;
      flex-wrap: wrap;
    }

    .article {
      width: 50%;
    }

    .article__content {
      align-content: space-between;
      justify-content: flex-end;
      box-sizing: border-box;
      padding: 1em;
    }

    .article__text {
      margin: 0 0 1em;
    }

    .article__image {
      width: 50%;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="article">
      <div class="article__content">
        <div class="article__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore esse aperiam, deleniti suscipit illo saepe odit deserunt vero, cumque, fuga aliquid nobis. Ab tempore minima modi dolorum consectetur quisquam.</div>
        <img class="article__image" src="https://ic.pics.livejournal.com/p_syutkin/64914398/5019079/5019079_original.jpg"/>
      </div>
    </div>
    <div class="article">
      <div class="article__content">
        <div class="article__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore esse aperiam, deleniti suscipit illo saepe odit deserunt vero, cumque, fuga aliquid nobis. Ab tempore minima modi dolorum consectetur quisquam.</div>
        <img class="article__image" src="https://ic.pics.livejournal.com/p_syutkin/64914398/5019079/5019079_original.jpg"/>
      </div>
      <div class="content">
        <div class="article">
          <div class="article__content">
            <div class="article__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore esse aperiam, deleniti suscipit illo saepe odit deserunt vero, cumque, fuga aliquid nobis. Ab tempore minima modi dolorum consectetur quisquam.</div>
            <img class="article__image" src="https://ic.pics.livejournal.com/p_syutkin/64914398/5019079/5019079_original.jpg"/>
          </div>
        </div>
        <div class="article">
          <div class="article__content">
            <div class="article__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore esse aperiam, deleniti suscipit illo saepe odit deserunt vero, cumque, fuga aliquid nobis. Ab tempore minima modi dolorum consectetur quisquam.</div>
            <img class="article__image" src="https://ic.pics.livejournal.com/p_syutkin/64914398/5019079/5019079_original.jpg"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Ответ написан более трёх лет назад

Комментировать

Как задать стили элементу, при скроле к нему вниз?

Александр @z80b

Frontend

Можно с помощью IntersectionObserver

window.onload = () => {
  const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
          if (entry.isIntersecting) {
              entry.target.className = 'Класс синего кружка';
              observer.unobserve(entry.target);
          }
      })
  }, { threshold: 0.5 })

  document.querySelectorAll('Класс серого крцжка').forEach(item => observer.observe(item));
}

Можно еще поиграться с параметрами, полное описание здесь: https://developer.mozilla.org/ru/docs/Web/API/Inte...

Ответ написан более трёх лет назад

Комментировать

Как сделать бордер по макету?

Александр @z80b

Frontend

В вашей реализации нужно добавить еще border-radius, т.е.

.account__file {
  width: 230px;
  padding: 0 20px;
  padding-top: 75px;
  border: 2px dashed #8eb9f5;
  border-radius: 15px;
}

Лучше в css кажется не получится.
Другой вариант, можно заюзать svg. Т.е. подложить например под текст скругленный прямоугольник обведенный пунктиром.

<div class="account__file">
  <svg xmlns="http://www.w3.org/2000/svg" with="100%" height="100%" class="border">
    <rect x="0" y="0" rx="30" width="100%" height="100%" class="border-rect" />
  </svg>
  <input type="file" name="file" id="file" />
  <label for="file">
    <span class="account__subtitle">drag & drop</span>
    <div class="account__text">
      <p>Upload only png, jpg, jpeg</p>
    </div>
  </label>
</div>

классу .account__file прописать position: relative
css для svg:

.border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.border-rect {
  stroke: #8eb9f5;
  fill: #fff;
  stroke-width: 1;
  stroke-dasharray: 20;
}

Вот еще вариант с рамкой в качестве фона: https://z80b.github.io/qna.habr/

Ответ написан более трёх лет назад

4 комментария

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

Александр @z80b

Frontend

Вот так, например:

<div class="b-blocks">
    <div class="b-blocks__item">
        <div class="b-blocks__item-inner"></div>
    </div>
    <div class="b-blocks__item">
        <div class="b-blocks__item-inner"></div>
    </div>
    <div class="b-blocks__item">
        <div class="b-blocks__item-inner"></div>
    </div>
    <div class="b-blocks__item">
        <div class="b-blocks__item-inner"></div>
    </div>
</div>

.b-blocks {
    background: #fff;
    padding: 20px;
    width: 800px;
    
    &::after {
        content: '';
        display: table;
        clear: both;
    }
    
    &__item {
        float: left;
        box-sizing: border-box;
        width: 48%;
        height: 300px;
        padding: 10px;
        margin: 1%;
        background-color: gray;
        background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
        
        &-inner {
            width: 100%;
            height: 100%;
            background: #fff;
            
        }
    }
}

https://jsfiddle.net/hyjra7j8/6/

Ответ написан более трёх лет назад

Комментировать

Как стилизовать через css полосу прокрутки внутри блока?

Александр @z80b

Frontend

Scrollbar стилизовать можно только в webkit браузерах и ie да и то не очень сильно. В ie так не получится скорее всего. В webkit с помощью свойств:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer.
Пример:

::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

Лучше использовать какой-нибудь js-плагин, типа этого: manos.malihu.gr/jquery-custom-content-scroller

Ответ написан более трёх лет назад

1 комментарий

Как содержание блока обратить в карусель?

Александр @z80b

Frontend

Попробуйте, например, это: kenwheeler.github.io/slick

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт