Профиль пользователя заблокирован в режиме deactivate сроком с 1 сентября 2020 г. и навсегда по причине: Мы подозреваем, что ваша учётная запись была взломана, для доступа к аккаунту свяжитесь с администратором.
I don't like filling out the field: About me - because I consider it a waste of time. But, if you want to get to know me better or make friends with me, you can always contact me through the specified contacts. I like frontend, reading books, hard rock, design, poetry, computer games, literature, cartoons, drawing and much more.

In my free time from work, I like to help other developers with layout, scripts, design. Therefore, if you have small questions, you can always contact me for help. But I do not promise that I can always give an answer that will solve the problem, and do not forget that there is a border between friendly help and freelancing.

If you want to contact me, write to Vkontakte. I rarely read mail.
Контакты
Местоположение
Россия, Санкт-Петербург и область, Санкт-Петербург

Достижения

Все достижения (25)

Наибольший вклад в теги

Все теги (127)

Лучшие ответы пользователя

Все ответы (1138)
  • Как реализовать такой элемент в CSS?

    sniggering_deus
    @sniggering_deus Куратор тега CSS
    Dance Gavin Dance - Prisoner
    Вариант первый:



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



    Вариант третий:



    Вариант четвёртый:



    Вариант пятый:



    Вариант шестой:



    Вариант седьмой:



    Вариант восьмой:



    Вариант девятый:



    Вариант десятый:



    Вариант одиннадцатый:



    Вариант двенадцатый:



    =================================================================================
    =================================================================================

    Моя коллекция меню навигаций и хлебных крошек: https://codepen.io/collection/njaGMk
    Оставляю ссылку тут. Коллекция будет обновляться.
    Ответ написан
  • Как сверстать подобные блоки?

    sniggering_deus
    @sniggering_deus Куратор тега CSS
    Dance Gavin Dance - Prisoner
    С помощью clip-path или SVG.

    Вот сделал "лёгкие" примеры по изображению в вашем вопросе. Плавность линий и точные координаты устанавливать не стал, так как:


    Желательно пример какой-нибудь похожий.


    Поэтому думаю, что и таких примеров будет достаточно чтобы понять суть.



    Каждый блок делится на три дочерних подблока. Для верхнего и нижнего устанавливаете Clip-path обрезки. Средний блок, т.е контент - с помощью padding получает себе свободное место, так как верхний блок придётся выводить в position: absolute чтобы он наехал на средний блок. Вместо абсолютного позиционирования верхнего блока можно использовать отрицательный margin.

    Серые полоски добавить можно с помощью псевдоэлементов. Через SVG рисуете эти полоски, чтобы они ровно обтекали вырезы блоков и устанавливаете в качестве бэкграунда для псевдоэлементов. С помощью position: absolute; и top: Npx; / left: Npx; выравниваете.

    Ну и готовые блоки добавляете в слайдер и всё.

    И дизайнера на кол сажать не нужно. Дизайнер тоже человек, который делает свою работу, а если верстальщик не может выполнить свои обязанности, значит какой он тогда верстальщик? Мы вроде бы уже в 2020 году и уже давно есть множество методов решать подобные задачи.
    Ответ написан
  • Есть ли "правильность" верстки?

    sniggering_deus
    @sniggering_deus Куратор тега CSS
    Dance Gavin Dance - Prisoner
    Смысл есть в именах классов, то есть если назвать класс:

    .brrrrrrr {.....}

    Или:

    .g6jdk4894 {.....}

    Будет вообще непонятно к чему относится данный класс.

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

    Блоки

    page — корневой элемент страницы
    header — шапка (страницы или элемента)
    footer — подвал (страницы или элемента)
    section — раздел контента (один из нескольких)
    body — основная часть (страницы или элемента)
    content — содержимое элемента
    sidebar — боковая колонка (страницы или элемента)
    aside — блок с дополнительной информацией
    widget — виджет, например, в боковой колонке

    Раскладка

    wrapper, wrap — обёртка, обычно внешняя
    inner — внутренняя обёртка
    container, holder, box — контейнер
    grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)
    row — контейнер в виде строки
    col, column — контейнер в виде столбца

    Элементы управления

    button, btn — кнопка, например, для отправки формы
    control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером
    dropdown — выпадающий список

    Текст

    title, subject, heading, headline, caption — заголовок
    subtitle — подзаголовок
    slogan — слоган
    lead, tagline — лид-абзац в тексте
    text — текстовый контент
    desc — описание, вариант текстового контента
    excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»
    link — ссылка
    copyright, copy — копирайт

    и так далее...


    Источник: https://github.com/yoksel/common-words

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

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

    Нечто в стиле:

    .avatarka-polzovatelуa-izobrazenie {...}

    Подобное выглядит очень и очень ужасно.
    Ответ написан
  • Как сделать такую полосу?

    sniggering_deus
    @sniggering_deus Куратор тега CSS
    Dance Gavin Dance - Prisoner
    Ответ написан
  • Как сделать чтобы подвал сайта был черным, а в нем белые буквы?

    sniggering_deus
    @sniggering_deus Куратор тега CSS
    Dance Gavin Dance - Prisoner
    Хм... я могу посоветовать вам изучить CSS. Будет полезно.

    Ну, а так по делу:



    Подправил немного ваши стили. Шрифты и прочее настроите как вам нужно, я для демки поставил другие шрифты. Ещё добавил медиа-запрос. При ширине в 764px блоки выстраиваются в колонну. Это тоже можете настроить под себя, при желании.

    А теперь немного советов на будущее:

    Например нет смысла ставить элементы в position: absolute, когда нужно сделать нечто простое как футер, например, так как можно воспользоваться Flexbox или CSS Grid для выравнивания и размещения элементов. Абсолютное позиционирование нужно в других случаях, но тут уж точно оно лишнее.

    Непонятно зачем задавать высоту и ширину блокам, если можно использовать, например padding. Для текстовых блоков вообще не рекомендуется ставить фикс. высоту, потому что при переполнении текст будет выходить за пределы блока(конечно если не задано свойство overflow: hidden) и это будет не слишком красиво.

    Не слишком красиво выглядят имена классов при использовании camelCase в CSS. Для двух / трёх слов ещё будет более менее, но когда имя класса будет состоять например из 5 и более слов, будет не слишком красиво. Используйте кебаб-кейс, он наиболее лучше подходит для нейминга классов в CSS. Хотя особой разницы нет, это дело вкусовщины.

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

    Также хочу отметить что на декстопе не обязательно ставить слишком мелкий шрифт для текстовых элементов. Вместо 11 / 13 px - можно поставить например 16px, что собственно говоря при наличии такого пустого пространства, будет отлично.
    Ответ написан

Лучшие вопросы пользователя

Все вопросы (14)