Разметка: <nav class=»circle-menu»> <div class=»center»></div> <ul> <li><a href=»#»>1</a></li> <li><a href=»#»>2</a></li> <li><a href=»#»>3</a></li> <li><a href=»#»>4</a></li> <li><a href=»#»>4</a></li> <li><a href=»#»>6</a></li> </ul> </nav> Стили: .circle-menu { position: relative; width: 400px; height: 400px; margin: 50px auto; background-color: white; box-shadow: 0 0 3px #cccccc; } .circle-menu ul { position: absolute; width: 300px; height: 300px; margin: 50px; padding: 0; list-style: none;…Продолжить читать «Круговое меню из курса HTML-академии»
Сказка ли? Нет, к тому же это очень удобно, быстро, масштабируемо и кроссбраузерно. Инструкция любезно предоставлена мне моим другом и коллегой Антоном Яценко. Создаем свой собственный иконочный шрифт используя svg-иконки. Ресурс: https://icomoon.io Идешь в приложение http://joxi.ru/EA417L1TLglxrb Импортишь свои иконки с компа http://joxi.ru/Vm6zqZzTOwNkmZ Они все должны быть выделены (об этом свидетельствует цвет фона, на котором они…Продолжить читать «Свой иконочный шрифт из svg иконок»
Использование нестандартных шрифтов Перед тем как продолжить работу над сайтом, давайте разберёмся со шрифтами. В HTML5 появилась возможность подключать и использовать на странице любые нестандартные шрифты. Веб-шрифты поддерживаются большинством современных браузеров. Простейший способ использовать такой шрифт — найти его в специальном сервисе по названию, получить там код подключения шрифта, вставить этот код в свою вёрстку и…Продолжить читать «HTML5»
Основное содержание. Тег main. Обратите внимание, что мы задали классы для хедера и футера. Сделано это потому, что этих элементов на странице может быть несколько. Хедер — это не только привычная шапка сайта с логотипом и меню, он может использоваться и как «шапка» какой-нибудь статьи или раздела сайта. Конечно, в случае со статьёй хедер называют не…Продолжить читать «HTML5»
Максим Усачев 04.01.2012 Каждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы. В…Продолжить читать ««Загадочные отступы» между инлайн-элементами»
24 сентября 2014, автор: Крис Койер, перевод: Алексей Симоненко Несколько раз встречал обсуждение проблемы пробелов в твиттере, а затем увидел интересный дабблет на эту тему, поэтому решил зафиксировать. Проблема вот в чём: между блочно-строчными элементами в браузере появляются пробелы, если вы форматируете HTML-код как обычно. Другими словами. <nav> <a href=«#«>Один</a> <a href=«#«>Два</a> <a href=«#«>Три</a> </nav> view raw1.html hosted with ❤ by GitHub…Продолжить читать «Борьба с пробелами между блочно-строчными элементами»
https://jsfiddle.net/arinagavrilova/3bafpxk6/ 0
Сделать так. Управляя только html. Css не трогать. Живой пример тут HTML <div class=»puzzle»> <div class=»block5″></div> <div class=»block7″></div> <div class=»block3″></div> <div class=»block1″></div> <div class=»block4″></div> <div class=»block6″></div> <div class=»block8″></div> <div class=»block2″></div> </div> CSS .puzzle{ width:300px; margin:0 auto; padding-top:5px; } .puzzle div{ margin-right:5px; margin-bottom:5px; } .block1{ float:left; width:70px; height:220px; background:#3498DB; } .block2{ float:right; width:220px; height:70px; background:#3498DB; }…Продолжить читать «Занимательные пазлы»
Странно, но многие разработчики до сих пор не знают о таком замечательном CSS3 свойстве какbox-sizing. Или знают, но почему-то не используют. А ведь используя это свойство, можно избежать вроде бы нелогичного поведения браузеров. Например, задавая ширину и высоту блоку, чаще всего мы хотим видеть его именно таких размеров. Но выходит совсем не так. Ведь на…Продолжить читать «Используйте свойство box-sizing»
http://marksheet.io/internet.html 0