HTML и CSS
Что из себя представляет язык разметки html и каскадные таблицы стилей? Все это вы узнаете из этой рубрики.

Как перевести растровую картинку в SVG

Формат SVG все чаще используется во всемирной паутине. Но как создавать свои собственные изображения SVG? Если это какие-то графические примитивы, простые фигуры, то можно еще их создать  написав код. В том же случае, если фигура сложная или нужно перевести растровый рисунок, закодировать это вручную практически невозможно. Иногда нужен качественно созданный … Continue reading

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

Вставка Html5 проигрывателя

С большинством html-элементов не очень сложно разобраться. Однако, если вы вставляете на страницу стороннее содержимое, какой-нибудь медиаконтент, может возникнуть масса вопросов. Мы поговорим о том как добавить на свой сайт готовый плеер на html5, как работать с html-тегом video, а также встраивать ролики с сайтов популярных видеохостингов, таких как Youtube, Rutube, Vimeo.

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

Свойства текста css: 5 интересных свойств, которые могут пригодиться

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

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

Стилизация элемента select на чистом CSS

Как известно всем верстальщикам, элемент селект крайне плохо поддается любой кастомизации и стилизации. Обычно, для изменения его вида, используются различные скрипты на jQuery, такие как jQuery Form Styler, EasyDropDown и т.п. Эта статья посвящена описанию тех небольших но все же существующих возможностей с помощью которых мы изменим внешний вид select, используя только таблицы стилей (чистый css).

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

Иконочные шрифты — плюсы и минусы. Сервисы FontAwesome и IcoMoon

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

Категория : HTML и CSS
Автор : Nikel
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
1 2
Страница 1 из 2