Ответы, понравившиеся пользователю Максим

Чем frontend разработчик занят на реальных проектах?

Виктор Кожухарь @vitiok78

С резким ростом популярности React Server Components и Next.js в последнее время происходит некий сдвиг в понимании, что такое фронтенд.
BFF уже почти становится неотъемлемой частью "фронтенда", и становится обременительно разделять браузер и сервер на разные команды.
На Западе, вообще, уже очень давно и макетами, и вёрсткой, и анимациями очень часто занимается один человек - дизайнер, фронтендеры занимаются связкой браузер + BFF, а бэкендеры занимаются более сложной бизнес-логикой.
К тому же, джуниорам зачастую дают те задачи, которыми сами не хотят заниматься, и на что нет времени. Т.е. это что-то занудное, работа с legacy, передвижение кнопки на 5px влево и т.д. Крайне редко джуниорам дают интересные творческие задачи. Не факт, что вам на новом месте не дадут такие же неинтересные задачи.
Вы можете либо молча сильно стараться в надежде, что вам потом дадут что-то интересное, заметив ваше рвение, либо, лучше всего, пообщаться по-человечески с коллегами и начальством, объяснив, что вы рветесь в бой, а вас в тылу держат. Попросите рассказать об их планах на ваш счёт.
Не исключено, что у вас как раз хорошо получается "Настройка тестов, CI/CD, OLAP CUBE, оптимизация запросов к БД", и поэтому вам эти задачи и дают)
В общем, человеческое общение с коллегами очень часто решает проблемы.
Если же вы к ним придёте с открытой душой, а вас токсично отошьют, вот тогда подумайте о смене работы.

Ответ написан 07 апр.

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

Почему не центрируется текст?

Ankhena @Ankhena Куратор тега CSS

Нежно люблю верстку

Явно центрируется

даже с учетом опечатки в теге div

2) Как применять маску таким образом что бы доминирующий цвет брался не из html,body ?

Не очень понятно чего нужно достичь, но цвет берется из bg. Ни у кого кроме body его нет. Будет другой у items или item возьмется оттуда.

Ответ написан 31 мар.

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

Почему не центрируется текст?

Алексей Уколов @alexey-m-ukolov Куратор тега CSS

1. Текст прекрасно центрируется по горизонтали. Если вам нужно центрировать его ещё и по вертикали, то есть располагать по центру изображения, то для этого нужно написать хоть какой-то код. У вас указан только text-align, он работает, странно ожидать чего-то большего.

2. Укажите желаемый цвет фона в .items.

Ответ написан 31 мар.

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

CSS как сделать div изображений ровно под наклоном друг за другом?

Михаил Лялин @mr_jok

наверное, корректнее поворачивать весь блок изоображений

Ответ написан 28 февр.

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

Как замазать свободную область от картинки?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Расположить такую же картинку позади и растянуть ее на весь блок. Чтобы не было искажений, установить object-fit:cover; Либо повесить на фон с заполнением background-size: cover;
Заблюрить с помощью filter: blur(10px);

Ответ написан 24 февр.

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

Что делать, если не меняется цвет навигационных ссылок?

Ankhena @Ankhena Куратор тега CSS

Нежно люблю верстку

Да что ж такое.
Я вам в прошлом вопросе написала тактику.

Не меняются ссылки на цвет , который задал.

Нет, не задали.
Задали для nav, для ссылок - нет.

Как решить проблему ?

Задать.

Также рекомендую начать пользоваться инструментами разработчика в браузере. Он отлично показывает что и почему применилось. У синей (или посещенной фиолетовой) будет написано user agent stylesheet, т.е. стили браузера по умолчанию.

Ссылки не наследуют свойство color.
Чтобы изменить цвет ссылки, нужно ей задать это свойство.
Если нужно, чтобы она была такого же цвета, как родитель, то использовать значение inherit

.nav a {
  color: inherit;
}

p.s. Для доступности меню верстают списком внутри тега nav.

Ответ написан 19 февр.

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

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

Artificial Slowpoke @Archerwell

Resist the temptation to always talkabout yourself

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Треугольники в шапке</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        header {
            position: relative;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 200px;
            font-size: 24px;
            overflow: hidden;
        }

        /* Левый верхний треугольник */
        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 100px 100px 0 0;
            border-color: #333 transparent transparent transparent;
        }

        /* Правый нижний треугольник */
        header::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 100px 100px;
            border-color: transparent transparent #333 transparent;
        }
    </style>
</head>
<body>
    <header>
        Шапка сайта
    </header>
</body>
</html>

Ответ написан 04 февр.

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

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

Владислав Храмцов @mag1987

Ответ написан 04 февр.

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

Не переходит по ссылке, что делать?

Rsa97 @Rsa97

Для правильного вопроса надо знать половину ответа

А если подумать?
Что должен выдать document.querySelector('https://vk.com/krosrs')?
Правильно, ошибку. Что и выдаёт.

что делать?

Для начала определиться, а что именно вы хотите получить этим кодом и зачем делать ссылку, а потом запрещать переход по ней.

Ответ написан 04 февр.

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

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

irishmann @irishmann

Научись пользоваться дебаггером

Примерно так

Ответ написан 31 янв.

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

Как можно такое сделать?

Ankhena @Ankhena Куратор тега CSS

Нежно люблю верстку

Так, на коленке, но с адаптивом.
Плохо, что вы не потрудились сделать хотя бы начальную песочницу с нужными шрифтами и размерами.
Возможно, при исходном шрифте удастся избежать части костылей с переносами.

https://codepen.io/AnnaSummer/pen/yyBrwyz

Альтернативный вариант с использованием mix-blend-mode, но нужно подбирать цвета и эффекты

https://codepen.io/AnnaSummer/pen/LEPoRLZ

Ответ написан 03 февр.

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

Как создать таблицу?

VoidVolker @VoidVolker Куратор тега JavaScript

Dark side eye. А у нас печеньки! А у вас?

Использовать стандартный тег таблицы, который и предназначен для создания таблиц: https://htmlbook.ru/html/TABLE

Ответ написан 31 янв.

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

Как сверстать такой блок на css или canvas?

ksnk @ksnk

Ну, если не найдутся css сектанты или svg- сектанты, то вот пример с канвасом

Ответ написан 27 янв.

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

Как заставить работать HTML Drag and Drop API на мобильных устройствах?

ThunderCat @ThunderCat Куратор тега JavaScript

{PHP, MySql, HTML, JS, CSS} developer

https://stackoverflow.com/questions/75653513/drag-...
https://stackoverflow.com/questions/52554613/html-...

Ответ написан 25 янв.

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

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

Сергей delphinpro @delphinpro Куратор тега JavaScript

frontend developer

Как много кода для простого рейтинга.

Ответ написан 21 янв.

Как повторить такую анимацию?

Ivan Bogachev @sfi0zy Куратор тега CSS

Creative frontend developer

Если вы хотите разобраться, то у них в консоли есть ссылка на статью, на которой эффект основан. Там прям хорошо расписано, как все это работает. Но тут нужно понимать, что это материал, который требует определенных изначальных знаний, как по математике, так и по технологиям в мире фронтенда. Задача комплексная, много чего в себя включает.

Если хочется просто взять готовые решения, сказать разработчикам, что использовать, и дать им набор параметров, то есть WebGL Fluid Simulation. Этот инструмент остается популярным выбором для этой задачи уже много лет.

Ответ написан 20 янв.

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

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

Ivan Bogachev @sfi0zy Куратор тега CSS

Creative frontend developer

clip-path: polygon(70% 25%, 25% 50%, 70% 75%);

Ответ написан 06 янв.

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

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

Алексей Уколов @alexey-m-ukolov Куратор тега CSS

В чём вообще сложность-то?

div {
    width: 0px;
    height: 0px;
    padding: 0;
    border: none;
}

div:after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 200px solid transparent;
    border-bottom: 200px solid transparent;
    border-right: 360px solid #00FF00;
}

смещение сделано, чтобы убедиться, что всё на месте; без него совпадение 100%

Ответ написан 06 янв.

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

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

Aetae @Aetae

Тлен

У тебя на кратинке не "бордер пикселей 5" а весьма неравномерный нарисованный контур.

Если он - часть картинки, то просто делаешь из картинки PNG с прозрачностью и всё.
Иначе в CSS есть свойство mask - делаешь пару масок - одну на контур, одну на картинку под ним, или совмещаешь с clip-path.

Вот так можно обойтись одной маской, если использовать оба варианта наложения:

Ответ написан 26 дек. 2024

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

Как поменять цвет анимационного шарика?

RAX7 @RAX7

https://css-tricks.com/gooey-effect/

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

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

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