Найти тему
Статьи
Стрелка наверх с памятью (такая же как вконтакте и на хабре)
Стрелочка возвращает в то место страницы, где был пользователь до скролла. Сама долго искала скрипт, но идеальный не нашла - пришлось делать самой. <div class="top-link d-none align-items-center justify-content-center"> <span></span> </div> Что означают классы. Все логично, но вдруг кто не знает: d-none = display: none align-items-center = align-items: center; justify-content-center = justify-content: center <style> .top-link { width: 60px; height: 60px; display:...
3 месяца назад
Вопросы/ответы html верстальщику на собеседовании
Некоторые работодатели задают эти вопросы устно, другие же присылают гугл-форму. Второе, конечно, проще - ведь есть время загуглить:) Семантический html это элементы, по названию которых четко можно понять, что в них содержится. Например: form, article, table Адаптивная верстка это верстка, которая смотрится хорошо на любых устройствах и разрешениях экрана. Реализовать ее можно с помощью медиа-запросов Таблицы стилей называются каскадными, потому что при подключении к одному HTML-документу нескольких стилевых таблиц, они, в соответствии со своим приоритетом, выстраиваются в каскад...
6 месяцев назад
Скроллбар меньше родительского блока на чистом CSS
Все чаще скрипты можно заменить стилями. Сегодня расскажу как сделать горизонтальный слайдер с полосой прокрути уже (меньше по ширине), чем родительский блок. Сперва накидаем html: <div class="block"> <span></span><span></span><span></span><span></span><span> </span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span> </div> немного стилей: .block{ display: flex; margin: 100px -10px 100px; overflow-x: auto; }. block>span{ width: 150px; ...
6 месяцев назад
Сленг разработчиков. Список непонятных слов для заказчика сайтов. Термины, о которых могут не знать обычные пользователи.
Если ты ничего не понял, то ниже читай толковый словарь разработчиков сайтов. А Адаптив – это корректное отображение сайта на любом устройстве (ПК, планшет, мобильный телефон) Админка – это панель управления сайтом, с которой может работать любой пользователь, без навыков программирования Айдишник - id, идентификатор, уникальный признак объекта. Например, если вы хотите на сайте сделать скролл из меню к определенному блоку, то блоку необходимо задать айдишник. Б Баг – ошибка на сайте Битый – сломанный (например, битая ссылка) Бургер – это иконка меню...
2 года назад
7 способов нарисовать крестик закрытия на чистом css
Конечно, можно просто запилить svg и вес небольшой и цвет менять можно, но это же скучно! Содержание: 1. Вариант с svg. Можно менять цвет, поворачивать <svg viewPort="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="1" y1="11" x2="11" y2="1" stroke="black" stroke-width="2"/> <line x1="1" y1="1" x2="11" y2="11" stroke="#000000" stroke-width="2"/> </svg> 2. С помощью псевдоклассов. По мне, самый устаревший способ. <div class="close"></div> <style> .close:before, .close:after { content: ""; position: absolute; width: 24px; height: 4px; background: #000000; } ...
864 читали · 2 года назад
Реально ли стать верстальщиком без курсов? Опыт верстальщика-самоучки.
Как же я стала верстальщиком? Желание делать сайты было еще со времен института – выпускной работой был интернет-магазин (хотя это громко сказано, конечно). По факту логотип был нарисован в Word и сверстано несколько блоков на таблицах, никаких баз данных. На тот момент я работала в Русском музее в отделе мультимедиа и имела к сайтам лишь отдаленное отношение (вранье: вообще не имела к ним никакого отношения) И так музейная размеренная жизнь засосала меня еще на 8 лет… 2013 год. Я решила, что пора что-то менять и вспомнила про сайты...
2 года назад
Полосатый бордер с дыркой внутри
Прилетела тут интересная задачка от диза. Можно вставить svg, но зачем, если можно использовать код. Как я вижу это в своей голове? Необходимо сделать круг с полосатым бордером и прозрачными проплешинами. Фон цветной, поэтому в центре необходимо сделать дырку. Этапы осознания: 1. Что мы имеем: · внешний круг 347px*347px, · внутренний круг 310px*310px + обводка каждого из кругов. · нужно учесть, что размер блока при наведении чуть больше (368px*368px) Но самое главное: «Как сделать чертову дырку?!?! Подумаю об этом потом…» 2...
2 года назад
FIGMA. Как скопировать ссылку на конкретный макет, верстать из макета без запроса на редактирование, как сохранить слой в режиме screen
1. Как скопировать ссылку на конкретный макет. Дизы скидывают ссылку, а там миллион макетов и поиски, порой, занимают очень много времени. Чтобы скопировать ссылку нужно: • Выбрать слева всю папку (вы поймете, что выбрали нужный элемент, увидев синюю обводку вокруг объекта, которым хотите поделиться) • Нажимаете правой кнопкой мыши Copy/Paste as -> Copy link 2. Как верстать из макета, к которому нет доступа без запроса на редактирование • Нажать на стрелочку рядом с названием проекта. • В выпадающем меню выбрать “Duplicate to your drafts” (скопировать себе в черновики) Все...
449 читали · 2 года назад
Расстояние между штрихами border, border с длинными штрихами и закругленными углами
Свойства css не поддерживают настройку расстояния между штрихами, но есть несколько вариантов как это обойти. 1 вариант: Берем картинку png такого вида картинка весит чуть более 100 байт. Цвет, прозрачность, длину и ширину промежутков можно изменить в фотошопе. Код: .border { border: dashed 2px #000; /* запасной вариант */ border-image-source: url("путь_к_картинке.png"); border-image-slice: 1; /* толщина бордера */ border-image-repeat: round; /* повторение изображения */ /* короткая запись border-image */ border-image: url("путь_к_картинке...
165 читали · 2 года назад
Привет. А вот и я - девушка-верстальщик. Вылезла из пучины черного экрана и кода и наконец, добралась до своего блога. Как оказалось, девушек-верстальщиков👩‍💻 сайтов не так уж и много. Я работала только с одной. Хотелось бы рассказать как это, работать в мужском коллективе, как проходят рабочие процессы – а может я даже смогу помочь кому-нибудь советом. Ну, и конечно, всегда рада халтуркам. ❗️Кто же я и чем занимаюсь? Верстаю сайты, рассылки, баннеры. Обожаю анимацию и необычные дизайны. ___ В верстке стараюсь использовать минимум изображений и даже некоторые svg элементы рисую кодом – для облегчения сайта, но скорее, for fun. Последнее время появилось очень много интересных задачек по верстке, оригинальной анимации, над которыми приходится ломать голову и усиленно искать информацию в интернете. Именно этим, а также юмором от дизайнеров и программистов, интересными фишечками #figma и #photoshop, я собираюсь с вами делиться. Ну и для себя, чтобы в следующий раз не искать. ___ ❗️Для тех, кто совсем не понимает, что такое верстка: Верстка – это один из важных этапов создания сайта. Если дизайнер уже нарисовал вам красивый сайт, то дальше вам ко мне. После этого этапа вы уже сможете увидеть как будет выглядеть ваш сайт, сможете навести на кнопочки и пункты меню, увидеть «оживленные» элементы на сайте.
2 года назад
Видео