Метка «html» - 21

Однажды, у меня возникла задача, сделать на форме сайта выбор одного из нескольких цветов. Казалось бы, нет ничего проще. Элемент radiobutton, как нельзя лучше, подходит для этой задачи, нужно только чуть-чуть его кастомизировать. Тут-то и начинаются проблемы. Дело в том, что отрисовкой элементов radiobutton и checkbutton управляет не браузер, а ОС. Соответственно, большинство свойств CSS (например, background-color) на них не действует.
Читать полностью »

Наверное, вы уже слышали о таких вещах как CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries и т.п. Речь пойдет о том, как использовать все эти инструменты вместе: дело в том, что неоднократно были замечены конфликты между ними. Ну, а если вы не совсем понимаете, зачем вам HTML 5 и CSS 3, тогда не стану навязывать эти технологии; просто скажу, что они позволяют сократить время верстки (хотя, это не единственный плюс).
Читать полностью »

UICloud: Самая большая база пользовательских интерфейсов

UICloud — это база бесплатных пользовательских интерфейсов с поисковой системой, рейтингом и каталогизатором в которой собрано все от исходников в формате PSD, до готовых решений на HTML, CSS или jQuery: формы, слайдеры, кнопки, календари, элементы и полноценные интерфейсы для мобильных и веб приложений. В проекте уже сейчас можно найти практически все что нужно для облегчения процесса разработки дизайнерам и разработчикам.

На данный момент в базе 23586 элементов и почти тысяча UI-сэтовЧитать полностью »

Эта статья, является в первую очередь ответом на недавно вышедшую статью: «Простые правила простой вёрстки».
Автор пригласил написать ответ, высказать свой взгляд на эти примеры и рекомендации, этим приглашением ниже я и намерен воспользоваться. (Читать оригинальную статью перед тем, как зайти под кат — обязательно!)
Читать полностью »

Речь в этой небольшой статье пойдет не о специфических техниках для конкретных случаев, также не будет раскрыта тема правильной оптимизации кода и графики под высоконагруженные проекты. Не знаю, много ли здесь людей, часто имеющих дело с вёрсткой небольших проектов, для которых избыточно применение haml/sass и кучи методик правильной оптимизации, отлично описанных в статьях других профессионалов.

Ко мне уже несколько лет регулярно обращаются заказчики с просьбой завершить вёрстку их проекта, которую по каким либо причинам не закончил другой исполнитель, или поправить баги, несмотря на то, что я не работаю с чужим кодом, или ломлю за это двойную цену. Судя по ленте проектов известных российских фрилансерских сайтов, эта проблема стоит достаточно остро, за доработки никто не хочет браться. Самое удивительное, что большая часть ошибок совершенно типовые и легко исправляемые.

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

Недавно столкнулся с необходимостью сделать небольшой сайт-галерею (захотелось приятно удивить любимую девушку, показав ей сие творение). Поэтому я решил обратиться к Гуглу за помощью. Просидев часик-другой за компьютером я все же наткнулся именно на то, что и требовалось. После некоторых изменений, внесенных мною, получилось совсем недурно. Ниже я опишу процедуру создания подобной галереи. Думаю, что некоторым новичкам в области web-дизайна будет полезно.
Читать полностью »

CSS Summit 2012, моя первая онлайн конференция

В начале августа удалось побывать на четвёртой, ежегодной онлайн конференции CSS Summit. Конференция проходила 3 дня подряд с разбитием докладов по следующим направлениям: CSS3 training, Advanced CSS, Preprocessors. Все доклады на английском языке.

Для нас это был первый опыт присутствия на онлайн конференциях, и даже если вы не особо интересуетесь клиентской разработкой, вам возможно будет интересно почитать о формате проведения подобных конференций.

Записи докладов как со всей конференции, так и за отдельные дни, можно купить на официальном сайте. Промо код, со скидкой 20% — “20SNOOK”.

Под катом пару слов об организации мероприятия, ссылки на презентации и небольшой конспект интересных тезисов и мыслей о веб разработке.
Читать полностью »

На Хабре не раз публиковались статьи о «великом и могучем» CSS, с помощью которого рисовали Сердце ко дню Святого Валентина, новогоднее дерево.
Скоро заканчивается лето, а главным символом лета, на мой взгляд, является солнце.
Сегодня я хотел бы также внести лепту в тему «рисования» на CSS, поэтому предлагаю попытаться нарисовать солнце.
Читать полностью »

ReSharper7Две недели назад мы объявили о выходе ReSharper 7.0, лишь кратко перечислив те новинки, которые были реализованы в этом мажорном релизе.
Сегодня же подписчики MSDN и TechNet получат возможность скачать Visual Studio 2012, и это прекрасный повод, чтобы рассказать про новые возможности ReSharper 7.0 максимально подробно и обстоятельно.
Читать полностью »

Задача: при вводе текста в одном текстовом поле («Title») нужно выводить его транслитерованное значение в другом («UserKey»), при этом в транслите допускаются только латинские буквы, цифры и тире.
Пример HTML с двумя полями: 

<input id="Title" name="Title" value="" type="text" />
<input id="UserKey" name="UserKey" value="" type="text" />

 Для включения транслитерации добавим следующий javascript-код на страницу:

    String.prototype.translit = (function () {
        var L = {
            'А': 'A', 'а': 'a', 'Б': 'B', 'б': 'b', 'В': 'V', 'в': 'v', 'Г': 'G', 'г': 'g',
            'Д': 'D', 'д': 'd', 'Е': 'E', 'е': 'e', 'Ё': 'Yo', 'ё': 'yo', 'Ж': 'Zh', 'ж': 'zh',
            'З': 'Z', 'з': 'z', 'И': 'I', 'и': 'i', 'Й': 'Y', 'й': 'y', 'К': 'K', 'к': 'k',
            'Л': 'L', 'л': 'l', 'М': 'M', 'м': 'm', 'Н': 'N', 'н': 'n', 'О': 'O', 'о': 'o',
            'П': 'P', 'п': 'p', 'Р': 'R', 'р': 'r', 'С': 'S', 'с': 's', 'Т': 'T', 'т': 't',
            'У': 'U', 'у': 'u', 'Ф': 'F', 'ф': 'f', 'Х': 'Kh', 'х': 'kh', 'Ц': 'Ts', 'ц': 'ts',
            'Ч': 'Ch', 'ч': 'ch', 'Ш': 'Sh', 'ш': 'sh', 'Щ': 'Sch', 'щ': 'sch', 'Ъ': '', 'ъ': '',
            'Ы': 'Y', 'ы': 'y', 'Ь': "", 'ь': "", 'Э': 'E', 'э': 'e', 'Ю': 'Yu', 'ю': 'yu',
            'Я': 'Ya', 'я': 'ya', ' ': '-', '_': '-', 
            '"': '', "'": '', '.': '', ',': '', '!': '', ':': '', ';': ''
        },
		r = '',
		k;
        for (k in L) r += k;
        r = new RegExp('[' + r + ']', 'g');
        k = function (a) {
            return a in L ? L[a] : '';
        };

        return function () {
            var text_string = this.replace(r, k).replace(' ', '-').toString();

            var literals = 'QqWwEeRrTtYyUuIiOoPpAaSsDdFfGgHhJjKkLlZzXxCcVvBbNnMm-0123456789';
            var newString = '';
            for (var i = 0; i < text_string.length; i++) {
                if (!(literals.indexOf(text_string.charAt(i)) == -1)) {
                    newString += text_string.charAt(i); 
                };
            };
            return newString;
        };
    })();

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js