Pull to refresh
0
0
Denis G. @crwin

User

Send message

jQuery-плагины для удивительной web типографики

Reading time2 min
Views35K
Добрый час, Хабр.
Наткнулся на интересную статью (на английском языке) с подборкой плагинов jQuery для работы с типографикой.
Кому интересно познакомиться с ними, добро пожаловать под кат, перевожу статью для Вас.

Затравка

Типографика является очень важной частью дизайна сайта. Однако ею часто пренебрегают. В этой статье собраны удивительные JQuery-плагины для полного контроля типографики на вашем сайте.
Читать дальше →

Pictonic — необычный иконочный шрифт

Reading time1 min
Views30K

В последнее время появилось множество иконочных шрифтов для нужд веб-дизайнеров, но такой как Pictonic я вижу впервые. Это «логотипный» иконочный шрифт, где собрано более 220 логотипов известных сервисов, браузеров, операционных систем, языков программирования и т.д. Среди символов конечно нет русскоязычных сервисов.
Читать дальше →

Потрясающая, но невидимая глубина

Reading time5 min
Views173K


Вы только что зашли на страницу Google.

Просто, не так ли?

Что же на самом деле произошло?

Ну, если вы немного понимаете, как работают браузеры, то все не так просто. Вы только что задействовали HTTP, HTML, CSS, ECMAscript и прочее. В действительности, это такие невероятно сложные технологии, что от них у любого инженера голова пойдет кругом, стоит лишь попробовать поглубже вникнуть в них. И нет ни одной компании, которая могла бы справиться с ними в одиночку.

Давайте упростим.

Вы только что установили соединение с www.google.com.

Просто, не так ли?

Что же на самом деле произошло?
Читать дальше →

Создаем адаптивную навигацию на сайте

Reading time3 min
Views101K
Одна из самых непростых задач в верстке адаптивного сайта — это навигация. В этой статье подробно описан один из способов реализации адаптивного меню.



Демо Скачать исходники
Читать дальше →

Как из болота вытягивать ITшника или об общении в стрессовых ситуациях

Reading time21 min
Views275K

Неприятности случаются… Неожиданно плохой фидбек, проблемы с заказчиком или коллегами, не повысили зарплату, странные баги, внезапный овертайм или закрытие проекта — подобные события запускают цепочку реактивных реакций:

  • Нет, тут есть ошибка -> сами гады -> а может все не так и плохо -> ппц -> ладно, давай выкручиваться

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

  • Как узнать каждое состояние и предугадать следующее?
  • Как помочь выйти себе и собеседнику из цепочки?
  • Что не делать, чтобы не усугубить ситуацию?
Читать дальше →

CSS слайдер

Reading time7 min
Views154K
С развитием CSS3, возможности верстки растут экспоненциально. Всё больше функционала можно реализовать на «чистом» CSS. В этом посте показан процесс разработки интерактивного циклического слайдера без единой строчки JavaScript. Автоматическая ротация, выбор любого слайда с плавным переходом – на «чистом» CSS. Пример в действии



Под катом пошаговое описание реализации

3D-трансформации средствами CSS

Reading time5 min
Views111K

Увидев на просторах сети пару впечатляющих примеров 3D-трансформаций средствами CSS — заинтересовался, решил разобраться в теме, прочитал несколько статей, вроде бы что-то понял. Но, как известно, теория без практики – как зомби — мертва, хоть и может съесть мозг.

Для усвоения материала необходимо самому сделать что-нибудь любопытное с использованием прочитанного. Какой трехмерный объект сделать легче всего? Пожалуй, кубик. А чтобы результат получился интереснее и красивее, пусть это будет игральный кубик с точками на гранях. Поехали.

Для нетерпеливых и тех, кто смотрит Хабр ради забавных картинок – конечный результат. Работает в Chrome, последних версиях Firefox, Safari. Opera 12.01 — пока никак, ну а про IE вы и сами все знаете.
Читать дальше →

Коллекция паттернов поведения для элементов отзывчивого веб-дизайна

Reading time1 min
Views29K
Думаю любому современному дизайнеру или верстальщику рано или поздно в голову приходила мысль «А почему бы на этом проекте не использовать принципы отзывчивого веб-дизайна?». Пожалуй, сложно найти человека, который не слышал о responsive design в наше время, когда сёрфить веб могут с телефона, микроволновки и тапочек. Приступая к работе над подобным проектом, неплохо было бы иметь под рукой примеры возможного поведения лейаута и его отдельных элементов.
Ну же, где паттерны то?!

Креативное использование веб-шрифтов

Reading time14 min
Views33K

С помощью CSS-магии мы можем создавать красивые типографические эффекты и забыть о использовании изображений, в большинстве случаев. В этой статье мы создадим ряд симпатичных примеров веб-типографики, используя плагин jQuery — lettering.js, а также различные приемы CSS. В некоторых примерах мы также добавим переходы при наведении курсора мыши, чтобы сделать их немного более интерактивным.
Читать дальше →

Таблицы с данными в адаптивном дизайне

Reading time1 min
Views101K
Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:


Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.
Читать дальше →

Оптимизация графики для Retina-экранов

Reading time7 min
Views213K
После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

Для начала разберемся в терминологии.

Физические пиксели


Читать дальше →

Руководство по форматированию CSS

Reading time3 min
Views12K
По мере того как мы подводим итоги недавнего опроса по сортировке CSS свойств у нас появляется более серьезные вопросы о стиле форматирования CSS. Сортировка свойств это всего лишь один шаг на вашем пути к завершенной стратегии форматирования стилей. Название класса — это часть стратегии. Распределение — часть стратегии. Комментарии, отступы, структура файла… все это формирует руководство по форматированию CSS.

Давайте рассмотрим существующие практики форматирования.
Читать дальше →

Сетки без заморочек

Reading time4 min
Views80K
Подавляющее большинство сайтов создано с использованием сеточных макетов. Они могут не использовать их в явном виде, но если на сайте присутствует блок с основным контентом, расположенный справа, и боковой блок (сайдбар), расположенный слева, то это и есть простейшая сетка.

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

В этой статье я расскажу вам, как я верстаю сеточный макет. Это не так уж и сложно. И даже сделать резиновые сетки не составит большого труда.
Читать дальше →

Графический фреймворк. Набор иконок социальных сервисов

Reading time1 min
Views61K


Привет уважаемое хабрасообщество, этот пост служит продолжением еще недавно активно обсуждаемой темы о социальных иконках [1] [2]. Мысль, которая пришла ко мне в голову после прочтения этих статей, привела к появлению нового вектора развития этой темы. Кстати о векторе, например бывает так, что дизайн разрабатываемого сайта или приложения имеет свою специфику и интегрировать стандартные иконки социальных сервисов без адаптации не представляется возможным. В таком случае мы берем в руки гугл и принимаемся за поиск нужных логотипов, для того чтобы создать подходящий набор иконок. Ах да я немного отвлекся, продолжим о векторе, чтобы не проделывать такие скучные действия, я собрал воедино несколько популярных иконок в векторе и теперь каждый желающий может сэкономить немного времени воспользовавшись им.
Читать дальше →

Про jQuery и велосипеды — мое дополнение

Reading time6 min
Views64K
Сразу спешу сообщить вам, что я никоим образом не связан с автором предыдущей статьи. Однако, прочитав ее и увидев такой положительный отклик сообщества на статью, я тоже вдохновился и решил добавить немного своих наблюдений и знаний, к тому же это может послужить моей входной точкой в круги хабрасообщества.

Для затравки начнем с простого.
Читать дальше →

Hover-эффекты для круглых элементов с использованием CSS Transitions

Reading time14 min
Views33K

Сегодня я хочу познакомить вас с замечательными примерами hover-эффектов от Mary Lou. Многим понравились её примеры с hover-эффектами для меню и на этот раз она решила порадовать нас не менее замечательными примерами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!
Читать дальше →

Велосипеды на Javascript и jQuery

Reading time4 min
Views77K
В очередной раз открыв код коллег и ужаснувшись, я решил написать эту статью. Надеюсь для кого-нибудь это будет полезным, заодно и мне будет проще новичкам объяснять что у них в коде не так, просто кинув ссылку на эту статью.
Безусловно количество таких вещей очень и очень велико, поэтому в статье ограничусь лишь некоторыми.
Читать дальше →

Введение в CSS Regions

Reading time3 min
Views18K


С появлением большого количества мобильных устройств сайты становятся все более «адптивными», это требует новых, более удобных способов отображения контента. В скором будущем помочь в этом смогут CSS-регионы (CSS Regions) — новый веб-стандарт Adobe.
Читать дальше →

Пять интересных эффектов при наведении с использованием нескольких фоновых изображений

Reading time6 min
Views23K
Сегодня мы рассмотрим все преимущества использования множественных фонов. Изучим базовые основы и создадим крутые эффекты при наведении с помощью CSS свойств hover и transition.

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

Что должно получиться


Посмотрим на то, что должно получиться в итоге. Подумайте, как можно реализовать эти эффекты чисто на одном CSS.

Демонстрация



Читать дальше →

Хабракамп

Reading time2 min
Views14K
Хабракамп — это пост на Хабре, где в комментариях первого уровня IT-специалисты пишут темы, в которых они хорошо разбираются. Темы должны быть специфичные — nginx на 100 000 юзеров в день и настройка bind неинтересны и описаны везде, а nginx на 100 000 000 пользователей в день или настройка гео-DNS для распределенного сервиса интересно. Пользователи в ответ к комментариям пишут своим вопросы специалистам.
Обсуждение Хабракампа в Q&A: habrahabr.ru/qa/19034/
Просьба на первом уровне не задавать вопросы, а писать только специалистам об их сфере деятельности.
Для специалистов это шанс получить некоторое количество кармы, если им лень писать статьи, а для остальных — возможность задать вопросы, ответы на которые сложно найти в Google.
Не ленимся плюсовать тему, чтобы она вышла в топ.
Не забываем плюсовать карму тем кто ответил на ваши вопросы.

Читать дальше →

Information

Rating
Does not participate
Location
Сомали
Date of birth
Registered
Activity