Вопросы с меткой [вёрстка]

Вёрстка (HTML-вёрстка, Вёрстка веб-страниц) — процесс формирования веб-страниц на языке разметки гипертекста (HTML) с использованием каскадных таблиц стилей (CSS).

Фильтрация
Сортировка
Метки
56 голосов
9 ответов
72k показов

Как прижать footer к низу экрана?

Есть основной блок <div class="container"></div> с контентом различной высоты, а под ним размещён футер. Если контент не достигает всей высоты экрана, нужно чтобы блок .container ...
Escobar's user avatar
  • 747
41 голос
7 ответов
3k показов

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

Подскажите, как сверстать такой бордер?
DDM's user avatar
  • 411
31 голос
3 ответа
2k показов

Можно ли весь сайт делать на svg?

Что если html-верстку сайта сделать только с svg изображениями, вместо стандартных img или png, не будет никаких проблем? Кроссбраузерность и прочее?
Павел Игорев's user avatar
30 голосов
4 ответа
1k показов

Как нарисовать конус на CSS?

Хочу сделать Гюнтера из «Adventure Time», а именно клюв как на этой картинке: Как нарисовать такой клюв (конус) средствами CSS?
darkwoolf's user avatar
  • 1,049
28 голосов
2 ответа
2k показов

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

Как лучше реализовать такую рамку при наведении на элемент?
Roman Rozum's user avatar
27 голосов
6 ответов
1k показов

Можно ли контенту псевдоэлемета css задать повторение?

Допустим, есть код: div { position: relative; background: blueviolet; height:100px; } div:before { content: 'продано'; color: white; } <div></div> Хочу ...
kizoso's user avatar
  • 9,333
26 голосов
5 ответов
10k показов

column-count и перенос блоков. Нюанс с column-count

Здравствуйте! Имеется контейнер .block, в котором размещены три блока .item-block. Контейнер необходимо разделить на две колонки, в первой из них будут два первых блока, во второй - соответственно, ...
Игорь's user avatar
  • 1,026
22 голоса
10 ответов
264k показов

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

При клике и фокусе на элементе input появляется обводка. Как её убрать?
makregistr's user avatar
  • 3,231
21 голос
7 ответов
1k показов

Как сделать плавный изгиб - переход от красной части меню к чёрной

Это можно сделать используя CSS? Или придётся картинкой делать?
EXOTIC 12's user avatar
  • 255
15 голосов
4 ответа
22k показов

Отступы между инлайновыми элементами [дубликат]

Откуда берутся отступы между элементами с display: inline-block; и как их убрать? Отступы нигде не фиксируются:
Philin's user avatar
  • 461
15 голосов
1 ответ
207 показов

Можно ли в img внутри alt="" сделать зачеркнутый текст?

Можно ли в img внутри alt="" сделать зачеркнутый текст? Почему-то думала, что в alt и title используется markdown, но две подряд тильды желаемого не дают: <img src="img/slider.jpg" alt="Наш ...
kizoso's user avatar
  • 9,333
15 голосов
1 ответ
457 показов

IE убирает границы ячеек при печати нескольких страниц

При попытке распечатать таблицу, сгенерированную через phpExcel, IE игнорирует любые стили и границы, при переходе на следующую страницу. При выводе в браузер - все отображается корректно, а при ...
Виктор Жариков's user avatar
14 голосов
1 ответ
16k показов

Разделение списка на несколько колонок

Имеется список, пункты которого должны следовать друг за другом по вертикали, а по достижении нижней границы родителя с фиксированной высотой - переноситься в новую колонку. Реализация с помощью ...
Игорь's user avatar
  • 1,026
13 голосов
10 ответов
6k показов

Книги и учебные материалы по HTML и CSS, а также инструменты вёрстки [дубликат]

Хочу начать изучение HTML и CSS. В интернете находил много сайтов и книг, глаза разбегаются и не знаю что выбрать. Поэтому, прошу посоветовать, с какой книги или сайта лучше всего стоит начать изучать ...
ArniLand's user avatar
  • 1,089
13 голосов
7 ответов
4k показов

Скоростная верстка

Вопрос в следующем: хочется научиться верстать быстро. Реально быстро, при этом, не "нарабатывая опыт годами". Что я имею в виду? Например, есть стандартный шаблон для трехколоночного сайта. ШАПКА ...
knes's user avatar
  • 25.9k
13 голосов
5 ответов
617 показов

Как сверстать блок с линиями отходящими от центральной картинки?

Возможно, кто-то сталкивался с подобными блоками? Не представляю, как это можно реализовать. Вряд ли получится с помощью абсолютного позиционирования адаптивно сверстать такое. UPD1: Сложность ...
Ясырев Михаил's user avatar
13 голосов
1 ответ
3k показов

Как сделать соединительную линию под наклоном между двумя точками?

Нужно сверстать соединительные линии для таких блоков адаптивно: Возможно ли в css прописать начало линии в одном relative блоке, а конец в другом? Есть ли такое решение на css или может быть svg? Js ...
kizoso's user avatar
  • 9,333
12 голосов
2 ответа
3k показов

Наложение background только на текст

Есть текст. На него надо наложить background так, чтобы он был только на тексте. То есть все, что не текст, было прозрачным. Думаю через svg сделать наложение картинки на текст, но не знаю, как ...
Nikolay's user avatar
  • 824
12 голосов
3 ответа
473 показа

Как добиться эффекта сложенного гармошкой листа с помощью CSS?

Подскажите как такое сверстать. Интересует именно блоки в виде трапеций с обводкой. Фон, стрелки, текст - то все понятно.
Katerina Pidan's user avatar
12 голосов
1 ответ
5k показов

Мобильная версия сайта

Здравствуйте. Хотел задать такой вопрос. У меня есть сайт который прекрасно работает на всех 4-х браузерах (включая IEv6 :)). Теперь хочу сделать мобильную версию сайта. Скажите, что нужно знать для ...
alex_90's user avatar
  • 1,262
11 голосов
2 ответа
342 показа

Как сверстать такой семи-круг?

Подскажите пожалуйста каким образом можно сделать такой семи круг с пунктами?
Dan's user avatar
  • 2,191
10 голосов
5 ответов
1k показов

Колыбель Ньютона, анимация демонстрирующая этот эффект

Широко известен физический опыт, названный "Колыбелью Ньютона" см. Wikipedia ref При отклонении и последующем возврате к изначальному положению первого шарика данной системы его энергия и ...
Alexandr_TT's user avatar
10 голосов
4 ответа
662 показа

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

Помогите пожалуйста сделать такой прозрачный вырез снизу от этого золотого круга, возможно это как то можно сделать через clip path или еще как-нибудь?
Houck z's user avatar
  • 187
10 голосов
4 ответа
5k показов

SVG: удалить отступы по краям автоматически

Столкнулся с проблемой при верстке сайта. У меня есть ряд иконок SVG, которые выглядят примерно так: Проблема в том, что вокруг самого изображения есть отступы до краев. Мне бы хотелось, чтобы этих ...
cronfy's user avatar
  • 1,452
10 голосов
2 ответа
2k показов

В каких браузерах и на каких устройствах проверять адаптивный сайт?

Немного занимаюсь в свободное время frontend-ом (по фану) – CSS3, JavaScript, HTML5, адаптив (чтобы сайт "как игрушка" выглядел, перестраивался динамически под размеры и повороты экрана). Первым ...
rugabarbo's user avatar
  • 1,317
10 голосов
3 ответа
8k показов

Адаптивный поворот текста

Нужно сделать заголовок адаптивного блока с поворотом. Загвоздка в том, что блок адаптивный, ширина меняется относительно экрана, и высота может быть сколь угодно разная, в зависимости от внутреннего ...
kizoso's user avatar
  • 9,333
9 голосов
6 ответов
5k показов

Сделать символ плюса в CSS

У меня есть приведенный ниже код CSS, который дает символ +, но не соответствует дизайну, в основном он должен быть тонким. .plus { position:relative; border: 1px dotted white; width: 3px; ...
Alexandr_TT's user avatar
9 голосов
4 ответа
4k показов

Как убрать дефолтную анимацию нажатия на button в IE 9, 10, 11?

В IE 9, 10, 11 прыгают button при нажатии. Свойства margin: 0 и padding: 0 на псевдоклассы :active и :focus проблемы не решают. Пример съезжания кнопок на видео: https://monosnap.com/file/...
user avatar
9 голосов
4 ответа
411 показов

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

Необходимо сделать анимацию руки робота Сценарий анимации: Вращение всей руки вокруг нижнего шарнира "1" При этом все остальные звенья руки должны отслеживать поворот в нижнем шарнире ...
Alexandr_TT's user avatar
9 голосов
1 ответ
2k показов

способ верстки волнистого фона. сложный фон

Пытаюсь представить способы и пути решения верстки подобного шаблона: Подскажите, где почитать, как сделать такой фон не целой картинкой. Интересно и отдельные белые частицы и наклонные волнистые ...
Вячеслав's user avatar
9 голосов
3 ответа
874 показа

Как выравнивать блоки по центру не сломав wrap?

Допустим есть блоки .main { display: flex; flex-wrap: wrap; justify-content: flex-start; background: #fff; } .box { width: 170px; height: 130px; border-radius: 3px; ...
Fangog's user avatar
  • 1,665
9 голосов
2 ответа
356 показов

Как сверстать прямоугольные блоки с общим фоном

У меня есть вертикальная панель блоков / кнопок. Я хочу сделать так что бы у них был общий фон, как это можно сделать? Исходная картинка
Дмитрий Полянин's user avatar
9 голосов
3 ответа
231 показ

Реализация верхнего меню

На днях набросал код верхнего меню без использования скриптов. Всё работает на ура, но правильно ли это? Дело в том, что я использовал для стилизации input type="checkbox", pointer-events: none; и ...
Yuri's user avatar
  • 16k
9 голосов
1 ответ
536 показов

Как правильно перенести блок div внутри шаблона Wordpress?

Есть шаблон page.php моего сайта на Wordpress: Вот сайт: http://lagaro-wordpress-bootstrap.byethost33.com/ Как перенести в указанное на картинке место, и растянуть на всю ширину блока ? <?php /...
kir's user avatar
  • 111
8 голосов
4 ответа
609 показов

Отскоки мяча по параболической траектории

Вопрос инициирован топиком: Как анимировать отскок теннисного мячика В этом вопросе отскоки были по вертикали <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="...
Alexandr_TT's user avatar
8 голосов
5 ответов
22k показов

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

Имеется некий блок с текстом с фиксированной высотой и шириной, и значением overflow: hidden;, то есть если текст не влазит в область он обрезается, нужно добавить многоточие в конец последней видимо ...
russell's user avatar
  • 123
8 голосов
4 ответа
4k показов

Правильная сетка CSS

Нужно сделать правильную сетку с помощью CSS и желательно Flexbox. Вот так у меня выглядит сейчас: Что тут не так: Нижняя часть сетки не прижата к левому краю. Не изменяется расстояние между ...
100РОЖЬ's user avatar
8 голосов
3 ответа
262 показа

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

Как сделать, как на картинке ниже. Пробовал сделать, но адаптивность машет ручкой (делал разные отступы для мобилок, но их слишком много) #vertical_text { font: 47px Verdana; color: #D7D7D7; ...
Starina's user avatar
  • 83
8 голосов
2 ответа
1k показов

Почему при указании только viewBox, SVG отображается на весь экран браузера?

Подскажите, пожалуйста, почему не работает viewBox у svg(изображение крестика): <svg style="border: 1px solid red" viewBox="0 0 24 24"> <path fill="currentColor&...
Pavel's user avatar
  • 467
8 голосов
2 ответа
4k показов

Как задать border-bottom радиальный градиент, чтобы получился примерно такой результат?

Каким образом это можно реализовать?
Максим Демьянюк's user avatar
8 голосов
2 ответа
29k показов

Занять div`ом всю оставшуюся высоту. Как?

Использую Bootstrtap 4. div-у с классом h100percent необходимо занять всю оставшуюся высоту в div-е wrapper. При этом Header фиксированной высоты располагается сверху, а footer фиксированной высоты ...
Евгений's user avatar
8 голосов
2 ответа
2k показов

Как изменить размер clip-path SVG?

Я использую SVG в качестве маски для изображения, и пытаюсь изменить размер изображения. Я изменил ширину и высоту (до 100), но изображение по-прежнему не масштабируется. Просто остается того же ...
Alexandr_TT's user avatar
8 голосов
2 ответа
5k показов

Фиксированный thead с прокруткой tbody

Здравствуйте! Подскажите как сделать фиксированный thead с прокруткой tbody, желательно без JavaScript. Есть метод с применением display: block; и указыванием фиксированной ширины к thead и tbody. ...
Lefff's user avatar
  • 186
8 голосов
2 ответа
867 показов

Как сверстать шестиугольные ячейки с картинками и ховером?

Задача сверстать блоки, с изображением и ховером (цвет случайный), блок является ссылкой. сначала попробовал с css3, подсмотрел http://kizu.ru/fun/polygons/ , но возникла сложность с закруглением ...
Anser's user avatar
  • 174
8 голосов
1 ответ
976 показов

Задать размер шрифта на веб-странице такого же размера как в Word

Есть некоторый веб-сервис, генерирующий при помощи WkHtmlToPdf PDF файл из html-страницы. Одно из требований к документу (а это некоторый формуляр, утверждённый госорганом), чтобы документ выглядел ...
A K's user avatar
  • 28.7k
8 голосов
1 ответ
154 показа

Сочетание использования float (для изображения) и column layout для текста

Столкнулся со сложностью совместного использования float и column. Есть объект с обтеканием. Текст его прекрасно обтекает. Но как только я начинаю использовать разделение на колонки , обтекание ...
Ivan's user avatar
  • 175
7 голосов
3 ответа
7k показов

Помогите сверстать чат

Нужно расположить блоки в виде чата, как на картинке. Помогите, пожалуйста, что я делаю не так и как это сделать правильнее, чище? .text-align-center { text-align: center; } .item:nth-...
fff's user avatar
  • 139
7 голосов
2 ответа
246 показов

Анимация разрезания досок дисковой пилой

Есть топик, в котором реализована анимация вращения и движения дисковой пилы html { background-color: #337ab7; } .cutline { stroke: #222; stroke-width: .1%; stroke-width: .5%; stroke-...
Alexandr_TT's user avatar
7 голосов
3 ответа
633 показа

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

Как сверстать такой блок, а точнее эту изогнутую шапку на блоке?
Alexey Alpatov's user avatar
7 голосов
2 ответа
338 показов

Как анимировать криволинейную границу объекта?

Имеется вот такой объект на сайте: Данная "клякса" имеет криволинейную границу по правой и нижней стороне. Картинка статична, но я приведу ссылку с тем, как это уже реализовано на одном из ...
MoloF's user avatar
  • 4,588