Nikel-blog.ru — Страница 2 — Информация для веб-мастеров: секреты верстки, полезные инструменты и online сервисы, установка и настройка сайтов на популярных движках DLE, WordPress.
stickymenu

Меню на jQuery для вашего сайта, прилипающее к верху окна

Здравствуйте, друзья! Сегодня я хочу поговорить о навигации. Не для кого не секрет, что навигация может прокручиваться со страницей или быть жестко закреплена при помощи position:fixed. Но на сайтах, мы порой встречаем и более красивые варианты, когда меню сначала прокручивается как обычно, а потом дойдя до определенной точки фиксируется, как бы "прилипает" к краю окна (отсюда и название - "липкое" меню). Реализуется это поведение при помощи JavaScript, обычно библиотеки jQuery. Предлагаю вашему вниманию несколько вариантов такой навигации, которые могут быть вам полезны. Особенно удобно использовать их в одностраничниках или лендингах (продающих страницах) для упрощения перемещения между отдельными блоками контента (ведь как правило такие страницы очень длинные).

Категория : HTML и CSS
Автор : Nikel

Настройка и применение Isotope — jQuery плагина для управления группой блоков (сортировка, фильтрация и т.п.)

Здравствуйте, уважаемые читатели. Сегодня мне бы хотелось рассказать вам об одном очень полезном плагине jQuery. Его можно с пользой применять на своем сайте. Этот плагин называется Изотоп и служит для фильтрации и сортировки большого количества блоков. Это могут быть, к примеру, какие-нибудь картинки в галерее или товары в магазине, которые нужно отсортировать по определенному признаку или отфильтровать из определенной категории. В статье приведены примеры использования и настройки Isotope.

Категория : HTML и CSS
Автор : Nikel
modernizr

Библиотека JS Modernizr — использование и сфера применения

Что такое Modernizr? Это небольшая библиотека Javascript с открытым исходным кодом, которая обнаруживает насколько реализованы браузере возможности CSS3 и HTML5. В отличие от традиционного, но не лишенного недостатков, способа определения браузера по его свойству navigator.userAgent (так называемому "вынюхиванию" браузера) , создатели Modernizr пошли по другому пути - пути узнавания фактических возможностей, что позволяет надежно установить, что различные браузеры могут и не могут делать. Сфера применения Modernizr по-моему, очевидна, он дает возможность задания альтернативных стилей и скриптов для тех свойств/технологий , которые не поддерживаются.

Категория : HTML и CSS
Автор : Nikel

Filter Grayscale для обесцвечивания картинки средствами CSS (плюс использование jQuery для IE10+ )

Сейчас очень популярны стали различные спецэффекты с картинками на сайтах. Например, довольно красиво смотрится обесцвечивание картинки при наведении на нее мышкой (или наоборот). Оказывается, реализовать на практике этот эффект не так просто, верстальщикам приходится использовать две картинки, сменяющие друг друга, писать дополнительный код и заниматься дополнительной обработкой фото в Фотошопе. Хотя казалось бы ничего особенного здесь нет и такая простая задача, как создание черно-белого изображения не должна отнимать столько времени. Логично было бы эту функцию переложить на CSS. Поэтому с развитием браузеров, совершенствованием стандартов W3C, в моду стал входить новый метод, в основе которого лежит использование фильтров. В нашем примере мы рассмотрим использование фильтра Grayscale.

Категория : HTML и CSS
Автор : Nikel
гибкость

Об адаптивности сайтов

Здравствуйте уважаемые посетители! На наших глазах много лет происходила эволюция Web'а. Сначала были невзрачные для глаза примитивные сайты, сделанные как правило на таблицах. Возможности css и браузеров тогда не впечатляли. Но они были резиновыми, что давало им возможность подстраиваться под разные экраны. Можно сказать это была первая ступень в достижении адаптивности. Следующий этап - вебдванольность, тени, градиенты, закругленные уголки. Фиксированные макеты, в какой то мере были данью моде, в какой-то мере, не обладая адаптивностью решали проблемы резиновых макетов - удобство для пользователей, так как слишком широкий макет содержит слишком длинные строки, которые трудно читать. Нынешний этап - значительно расширевшиеся возможности CSS, а также назревшая необходимость в создании адаптивных сайтов, вызванная появлением огромного числа различных устройств. Сайтов, отображение которых будет наилучшим образом, оптимально для пользователей, подстраиваться под доступную ширину. Причем правильный подход заключается именно в изменении отображения в зависимости от ширины экрана, без привязки к конкретному устройству, потому что таких устройств может быть очень много и это число будет только расти. Такой инструмент, к тому же имеющий неплохую поддержку браузеров, нам предоставил CSS3 - это медиазапросы.

Категория : HTML и CSS
Автор : Nikel
хлебные крошки

Навигация WordPress Хлебные крошки — плагин Prime Strategy Bread Crumb

Здравствуйте, уважаемые читатели моего блога! Поздравляю вас с прошедшими праздниками. О преимуществах Wordpress как движка мы уже говорили, а сегодня мне хотелось бы поговорить немного о Хлебных крошках для этой CMS - элементе навигации, показывающем на какой странице находится пользователь относительно главной и позволяющем ему, например, быстро переместиться на уровень вверх. Хлебные крошки, или по другому breadcrumbs очень распространены в блогах, поскольку дают возможность улучшить удобство пользования сайтом. Это пожалуй основное их назначение, вопрос использования для SEO остается спорным. Говорят, поисковые системы могут их использовать в выдаче, в сниппетах, но как этого добиться не совсем понятно. Для создания breadcrumbs существует популярный плагин Breadcrumbs NavXT, а какие же еще имеются альтернативы? Есть еще простой, но довольно функциональный плагин Prime Strategy Bread Crumb, о котором пойдет речь в данной статье.

Автор : Nikel
emmet

Ускорение верстки с помощью ZenCoding / Emmet

Привет всем! Существуют инструменты, способные значительно ускорить написание кода html и css. Хочу рассказать об одном из них, наиболее эффективном - это Emmet, ранее известный под названием Zen Coding. Про последний, наверное, слышали многие, поскольку он появился довольно давно примерно году в 2008. А если не знаете расскажу. Он представляет собой плагин к популярным редакторам, таким как NetBeans, Dreamviewver, Notepad++, Sublime. Простота и удобство его заключается в том, что его практически не нужно изучать так как синтаксис практически совпадает с синтаксисом CSS. Emmet является усовершенствованным продолжением проекта, в частности в нем реализованы продвинутые возможности по быстрому написанию свойств стилей и большее число полезных команд. Впервые с таким улучшенным Zen Coding я столкнулась работая с онлайн-сервисом, редактором кода Codepen.io. Полный список сервисов и программ, поддерживающих Emmet можно найти на сайте разработчика. А сейчас давайте разберем его принцип действия и основные функции.

Автор : Nikel
пагинация-wp

Постраничная навигация WordPress без использования плагина

Доброго всем дня! Wordpress динамично развивается, думаю никто не будет с этим спорить. Не зря он является одним из самых популярных движков в Рунете. Все время появляются то одни, то другие новые функции, усовершенствования, призванные сделать лучше жизнь простого вебмастера. С другой стороны постоянные новшества вызывают необходимость пересмотреть все те подходы , которые использовались раньше при работе с CMS, устаревают плагины. Вот например существует отличный плагин для постраничной навигации PageNavi, который использовали и используют на сайтах очень многие. Но необходимость в нем уже отпала с появлением 4 версии Wordpress. Сегодня я расскажу вам как можно легко сделать пагинацию используя только стандартные средства.

Автор : Nikel
font

Встраивание нестандартного шрифта с сервисом Fontsquirrel

Здравствуйте! Бывают такие ситуации, когда на сайт требуется внедрить какой-нибудь пользовательский шрифт, а набора так называемых "стандартных" шрифтов недостаточно. Это может быть например, какая-то оригинальная задумка дизайнера или корпоративный сайт, на котором нужно использовать шрифт компании. Раньше эти задачи решались сложно - использование картинок, Cufon и даже применение специальной технологии, работающей на основе Flash - sIFR. К счастью, те времена канули в Лету, и современные верстальщики обладают более совершенным арсеналом средств. Теперь мы можем использовать сторонние шрифты благодаря правилу  @font-face, что открывает действительно богатые возможности. Статья раскрывает особенности применения font-face генератора Fontsquirrel.

Категория : Все для вебмастера
Автор : Nikel
установка яндекс метрика

Как установить Яндекс.Метрику на сайт или ваш личный блог (WordPress, DLE, CMS Made Simple)

Здравствуйте дорогие друзья. Я очень люблю сервисы от Яндекса, потому что как правило они отличаются удобством использования по сравнению с Гуглом. Один из таких сервисов, который я использую является Яндекс Метрика. Этот инструмент, необходимый для любого вебмастера, служит для сбора всевозможной статистики. С его помощью вы получаете такие данные как посещаемость, запросы, поведение пользователей, источники трафика и многие другие полезные сведения. Сегодня я хочу рассказать, как можно установить этот счетчик на свой сайт, в качестве примера рассмотрим три CMS - DLE, Wordpress и Made Simple.

Категория : Все для вебмастера
Автор : Nikel
1 2 3 4 7
Страница 2 из 7