Идея взята у Dan Eden (demo), я лишь немного доработал способ.
Читать полностью »
Метка «css3» - 10
Анимированная иконка загрузки на CSS3
2012-07-04 в 19:25, admin, рубрики: animation, css, css3, веб-дизайн, метки: animation, css3Особенности обработки HTML-писем
2012-06-24 в 9:08, admin, рубрики: css, css3, gmail, mail.ru, почта, рассылка, метки: css3, mail.ru, почта, рассылкаЗдравствуйте, читатели!
Недавно довелось копаться с рассылкой писем в HTML-формате. Есть много статей, написанных на тему валидной вёрстки рассылок, однако здесь речь пойдёт не об этом. Известно, что у каждого почтовика есть свои особенности отображения HTML-письма. Меня заинтересовали эти особенности и различия в отображении письма на разных почтовиках.
Читать полностью »
Мобильные устройства, position: fixed; и во что это выливается
2012-06-18 в 18:10, admin, рубрики: android, css, css3, media queries, веб-дизайн, Веб-разработка, метки: android, css3, media queries 
По ходу редизайна блога появилось желание создать 'Scroll to Top' функцию не только для десктопа, но и для мобильных устройств. В связи с небольшим свободным пространством на экране смартфона было решено сделать кнопку возвращения на верх в виде полоски высотой в 20px прикрепленную к нижней границе экрана. Читать полностью »
Эффективная веб-разработка c Visual Studio 2012: нововведения в редакторы HTML/CSS и JavaScript
2012-06-11 в 15:12, admin, рубрики: css3, html5, javascript, Visual Studio, visual studio 2012, Блог компании Microsoft, Веб-разработка, метки: css3, html5, javascript, visual studio 2012 
Новая версия Visual Studio 2012 предлагает значительное число нововведений в редакторы HTML/CSS/JavaScript. В этом обзоре я расскажу про основные нововведения, которые позволят веб-разработчикам писать код более быстро, удобнее и эффективнее.
Редактирование HTML5
Visual Studio 2012 полностью поддерживает HTML5 и все новые теги, которые предлагает новый стандарт. Это означает, что разработчики получают автодополнение новых тегов в редакторе (рисунок 1).
Рис.1. Автодополнение HTML5-тегов
Это так же означает встроенную поддержку валидации HTML5-кода в редакторе. Кроме того, для многих тегов механизм автодополнения создает кроссбраузерный код, например, автодополнение <video> на рисунке 1 приведет к автоматической генерации следующего кода (рисунок 2).
Читать полностью »
Кроссбраузерное отражение элементов на CSS3
2012-05-28 в 6:44, admin, рубрики: css3, reflection, Песочница, метки: css3, reflection 
На сегодняшний день уже существуют box-reflect и mask-image, которые позволяют создавать отражение элементов, но данные свойства доступны только в Safari и Chrome, да и работают не так как хотелось бы. Поэтому я хочу рассказать Вам как реализовать кроссбраузерное отражение на CSS.
Читать полностью »
Солнце, лето, море, пляж — распиарю свой вояж
2012-05-25 в 8:19, admin, рубрики: css3, html, html5, jquery, блог, веб-дизайн, Веб-разработка, метки: css3, html5, jquery, блог, Веб-разработка 
В свободное время я пишу ленточный движок для веб-сайтов, используя модные современные технологии. Эта статья — продолжение заметок (Tips & Tricks) про его создание.
Часть 1 находится здесь.
Как же дела у каретки за прошедший с момента публикации месяц? Новости читаю, дела идут, 200 источников, 150 тысяч записей в месяц, данные для анализа собираются. Трафик устойчиво низкий, по 80-100 человек в сутки (дубликат контента).
Мегапопулярные Фейсбук, ВК, Твиттер, Пинтерест — всё это так называемые «ленты». Лента — весьма удобный для человека способ предоставления информации, если её можно как-либо упорядочить. История циклична, всё повторяется — именно таким способом и выводили результаты расчётов первые компьютеры, только на рулоны бумаги, а не на мониторы 1920*1080*32.
Вычитал я в новостях, что туристический сезон начинается. «А ведь я тоже кое-где был — можно и поделиться» — пришла мысль, и сегодня мы будем затачивать ленту под развлекательный мини-бложек. Турлента — с гейшами и путешествиями под катом.
Читать полностью »
Split button dropdown без javascript
2012-05-24 в 11:21, admin, рубрики: css3, custom form elements, html, веб-дизайн, Веб-разработка, метки: css3, custom form elements, htmlВсем доброго времени суток!
Совсем недавно мне нужно было сотворить некий multi-action control для списка записей. На ум сразу же пришло использование split button dropdown, т.е. в данном случае кнопки отправки формы совмещенной с выпадающим списком экшенов. Подобные контролы не редко можно встретить в современных интерфейсах. Также существуют готовые решения входящие в сборки типа Twitter Bootstrap.
Однако реализации подобные бутстраповским не нравятся по нескольким причинам:
- излишняя и не совсем нейтивная разметка
- заточенность под javascript
Именно по этим причинам я решил заделать собственный вариант подобного контрола. Сразу хочу отметить, что все идеи реализовать так и не удалось, поэтому способ не претендует на полную замену js-решениям. Опять же, выкладываю его только для тех, кому будет полезно.Читать полностью »
Адаптивная верстка: CSS&JS фреймворк Skeleton
2012-05-22 в 11:00, admin, рубрики: css, css3, html, javascript, адаптивная вёрстка, адаптивная разметка, адаптивный дизайн, Веб-разработка, метки: css, css3, javascript, адаптивная вёрстка, адаптивная разметка, адаптивный дизайн 
В продолжение недавней статьи про адаптивную верстку, хочется более полно раскрыть тему. В реалиях, чаще всего, для адаптивной верстки используют CSS-фреймворки. Об одном из них я хотел бы рассказать, а если точнее – перевести мануал по ее использованию. Называется он Skeleton.
Читать полностью »
Отправляем теги в путешествие (jquery.waypoints)
2012-05-14 в 9:59, admin, рубрики: css3, game development, Gamedev, html5, javascript, jquery, waypoints, Алгоритмы, метки: css3, Gamedev, html5, javascript, jquery, waypointsJquery.waypoints это плагин для реализации движения объектов по набору точек, так называемым вейпоинтам, с заданной скоростью и другими параметрами, физически имитирующие реалистичность. Частичное описание алгоритма было описано тут.
.jpg "Отправляем теги в путешествие (jquery.waypoints)")
Введение в CSS3 Multicolumn. Работаем с колонками
2012-05-02 в 7:11, admin, рубрики: css, css3, ie10, opera, Блог компании Microsoft, Веб-разработка, метки: css3, ie10, opera 
Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).
Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.
Читать полностью »