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

Лучшие генераторы CSS для вебмастера

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

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

Создание адаптивного разноцветного меню

Одним из креативных способов отображения навигации на сайте можно считать такое радужное меню. Но здесь интересен не только плоский дизайн без градиентов, который сейчас моден: мы добавим нашему меню адаптивность при помощи медиазапросов CSS3.

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

Создание эффекта отражения с помощью скрипта Reflection.js и CSS3

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

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

Создание анимированных эскизов (превью)

Миниатюра или эскиз - это по сути предварительный просмотр,  того, что вы увидите, если нажмете на ссылку. По сравнению с полноразмерной версией он быстрее загружается, так как имеет меньший размер и вес . Эскизы идеальны для изображений и видео. Используя технику, которая применяется для состояний кнопок, можно получать удивительные анимированные миниатюры с базовым CSS и небольшим jQuery.

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

Как создать простую всплывающую подсказку (tooltip) на CSS3

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

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

Создание стильного меню аккордеона на jQuery

Меню аккордеон уже  давно используется для навигации по сайту. Аккордеон-это вертикально или горизонтально сложенный список элементов. Каждый элемент можно "развернуть”, и увидеть его внутреннее содержимое. Мы уже рассматривали простейшее аккордион меню, работающее без скриптов. А в этом уроке мы будет показано,  как сделать подобное меню со стильным плоским дизайном, работающее на jQuery. .

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

Анимация текста с использованием SVG и CSS3

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

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

Как с помощью css расположить текст по кругу

Когда веб-дизайнеры создают страницы, иногда они хотят установить такой элемент, где  нужно согнуть текст или поместить его внутри круга (например, для логотипа или заголовка сайта). Чаще всего для решения этих задач используют Photoshop и некоторые другие программы для редактирования графики.Но с другой стороны, закругление текста  без использования Фотошопа дает гибкость дизайна и ценность для SEO, поскольку поисковые системы не могут читать тексты на изображениях. Благодаря мощи CSS3 и jQuery  можно расположить текст по кругу не прибегая к созданию картинок.

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

Создание адаптивной галереи изображений с помощью Flexbox

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

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

Как создать индикатор выполнения (progress bar) на CSS3

Сегодня я хочу рассказать вам, как создать progress bar. Что же это такое? Это просто индикатор выполнения, который служит для уведомления пользователя о ходе выполнения конкретной задачи, такой как загрузка, скачивание, загрузка приложения и т. д. Прогресс бары используются в интернете очень давно, вы могли их видеть на разных сайтах.

Категория : HTML и CSS
Автор : Nikel
1 2 3 9
Страница 1 из 9