Рубрика «веб-дизайн» - 142

в 8:05, , рубрики: Bootstrap, Font Awesome, Typekit, бесплатный шрифт, веб-дизайн, Веб-разработка, векторная графика, растровая графика, типографика, метки: , , , , ,

Всякий такой веборазработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).

У всех этих значков, однако же, есть общий недостаток: они растровые. Соответственно, если в значке есть диагональные или криволинейные элементы, то растянуть такой значок (для крупной кнопки или для сетчаточных дисплеев) не удастся без неприятной потери качества.

Преодолеть этот недостаток намерен проект Font Awesome, нацеленный на разработку бесплатного и свободного (CC BY 3.0) шрифта, содержащего аналогичные значки не в растровой, а в векторной форме. Значки («буквы») этого шрифта легко могут принимать поэтому любой размер и любой цвет. Притом их ужé и не сто двадцать, а сто сорок.

К шрифту прилагаются стилевые файлы, позволяющие начать использование Font Awesome в Twitter Bootstrap без каких-либо особенных усилий.

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

в 12:11, , рубрики: canvas, favicon, javascript, JFavicon, JS, веб-дизайн, динамика, оповещения, сайты, счетчик, метки: , , , , ,

image

Данная библиотека является доработкой tinyicon с использованием всех пожеланий пользователей. Давайте разрабатывать вместе ©

Представляю Вам новую библиотеку JFavicon. Сразу после подключения ее к сайту и инициализации Вы получаете удобный инструмент для динамического изменения favicon. В ее функционал входит:

  • Автоматическая установка favicon
  • Изменение favicon, в зависимости от каких-либо событий
  • Счетчик, с возможностью смены стиля, прямо в favicon
  • Динамическое изменение title страницы

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

в 20:45, , рубрики: css, css3, linear-gradient, веб-дизайн, метки: ,

Хочу поделиться с вами моим способом создания затухающих полосок без использования изображений. Дальше под катом описан метод создания таких элементов с комментариями и примером.

Затухающие полоски на CSS3 без изображений
Читать полностью »

в 9:50, , рубрики: веб-дизайн, веб-интерфейс, метки: ,

Проанализировав несколько существующих интернет-сайтов, таких, например, как: ru.asus.com (ведущий производитель компьютерных комплектующих), bbc.com (сайт ведущего мирового агентства СМИ), msu.ru (сайт московского государственного университета), admhmao.ru (сайт администрации ХМАО – Югры), было установлено, что проектирование пользовательского веб-интерфейса сводится к созданию структуры, состоящей из следующих блоков:
1. Верхняя, титульная часть дизайн-макета веб-страницы («шапка» или header).
2. Нижная, титульная часть дизайн-макета веб-страницы («подвал» или footer).
3. Блок меню, которое может располагаться как горизонтально, так и вертикально. Элементы меню часто выполняются в блочно-текстовом или символьном виде.
4. Блок с основным содержанием страницы («контент»), который также может содержать дополнительный функционал.

Методами при таком проектировании, в основном являются: метод «Золотого сечения», «Кошелек Миллера» и «Принцип группировки».

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

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

в 13:50, , рубрики: css, css sprites, веб-дизайн, метки: ,

Готовим css спрайт в Spritepad

Как мы часто составляем спрайты:

1) Выделяем отдельные элементы из PSD для групировки в спрайт.
2) Для точного нахождения координат элементов спарайта рисуем сетку из линеек для верстальщика.
3) И тупенько через alt+tab переписываем координаты в css.

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

Еще один шаг к упрощению процесса верстки спрайтами нам предоставляют энтузиасты из Германии «We are kiss» (Мы целуемся?) с проектом Spritepad.

Вырезаете всеЧитать полностью »

в 12:07, , рубрики: uikit, web, веб-дизайн, дизайн, интерфейс, интерфейсы, компоненты, формы, я пиарюсь, метки: , , , , , ,

image

Мы сделали всеобъемлющий огромный User Interface пак, содержащий более 300 элементов для дизайна, прототепирования и всего, что придет на ум! Все элементы пака размещены на 5 страницах. В паке есть: Edit Boxes, Check Boxes, Tabs, Buttons, Notification windows, Menus, Готовые решения для панелей, окон, форм, графики, слайдеры, информационные блоки и многое другое. Все элементы выполнены в фотошопе шэйпами. Соответсвенно, каждый элемент можно уменьшать и увеличивать без потери качества. Их можно использовать при создании сайтов, мобильных интерфейсов, программного обеспечения, иллюстраций. Все зависит от твоей фантазии. Ты можешь компоновать и группировать элементы, менять их размеры и расставлять в соответствии со своим вкусом. Это огромное поле для творчества, где каждый дизайнер может использовать готовую форму при создании дизайна, применять к ней новые стили, менять форму. Разумеется, каждый дизайн имеет свое лицо, характеризующее дизайнера. В этот пакет мы вложили больше 50 стилей, которые можно использовать на любом элементе в дизайне. Ты можешь придать свою форму, цвет и стиль любому компоненту и сделать что-то уникальное и красивое.

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

в 19:21, , рубрики: веб-дизайн, кнопки, правила

Здравствуй, дорогой хабрадруг! Сегодня существуют более тысячи способов создать кнопку; чтобы понять их сущность, вам нужно лишь потратить немного времени, просмотрев работы на сайте dribble.com. Большинство из этих примеров очень похожи друг на друга, однако время от времени попадаются и такие кнопки, на создание которых потратили чуть больше внимания, времени и сил.

Веб дизайн / [Перевод] Золотые правила успешной кнопки

Воспользовавшись замечательными параметрами CSS3, мы можем создать элегантые и стильные кнопки без особых усилий (учитывая старые браузеры, конечно). Создаете ли вы кнопку непосредственно в CSSЧитать полностью »

в 13:09, , рубрики: веб-дизайн, метки:

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

1...1020...140141142
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js