В продолжение примеров различных UI-элементов сайтов, которые можно сделать без Javascript, сегодня распишу как можно сделать выезжающее меню на чистом CSS.
И снова ДЕМО, для начала.
Мир графических редакторов на компьютерах пользователей и разработчиков чаще всего ограничивается Adobe Photoshop и его бесплатной альтернативой – Gimp. Недавно на рынке этих программ для Mac OS появился еще один игрок – Affinity Designer.
Пока проект находится в стадии разработки, но его бета-версия уже доступна для скачивания. Программа имеет ряд неоспоримых преимуществ:
К ознакомлению рекомендуется.
Карусели, несмотря на всю свою ущербность, продолжают отсаватся очень востребованным компонентом на тысячах сайтов. Чаще всего для из создания используется Javascript. В этой статье я попробую описать технику создания отзывчивой (резиновой, responsive) карусели на чистом CSS.
Для начала ДЕМО.
Любой веб-сайт с годами становится все больше и больше. Не смотря на рост скорости интернета, сайт все равно грузится все дольше и дольше. Что же делать?
Все известно, что в какой-то определенный момент гигант продаж кривых операционных систем решил сделать общую Windows для компьютеров и мобильных устройств.
Окей, идея не нова, майкрософт богата – должно что-нибудь получиться. Да и разрабатывать должно стать как бы легче. Но...
Вот с майкрософт всегда есть какие-то «но». Вместо того, чтобы взять чужие наработки, общепринятые стандарты и иже с ними, решили изобрести велосипед и добавили префикс MS к Pointer Events. Все смирились и в коде появились вот такие строки:
$('.selector').on('MSPointerDown', function () {
//...
});
$('.selector').on('MSPointerMove', function () {
//...
});
$('.selector').on('MSPointerUp', function () {
//...
});И снова НО. В своем последнем браузере, в одной из последних версий, майкрософт без всяких предупреждений просто взяли и выкинули поддержку своего собственного молодого стандарта. Все то, что написано выше перестало работать.
А все вот почему, в корпорации решили, что префикс MS и camelCase никому не нужны, плюнув на обратную совместимость. Нынче делать надо так.
$('.selector').on('pointerdown', function () {
//...
});
$('.selector').on('pointermove', function () {
//...
});
$('.selector').on('pointerup', function () {
//...
});Теперь самое интересное. Если вы не используете какие-либо библиотеки, то:
document.querySelector('.selector').addEventListener('MSPointerDown', function() {
//...
}, false);работать будет! Вопрос: ПОЧЕМУ и ЗАЧЕМ?
Немного полезного. Определить одно или другое можно вот таким нехитрым образом:
var supports = (function() {
return {
msPointerEvents: window.navigator.msPointerEnabled || false,
pointerEvents: window.navigator.pointerEnabled || false
};
})();Вот тот CSS-файл, который я написал для сайта, сделанного в 2000-м году, поддерживаемого товарищами до 2002 года и работающему (частично до сих пор).
body {
font-size: 15px;
font-family: "Times New Roman", Times, serif;
}
select {
background: #000000;
font-size: 8pt;
color: #FF9900;
cursor: hand;
}
input.but {
background: #000000;
border-bottom: #000000 1px solid;
border-right: #000000 1px solid;
border-top: #777777 1px solid;
border-left: #777777 1px solid;
font-size: 8pt;
color: #FF9900
}
td.menu {
color: #FF9900;
font-size: 12pt;
}
a:link {
color: #FFAA00;
font-size: 11pt;
text-decoration:none;
}
a:visited {
color: #FFAA00;
font-size: 11pt;
text-decoration:none;
}
a:hover{
color: #CCCCCC;
font-size: 11pt;
text-decoration:none;
}
a.menu:link {
color: #FFAA00;
font-size: 12pt;
text-decoration:none;
}
a.menu:visited {
color: #FFAA00;
font-size: 12pt;
text-decoration:none;
}
a.menu:hover{
color: #FF9900;
font-size: 12pt;
text-decoration:underline;
}
a.author:link {
color: #777777;
font-size: 8pt;
text-decoration:none;
}
a.author:visited {
color: #777777;
font-size: 8pt;
text-decoration:none;
}
a.author:hover{
color: #CCCCCC;
font-size: 8pt;
text-decoration:none;
}
a.other:link {
color: #777777;
font-size: 11pt;
text-decoration:none;
}
a.other:visited {
color: #777777;
font-size: 11pt;
text-decoration:none;
}
a.other:hover{
color: #CCCCCC;
font-size: 11pt;
text-decoration:none;
}
h3 {
color: #FF9900;
font-size: 15pt
}Сам сайт вот здесь.
Сейчас повсеместно ставят всякие Retina и другие экраны с большой плотностью пикселей. Обычные картинки смотрятся архаично. Можно конечно ставить изображения увеличенные в два раза, а можно просто ипользовать векторные картинки формата SVG. Но, несмотря на 2014 год, иногда все еще можно встретить компьютеры, в которых утсановленны браузеры, неподдерживающие эту технологию. По этой причине многие ищут способы использования SVG, но чтобы IE тоже мог что-то показать вместо белого квадратика.
На самом деле все легко. Если SVG используется в качестве фонового изображения, то можно делать вот так:
.block-with-svg {
background-image: url(/path/to/image.png);
background-image: url(/path/to/image.svg), none;
}А если вы просто вставили картинку, то:
<img src="/path/to/image.svg" onerror="this.src='/path/to/image.png'" />Работает везде.
Каждый день мы пользуемся мобильными телефонами для доступа в интернет. В связи с этим значительно выросло количество веб-аппов, которые похоожи на нативные приложения.
При разработке таких веб-приложений часто возникает множество вопросов. Один из самых важных – задержка между нажатием на какую-либо ссылку и срабатыванием события click. И чем больше устройств выходит на рынок, тем более острым становится этот вопрос. Если для Android и iOS просто необходимо было обрабатывать события на touchstart, touchmove, touchend, то с выходом новой Windows Mobile появились MSPointer events.
В данный момент существует большое количество решений этой проблемы. Однако Илья pukhalski Пухальский, с моей посильной помощью (очень маленькой), написал библиотечку tap, которая просто добавляет к стандартным событиям в JavaScript новое событие tap.
Теперь, подключив эту библиотеку, можно вешать обработчики на событие tap и все будет работать быстро и красиво.
Вот пример для Vanilla JS:
document.getElementById('any-element').addEventListener('tap', function (e) {
// All the magic happens here
});
А вот для Jquery:
$('#any-element').on('tap', function (e) {
// All the magic happens here
});
Посмотреть и скачать можно здесь: github.com/pukhalski/tap. Там же примеры для Zepto, Dojo, YUI, ExtJS.
1-4 Мая 2014 в Литве состоится седьмой международный MediaBarCamp, посвященный использованию новых возможностей интернет-медиа и развитию медиа-активизма. Дело в том, что 10 мая 2014 года исполняется 20 лет (!) со дня создания белорусского национального домена .BY, поэтому MediaBarCamp 2014 – это главное мероприятие посвященное этой дате. Организатором MediaBarCamp 2014 является Swedish International Liberal Centre (SILC).
Основной целью МediaBarCamp 2014 является обмен опытом в использовании интернета для социально-культурных проектов разных всех разновидностей. Мы приглашаем всех участников (медиа, общественные и политические организации, и т.д.) презентовать свои интернет проекты и найти единомышленников. Кроме этого, вы сможете перенять опыт или поделиться собственным опытом поиска финансирования веб-проектов (самофинансирование, внешнее или коллективное финансирование, и т.д.).
4 тыс.
7.9 тыс.
2.9 тыс.
