Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным. Итак, начнем с примера для тех, кто не знает, что такое placeholder. html <input type=»text» placeholder=»Оставьте сообщение здесь»> открыть в новом…Продолжить читать «Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5»

Теория цвета в цифрах

Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код. Основы Начнем с простого: рассмотрим обычный hex-код,…Продолжить читать «Теория цвета в цифрах»

«Загадочные отступы» между инлайн-элементами

Максим Усачев 04.01.2012 Каждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы. В…Продолжить читать ««Загадочные отступы» между инлайн-элементами»

Борьба с пробелами между блочно-строчными элементами

24 сентября 2014, автор: Крис Койер, перевод: Алексей Симоненко Несколько раз встречал обсуждение проблемы пробелов в твиттере, а затем увидел интересный дабблет на эту тему, поэтому решил зафиксировать. Проблема вот в чём: между блочно-строчными элементами в браузере появляются пробелы, если вы форматируете HTML-код как обычно. Другими словами. <nav> <a href=«#«>Один</a> <a href=«#«>Два</a> <a href=«#«>Три</a> </nav> view raw1.html hosted with ❤ by GitHub…Продолжить читать «Борьба с пробелами между блочно-строчными элементами»

Занимательные пазлы

Сделать так. Управляя только 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; }…Продолжить читать «Занимательные пазлы»