Сегодня мы хотим поговорить с вами на слегка нестандартную для нас тему – о типографике.
Мы стараемся заботиться не только о внешнем виде наших устройств, но и о том, как выглядят интерфейсы нашего ПО. В рамках постоянной работы над этим не так давно появился новый фирменный шрифт – Nokia Pure, который приходит на смену многим знакомому Nokia Sans.

Разработкой шрифта занимается Бруно Мааг и несколько других тайп-дизайнеров его студии Dalton Maag. Вы, вероятно, уже знакомы с работами этой студии. Издательство Dalton Maag в прошлом году выпустило шрифт Ubuntu, который появился в одноимённой ОС версии 10.10.

Под катом вы сможете найти как процесс создания шрифта (вместе с возникшими, но решенными проблемами), так и понять личное отношение именитого дизайнера к современному дизайну шрифтов. Ох, какая же это спорная личность!

Бруно Мааг зол на современную типографику. Он ненавидит Гельветику, сравнивая это семейство шрифтов с дешевым мороженым: «Если вы представите себе мороженое, то Гельветика — это дешевое, противное, сделанное из воды с применением заменителей и растительных жиров мороженое. Состав плохой и оставляет немножко забавное послевкусие». По версии Маага, в Гельветике чувствуется что-то старомодное: шрифт был основан на старом семействе шрифтов Akzidenz Grotesk (1896 год), и все, кто называет Гельветику современной, не могут называться модернистами.

npm — это пакетный менеджер node.js. С его помощью можно управлять модулями и зависимостями.
Небольшая шпаргалка всех моих любимых команд npm:

• Установка npm
• Обновление npm
• Поиск пакетов в npm
• Просмотр информации о пакете
• Локальная установка пакетов
• Установка пакета в наше приложение
• Понимание разницы между глобальной и локальной установкой
• Глобальная установка пакетов
• Удаление локально установленного пакета
• Удаление глобально установленного пакета
• Установка определённой версии пакета
• Установка модуля с Github
• Связи любых пакетов локально
• Связи локальных пакетов для нескольких приложений
• Отмена связи между пакетами приложения
• Отмена связи пакета в системе
• Создание нового пакета
• Добавление нового пользователя
• Публикация пакета в репозиторий npm
• Удаление пакета из репозитория npm
• Управление правами доступа к пакетам в репозитории npm

В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

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

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.

В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.

Что это

OpenMeetings — это многопользовательское браузерное программное обеспечение, которое позволяет вам мгновенно создать конференцию в Интернете.
Вы можете использовать Ваш микрофон или веб-камеру, обмениваться документами на досках объявлений.
Она доступна как сетевой сервис, но можно загрузить и установить пакет с сервера без каких-либо ограничений в использовании или количестве пользователей.

Исходные данные

У нас на предприятии в качестве системы дистанционного обучения (далее СДО) используется Moodle. Она нас полностью устраивает, за исключением отсутствия живого общения преподавателя и обучающегося.
Поэтому было принято решение к действующей СДО добавить приложение видео-конференций. Выбор свой остановил на Openmeetings, поскольку именно эта система интегрируется с Moodle и для этого даже есть специальный модуль.

Устанавливать систему решил на CentOS. Изрядно погуглив в поисках мануала по установке, и методом проб и ошибок понял, что все инструкции, что есть в сети, либо устаревшие, либо неполные.

Все грабли, на которые я наткнулся в процессе под катом

Уверен, что многим из вас, кто читает этот текст, знакомо понятие Текучий интерфейс. И даже если вы про него не слышали, уверен, что вы им пользовались и не раз. Это действительно удобно. Так о чем же идет речь?

<?php 

class Images {
	
	public $width;
	
	public $height;
	
	public function SetWidth($value) {
		$this->width = $with;
		return $this;
	}
	
	public function SetHeight($value) {
		$this->height = $value;
		return $this;
	}
	
}

$images = new Images();
$images->SetWidth(100)->SetHeight(100);

?>

Вот небольшой пример. Мы можем в строчку, последовательно, производить действия. Этот же принцип лежит в основе популярной библиотеки jQuery. Да что тут говорить, все современные фреймворки изобилуют подобными конструкциями. А вот что если использовать подобный механизм для построения всего сайта?

Перед системным администратором порой стоит задача установить или обновить приложения на множестве ПК. И часто проблема состоит не в выборе средства доставки и автоматической установки — их есть множество на любой вкус, от встроенных в Windows OS (Active Directory) до полноценных Configuration Management систем, таких как MS SCCM, Enteo NetInstall, LanDesk Management Suite, HP Application Deployment Manager, IBM Tivoli Provisioning Manager, ManageEngine Desktop Central и много других…

Недавно мне понадобилось создать гаджет для Windows Sidebar. Навыков в этом у меня не было, поэтому, немного погуглив и почитав документацию, приступаем.

Сразу покажу то, что получилось в итоге

Доброго времени суток, Хабр!

Хотел бы рассказать Вам, каким образом я добился плавной смены цветов иконок при наведении на них курсора. Подобная проблема часто встречается на Facebook. Если иконка представляет собой синий силуэт на белом фоне, то при наведении курсора оба цвета меняются местами, причём происходит это мгновенно и выглядит немного резко. Мои эстетические чувства были задеты, и я разработал своё решение.

Не встретив на просторах Интернета чего-либо подобного, я взял на себя ответственность назвать этот метод SITH (Soft Image Transition on :Hover) — плавный переход изображения при наведении.



Под хабракатом Вы найдёте полное описание техники, весь код, несколько скриншотов и ссылку на демонстрационную версию.

Люди в течение многих веков упорядочивали важные знания, которые теперь составляют основу правил дизайна. Это знания об общей природе положительных реакций человека. Дэвид Хьюм назвал такую природу «постоянными и универсальными принципами человеческого естества». Правила универсального дизайна не всегда могут быть мерилом всех вещей, но они могут помочь добиться успеха в различных сферах деятельности, включая коммуникации, производство, услуги, технику, искусство и природоохранное проектирование.

:hover

В очередной раз просматривая плагины для реализации всплывающих подсказок, наткнулся на замечательный пост.
Ничего сверхсложного и сверхсекретного в реализации не было, но она мне понравилась своей простотой и отсутствием javascript'a.
Обмозговав возможное применение, решил что на самой подсказке тоже могут быть подсказки, на подсказках второго уровня, могут быть подсказки 3его уровня и т.д. Можно сделать интерактивную блок-схему!

При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.

Здравствуйте, хабровчане!
Совсем недавно я озадачился попробовать css3-плюшки в действии. Посмотреть на что они годны в реальности. Мой взор пал на знакомые всем галереи fancybox и т.д. Другими словами — решил сделать подобие js-галереи, но только на чистом html+css.

В данной статье я хотел бы показать вам некоторые приёмы создания эффектов при помощи CSS3 на примере меню. Идея заключается в простой композиции элементов: иконки, основного названия и вторичного названия, которое будет анимировано при наведении курсора, используя только CSS-переходы и CSS-анимацию. Мы рассмотрим несколько различных эффектов для элементов.

Всякому такому автору сайта, который когда-либо снабжал своё детище стилями CSS3, уж конечно доводилось сталкиваться с необходимостью многократно повторять одно и то же свойство CSS3 и давать ему одно и то же значение, но указывая перед именем свойства различные префиксы разработчиков браузеров (vendor prefixes).

Эти префиксы необходимы для того, чтобы во браузерах работали те свойства CSS3, которые ещё не до конца стандартизированы: считается, что отдельное задание свойства для каждого из нынешних браузеров поможет в дальнейшем обойти возможное различие между нынешней реализацией свойства в каждом конкретном браузере и окончательными требованиями страндарта. Во браузере Mozilla Firefox для этой цели употребляется префикс «-moz-», в Google Chrome и в Apple Safari (и в других браузерах на основе Webkit) — префикс «-webkit-», в Опере — префикс «-o-», в IE — префикс «-ms-», а в Konqueror (и в наиболее ранних версиях Safari) — префикс «-khtml-».

На практике, однако же, автор сайта чаще всего использует своего рода «общий знаменатель» возможностей нескольких браузеров — значения свойств CSS3, работающие одинаково (или почти одинаково) во всех современных браузерах. Да и записываются все они также одинаково. Указание префиксов сводится поэтому ко многократному повторению свойств. Например, чтобы придать нескольким кнопкам jQuery-плагина ColorBox закруглённые края и заставить их отбрасывать тень, поневоле придётся записать в CSS вот что:

#cboxPrevious, #cboxNext, #cboxClose {
   -webkit-box-shadow: 0 0 6px #000;
      -moz-box-shadow: 0 0 6px #000;
           box-shadow: 0 0 6px #000;
   -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
           border-radius: 6px;
}

Во-первых, это задалбывает.

Во-вторых, это неэкономично.

В-третьих, всегда существует риск забыть о необходимости указать тот или иной префикс. (В списке «How to avoid common CSS3 mistakes» эта ошибка — на первом месте.)

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

И такое средство появилось — благодаря Lea Verou. Вот оно:

В данном обзоре я хочу показать как можно расширить возможности компонента Progressbar плагина jQuery UI. Для начала поставим перед собой задачи, которые мы и будем решать:

• прогресс-бар должен быть динамическим, т.е. «бежать вперед» (заполняться) с течением времени
• возможность задавать параметры «бега» бара
• удобство визуального использования. К примеру отображение текущего процента заполнения прогресс-бара

Остановимся подробнее на параметрах «бега». Бар можно параметризовать различными образами: задавая время запуска, шаг и период; время финиша, шаг и период; время старта, время финиша и шаг. Я остановился на последнем, т.е. для инициализации нашего прогресс-бара достаточно указать время старта, время финиша и шаг.

Сегодня мы будем воссоздавать прогресс-бар из программы установки Adobe Flash Player средствами CSS3, используя градиенты и тени.



Под хабракатом весь код и ссылка на рабочий пример.

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

Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.