Ответы пользователя по тегу CSS
  • Как уместить анимацию на мобильных устройствах?

    mizutsune
    @mizutsune
    Frontend Developer
    Для начала у элементов curley, web, dev, уберите свойства: left, right, bottom. Далее можно немного подправить остальные стили у элементов + немного изменить разметку и ситуация улучшится.

    <div class="container text-uppercase">
        <p class="text curley">Hello</p>
        <div class="group">
          <p class="text web">Hello</p>
          <p class="text dev">Hello</p>
        </div>
        <div class="hide-text"></div>
      </div>


    .container {
         width: 100%;
         max-width: 600px;
         margin: 0 auto;
    }
    
    .text {
         --sw-1: drop-shadow(0 0 1px black);
         --sw-2: drop-shadow(0 0 2px red);
         font-family: "Orbitron", sans-serif;
         background: linear-gradient(darkred 30%, cyan, white, cyan, darkred 70%);
         -webkit-text-stroke: 3px cyan;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         font-weight: 900;
         font-size: 4.1em;
         text-align: center;
         text-transform: uppercase;
         filter: var(--sw-1) var(--sw-1) var(--sw-2) var(--sw-2);
         opacity: 0;
         margin: 0;
    }
    
    .group {
         display: flex;
         gap: 10px;
         justify-content: center;
    }
    
    .curley {
         animation: bg-shift 1s infinite linear alternate, 
                    scale 750ms ease-in forwards 3.5s, 
                    jump 500ms ease-out forwards 5.7s, 
                    blur-in 300ms linear 3.5s,
                    zoom 4s ease-in-out 6.25s, 
                    flip 500ms linear forwards 8s;
    }
    
    .web {
         animation: bg-shift 1s infinite linear alternate, 
                    scale-angle1 3s ease-in-out forwards 2s, 
                    blur-in 500ms linear 2s, 
                    rotate-up1 250ms ease-out forwards 5.7s,
                    zoom 1.5s ease-in-out 6.25s, 
                    flip 500ms linear forwards 8.5s;
    }
    
    .dev {
         animation: bg-shift 1s infinite linear alternate, 
                    scale-angle2 3s ease-in-out forwards 2s, 
                    blur-in 500ms linear 2s, 
                    rotate-up2 250ms ease-out forwards 5.7s,
                    zoom 1.5s ease-in-out 6.25s, 
                    flip 500ms linear forwards 8.5s;
    }
    
    /*  Код анимаций без изменений */


    Размер шрифта скорее всего придётся уменьшать через @media запросы, чтобы на мобильниках всё нормально отображалось. Но в целом ваши анимации и стили можно и нужно улучшить.
    Ответ написан
    Комментировать
  • Почему при наведении на один элемент не делает видимым другой?

    mizutsune
    @mizutsune
    Frontend Developer
    С помощью CSS, при такой структуре разметки, желаемого результата добиться не выйдет.

    Однако можно сделать вот так:

    .ava:hover ~ #profiles_show .block {
       display:block;
    }


    Ну, а ещё в html у вас class="ava", а в css - .avatar. С этим нужно бы определиться... либо одно, либо другое.

    Кстати использовать ID атрибуты для стилизации элементов - моветон.
    Ответ написан
    2 комментария
  • Почему при наполнении текста ломается верстка?

    mizutsune
    @mizutsune
    Frontend Developer
    .programs__name {
       min-width: 0;
    }
    
    .programs__name p {
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
    }


    Обрезать текст можно с помощью набора свойств: text-overflow, overflow и white-space(хотя возможно оно здесь лишнее). А вот min-width: 0 используется для того чтобы дочерние элементы во flex контейнере, могли сжиматься при уменьшении ширины родительского элемента.
    Ответ написан
    1 комментарий
  • Как флексами разделить блоки 2 на 2?

    mizutsune
    @mizutsune
    Frontend Developer
    .flex {
       --gap: 20px;
       display: flex;
       flex-wrap: wrap;
       gap: var(--gap);
    }
    
    .item {
       width: calc(50% - var(--gap) / 2);
       height: 100px;
       background-color: red;
    }
    Ответ написан
    Комментировать
  • Возможно ли дать картинкам такую форму в css?

    mizutsune
    @mizutsune
    Frontend Developer
    Например с помощью CSS масок или Clip Path.
    Ответ написан
    Комментировать
  • Можно ли ставить after прямо на input а не на form?

    mizutsune
    @mizutsune
    Frontend Developer
    Не у всех HTML тегов есть собственное содержимое, поэтому не во всех случаях стоит ждать корректного результата при использовании псевдоэлементов на следующих тегах <img>, <input type="text">, <input type="email">, <input type="password">, <input type="datetime">, etc.

    Однако вы можете обернуть input в дополнительный тег, после чего использовать псевдоэлемент родительского элемента.

    <div class="inputbox">
       <input type="text">
    </div>


    .inputbox::after { 
      /* ...стили для псевдоэлемента */ 
    }
    Ответ написан
    3 комментария
  • Как расположить карточки в ряд?

    mizutsune
    @mizutsune
    Frontend Developer
    Можно конечно сделать и так как вам подсказали в соседнем ответе:

    .container{ 
      display: flex;
      justify-content: space-around;
    }
    
    .card { 
       width: fit-content; 
    }


    Но в таком случае, если какая-нибудь карточка будет больше по ширине, тогда равномерного расположения по центру уже не будет.

    63397efd5efe3045799569.png

    Можно сделать по другому, например используя CSS Grid:



    Суть в том что в этой строке:

    grid-template-columns: repeat(auto-fill, minmax(310px, 310px));


    Указываем минимальную и максимальную ширину карточек, тем самым запрещаем растягиваться элементам, что обеспечит корректную работу свойства: justify-content: space-between;
    Ответ написан
    Комментировать
  • Не работает псевдоэлменет при наведение на текст?

    mizutsune
    @mizutsune
    Frontend Developer
    Вот здесь:

    .title:hover ~ .title::after {
        transform: rotate(180deg);
    }


    При наведении на элемент .title, вы пытаетесь применить трансформацию псевдоэлементу :after, используя при этом селектор следующего элемента, который работает совсем по другому.

    Чтобы менять стили псевдоэлементов, при наведении на родительский элемент, используется такая комбинация:

    <element>:hover::after { /* ... style */ }

    То есть для решения проблемы, нужно сделать так:

    .title:hover::after {
        transform: rotate(180deg);
    }
    Ответ написан
    Комментировать
  • Как работает наследственность стилей в этом случае?

    mizutsune
    @mizutsune
    Frontend Developer
    Если это касается именно Swiper, то решается это дело без !important и других лишних действий. Достаточно указать для кнопок управления слайдером кастомные селекторы и назначить нужные стили:

    new Swiper('.swiper', {
      navigation: {
        nextEl: '.my-awesome-slider-button-next',
        prevEl: '.my-awesome-slider-button-prev',
      },
    });


    .my-awesome-slider-button-prev { /* ...styles */ };
    .my-awesome-slider-button-next { /* ...styles */ };
    Ответ написан
    1 комментарий
  • Как растянуть sidebar до конца страницы?

    mizutsune
    @mizutsune
    Frontend Developer
    .sidebar { 
       min-height: 100vh; 
    }
    Ответ написан
  • Как добавить черный цвет в футер?

    mizutsune
    @mizutsune
    Frontend Developer
    - <footer class"footer">
    + <footer class="footer">

    - background-color: # #0A0A0A;
    + background-color: #0A0A0A;
    Ответ написан
    1 комментарий
  • Как сделать такие карточки?

    mizutsune
    @mizutsune
    Frontend Developer
    <div class="container">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>


    Вариант первый:

    .container {
        display: grid;
        grid-gap: 10px;  
        grid-template-areas: 
          "A A B"
          "A A C"
          "A A D";
    }
    
    .card:nth-child(1) {
        grid-area: A;
    }
    
    .card:nth-child(2) {
        grid-area: B;
    }
    
    .card:nth-child(3) {
        grid-area: C;
    }
    
    .card:nth-child(4) {
        grid-area: D;
    }


    Вариант второй:

    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
    }
    
    .card:nth-child(1) {
       grid-row: span 3;
       grid-column: span 2;
    }


    Выше два примера для создания сетки для карточек, а для наложения текстовых блоков можно использовать абсолютное позиционирование. Хотя можно и гридами сделать, но это дело выбора.
    Ответ написан
    Комментировать
  • Как сделать что мы можно было пролистать элементы в блоке?

    mizutsune
    @mizutsune
    Frontend Developer
    Есть библиотека под названием Conveyer которая имеет подобный функционал.

    В качестве альтернативного варианта, можно взять слайдер Swiper. В этом слайдере есть всё что нужно для реализации подобных элементов со скроллом. Ну, а ещё можно выпилить лишнее и собрать слайдер с нужными модулями, после чего вес слайдера уменьшится.

    Думаю что есть ещё много других альтернатив, в том числе и реализация данного функционала без стороннего кода, но такой вариант стоит рассматривать если вы уверены в своих знаниях и способны учесть множество моментов, которые нужно учитывать.
    Ответ написан
    Комментировать
  • Как добиться паузы после проигрывания анимации?

    mizutsune
    @mizutsune
    Frontend Developer
    Не особо уверен что это получится сделать адекватно и просто с помощью одного только CSS, поэтому предложу такой вариант с JS:



    В примере используется Mutation Observer, который можно заменить setInterval или рекурсивным вызовом или чем-нибудь ещё... вариантов много.

    Ещё как вариант, можете посмотреть библиотеку anime.js. Возможно с помощью неё, тоже можно решить данную задачу, но точного ответа дать не могу.
    Ответ написан
    Комментировать
  • Как выровнять форму по центру?

    mizutsune
    @mizutsune
    Frontend Developer
    Устанавливать фиксированные значения для свойства width - не совсем корректно. Да и к тому же вы используется гриды, не совсем так как нужно.

    Немного подправил ваши стили:

    .register__inner {
         width: 100%;
    }
    
    .register__form {
         width: 100%;
         max-width: 1000px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
         grid-gap: 10px;
    }
    
    .register__input {
         width: 100%;
         height: 65px;
         border: 1px solid #d8d8d8;
         border-radius: 5px;
         padding: 27px 24px 23px;
    }
    
    .register__btn {
         width: 100%;
         height: 65px;
         border: none;
         border-radius: 5px;
         background: #ffe100;
    }


    У элемента .register__form в принципе можно установить значение grid-template-columns: repeat(2, 1fr), а потом через медиа запросы поменять, но это уже второстепенная задача.
    Ответ написан
    Комментировать
  • Как сделать такое окно загрузки фото?

    mizutsune
    @mizutsune
    Frontend Developer
    Например как-то так:



    В примере выше для функционала Drag & Drop or Draggable - используется библиотека Sortable. С её помощью реализуется основная "магия". Всё остальное настраивается по вкусу и цвету.
    Ответ написан
    1 комментарий
  • Как расположить блоки с контентом таким образом?

    mizutsune
    @mizutsune
    Frontend Developer
    <div class="container">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>


    .container {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 10px;  
        grid-template-areas: 
          "A B"
          "A C";
    }
    
    .card:nth-child(1) {
        grid-area: A;
    }
    
    .card:nth-child(2) {
        grid-area: B;
    }
    
    .card:nth-child(3) {
        grid-area: C;
    }


    Или:

    .container{
        display: grid;
        grid-gap: 10px;  
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card:nth-child(1) {
        grid-row: 1 / span 2;    
    }
    Ответ написан
    Комментировать
  • В чем причина не рабочего бургер меню на GitHub?

    mizutsune
    @mizutsune
    Frontend Developer
    Добавил бургер меню на свой сайт портфолио.


    Если речь идёт об этом портфолио, то тут ошибка в этом:

    <script src="/source/js/script.js"></script>

    - <script src="/source/js/script.js"></script>
    + <script src="source/js/script.js"></script>
    Ответ написан
    1 комментарий
  • Как сделать анимацию с кнопками?

    mizutsune
    @mizutsune
    Frontend Developer
    Как вариант можете попробовать такой плагин Vanilla-JS-Magic-Line-Navigation.

    Можно конечно и на CSS сделать, но функционал будет сильно урезан и вообще, сама реализация скорее всего будет не слишком норм.
    Ответ написан
    1 комментарий
  • Как реализовать выпадающее меню?

    mizutsune
    @mizutsune
    Frontend Developer
    Если нет опыта в создании подобных компонентов, то наверное стоит использовать какую-нибудь готовую библиотеку для аккордеонов. Например такую Accordion или такую metismenujs или поискать какие-нибудь ещё варианты. С помощью любой из этих двух библиотек, можно решить описанную в вопросе задачу.

    Или можно сделать как-то так без библиотек:

    Ответ написан
    3 комментария