Generated by All in One SEO v4.9.3, this is an llms.txt file, used by LLMs to index the site. # XoZblog - Уроки и статьи по созданию сайта, блога Всё необходимое для сайтостроения и не только... ## Sitemaps - [XML Sitemap](https://xozblog.ru/sitemap.xml): Contains all public & indexable URLs for this website. ## Записи - [50 бесплатных векторных социальных медиа иконок](https://xozblog.ru/2012/06/50-icons/) - Этот бесплатный набор включает в себя 50 векторных иконок социальных сетей, которые могут быть использованы на сайте. - [WordPress белый экран в админке](https://xozblog.ru/2019/01/wordpress-white-screen-death/) - Однажды имел проблему, что при сохранение/публикации записи или страницы в админке WordPress получал белый экран смерти. Проблема была в том что... - [WordPress 3.3 на горизонте! Обзор Beta 2 версии](https://xozblog.ru/2011/10/wordpress-3-3-beta-2/) - WordPress 3.3 на горизонте! Обзор Beta 2 версии, описание новых функций и возможностей. Будущее WordPress 3.3 - [5 инструментов для оптимизации CSS](https://xozblog.ru/2019/05/5-tools-optimization-css/) - В этой статье рассмотрим 5 инструментов для оптимизации css кода, что позволит вам увеличить производительность и скорость загрузки страниц. - [10 бесплатных премиум тем для WordPress](https://xozblog.ru/2012/08/10-free-premium-theme/) - Скачать подборку 10 бесплатных премиум тем для WordPress, без регистрации и ввода капчи. - [Слайдер сравнения изображений (до и после)](https://xozblog.ru/2017/11/slider-before-after/) - Замечательный эффект при сравнении двух изображений, когда одно изображение как бы перекрывает другое - это слайдер сравнения изображений до и после. - [LESS CSS: Меню в стиле Apple](https://xozblog.ru/2012/04/less-css-menu/) - Поговорим же мы сегодня о LESS - динамическом языке стилевой разметки, который упростит написание стилей CSS. Разберем на примера создания меню в стиле apple.com - [Как перенести сайт с Wix на WordPress](https://xozblog.ru/2019/02/wix-to-wordpress/) - В сегодняшней статье речь пойдет о том, как перенести сайт с Wix на WordPress. Статье пригодится тем, кто однажды решил завести свой сайт в этом конструкторе - [10 супер полезных PHP фрагментов кода](https://xozblog.ru/2012/01/10-super-useful-php-snippets/) - 10 полезных, нужных фрагментов кода PHP! Отправка смс на PHP, автоматическое создание пароля, определение положения по IP, сжатие данных gzcompress() и др. - [Галерея изображений для сайта с эффектом лупы](https://xozblog.ru/2019/01/javascript-gallery-zoom/) - В этом уроке мы создадим простую библиотеку JavaScript для добавления эффекта лупы при наведении на изображение. Сделаем все с нуля, без использования jQuery. - [Эффект лупы для изображений](https://xozblog.ru/2012/11/image-zoom/) - В данной статье расскажу и покажу, один из способов реализации эффекта увеличительного стекла (лупы) для изображений на сайте. - [Скроллер контента для сайта на jQuery](https://xozblog.ru/2012/03/scroller-jquery/) - Разберем создание очень простого, но в тоже время удобного, а главное нужного скроллера (прокрутчика) текста на сайте на jQuery. - [Как сделать диаграммы и графики WordPress](https://xozblog.ru/2018/12/graphs-сharts-wordpress/) - О том как сделать красивые диаграммы и графики на своем блоге WordPress вы узнаете в этой статье. Рассмотрим несколько плагинов для построения диаграмм и графиков - [Портфолио с использованием jQuery и CSS3](https://xozblog.ru/2013/02/jquery-css3-portfolio/) - В этом уроке я расскажу о том, как можно создать изящное портфолио с использованием JQuery и CSS3 Transform. - [Подборка тем для WordPress (15 бесплатных тем 2011-2012 года)](https://xozblog.ru/2012/01/themes-pack1-wordpress/) - Подборка бесплатных тем 2011-2012 года для WordPress (15 штук). Темы на любой вкус и для любых целей. - [Drag and Drop корзина покупок на jQuery](https://xozblog.ru/2013/01/jquery-drag-n-drop-cart/) - В этом уроке мы создадим простую корзину, в которую одним движением курсора мышки можно перенести товар. Использовать будем библиотеку jQuery UI. - [5 новых возможностей HTML5 и CSS3, которые можно начать использовать в 2018](https://xozblog.ru/2018/02/html5-css3-2018/) - HTML и CSS непрерывно развиваются, предлагая разработчикам и веб-дизайнерам множество новых возможностей. Давайте посмотрим на 5 действительно интересных новых возможностей HTML и CSS для создания веб-сайтов в 2018 году. - [Легковесный lightbox плагин - Luminous](https://xozblog.ru/2016/02/luminous/) - Давайте знакомиться с простым, легковесным плагином lightbox изображений от imgix - Luminous. Данный плагин отлично подойдет для блога на WordPress. - [Используем HTML5 History API](https://xozblog.ru/2014/10/html5-history-api/) - Эта статья будет посвящена работе с HTML5 History API. Рассмотрим новые возможности HTML5 по управлению историей браузера. - [Анимация при прокрутке страницы (используем jQuery и CSS3)](https://xozblog.ru/2014/05/animated-header-scroll/) - В этой не большой статье разберем способ, с помощью которого можно оживить статичные HTML элементы на странице. - [Копирование текста в буфер обмена средствами jQuery](https://xozblog.ru/2014/03/jquery-copy-clipboard/) - ZeroClipboard - этот плагин предоставляет способ скопировать текст в буфер обмена с помощью Adobe Flash и интерфейса Javascript. - [Используем HTML5 Notifications API](https://xozblog.ru/2014/01/html5-notifications-api/) - С помощью HTML5 Notifications API мы можем формировать и показывать уведомления пользователя средствами его браузера. - [Создание анимированных диаграмм - плагин Chart.js](https://xozblog.ru/2013/11/animated-charts-js/) - В этой статье рассмотрим пример построения диаграмм с помощью отличного javascript плагина - Chart.js. - [Отображение списка пользователей блога WordPress на странице с навигацией](https://xozblog.ru/2013/11/display-wp-users/) - В этом уроке Вы узнаете как можно создать страницу для отображения списка пользователей блога WordPress. - [Загрузка файлов с помощью PHP](https://xozblog.ru/2013/10/file-uploads-with-php/) - В этой статье описан пример создания скрипта загрузки файлов на сервер с помощью PHP. - [Кнопки социальных сетей для сайта](https://xozblog.ru/2013/09/social-buttons/) - В этой статье расскажу о замечательном плагине социальных кнопок - Social Likes. - [Как создать простой Parallax эффект](https://xozblog.ru/2013/07/parallax-effect/) - В этой статье я покажу основной принцип создания параллакс эффекта прокрутки страницы. - [Полезные фрагменты кода jQuery](https://xozblog.ru/2013/07/jquery-snippets/) - В этой статье я приведу несколько фрагментов кода jQuery, которые могут Вам пригодиться при создании сайта. - [Добавляем комментарии Google+ на сайт](https://xozblog.ru/2013/05/google-comments/) - В этой статье мы рассмотрим несколько способов подключения системы комментирования от Google+ к любому сайту, а также блогу WordPress. - [Создание шорткодов (shortcodes) WordPress](https://xozblog.ru/2013/04/wordpress-shortcodes/) - В этом уроке Вы узнаете как создавать и использовать короткие коды (Shortcodes WordPress). - [10 полезных тегов и атрибутов HTML5, которые Вы должны знать!](https://xozblog.ru/2013/03/html5-tags-attributes/) - В этой статье, я кратко расскажу о нескольких полезных и важных HTML5 тегах и атрибутах, которые вы должны знать и использовать на практике! - [Свежие хаки и фильтры WordPress для работы с комментариями](https://xozblog.ru/2013/02/hooks-and-filters-wp-comments/) - В этой статье рассмотрим 8 свежих хаков и фильтров для работы с комментариями на блоге WordPress - [Создание виджета для WordPress](https://xozblog.ru/2013/02/wordpress-widgets/) - Этот урок будет посвящен созданию собственного виджета для WordPress. - [Бесконечная прокрутка страницы с записями, средствами jQuery](https://xozblog.ru/2013/01/infinite-scroll/) - Однако, в последнее время все больше сайтов начинают "применять на практике" такой вид навигации по страницам как, Infinite Scroll (бесконечная прокрутка). - [Варианты использования .htaccess файла](https://xozblog.ru/2013/01/htaccess-file/) - Обычно с его помощью управляют доступом к каталогам сайта, а также формируют человеко-понятные URL. Но это далеко не все, что Вы можете сделать с .htaccess - [Адаптивные таблицы HTML с помощью плагина FooTable](https://xozblog.ru/2012/12/responsive-table/) - FooTable - это JQuery плагин, который стремится сделать HTML таблицы удобными для пользователей с мобильными устройствами, независимо от того, сколько столбцов в таблице. - [Релиз WordPress 3.5](https://xozblog.ru/2012/12/wordpress-3-5/) - Краткий обзор нововведений в WordPress 3.5 - [Адаптивный слайдер изображений для WordPress](https://xozblog.ru/2012/12/wordpress-slider/) - Сегодня я покажу, как можно интегрировать слайдер JQuery на WordPress блоге. Подробно рассмотрим каждый шаг создания слайдера. - [Выбор даты (jQuery DatePicker плагин - Pickadate)](https://xozblog.ru/2012/12/pickadate/) - Плагин Pickadate организует на сайте календарь для выбора даты. Плюс это плагина в его размере всего 9кб и возможности настраивать календарик. - [Модальные окна в WordPress, плагин Easy Modal Lite](https://xozblog.ru/2011/11/modal-windows-in-wordpress-easymodallite/) - Модальные окна в WordPress, установка и настройка плагина Easy Modal Lite. - [Доработка панели авторизации в WordPress](https://xozblog.ru/2011/10/izmenenie-paneli-avtorizacii/) - Как узнать информацию об активном пользователе в WordPress, использование аватар. - [Все о пользовательских типах записей WordPress](https://xozblog.ru/2012/11/custom-post-types/) - В этом уроке подробно рассмотрим пользовательские типы записей их создание и использование. - [15 инструментов для веб-разработчиков](https://xozblog.ru/2012/11/15-web-tools/) - Рассмотренные инструменты позволяют раскрыть все возможности, повысить качество и упростить процесс разработки на HTML5 и CSS3. - [15 эффектов для изображений (используем только CSS3)](https://xozblog.ru/2012/11/15-effects-css3/) - В этой статье подготовлены 15 интересных эффектов для изображений (в том числе фильтры), которые Вы можете применить на своем сайте. - [Модальное окно на jQuery с формой отправки письма](https://xozblog.ru/2012/11/modal-windows/) - В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. - [Создание списка дел (To-Do лист) средствами jQuery и Web SQL Database](https://xozblog.ru/2012/10/to-do-list/) - В этом уроке создадим список дел/заданий, как его еще называют To-Do лист, с помощью локальной базы данных Web SQL Database и jQuery. - [Загрузка изображения на сервер с предварительным просмотром при помощи HTML5 Drag and Drop](https://xozblog.ru/2012/10/html5-uploader/) - В этом уроке создадим загрузчик изображений на сервер с предварительным просмотром. - [Взгляд на CSS3 градиент (линейный и радиальный градиенты)](https://xozblog.ru/2012/10/css3-gradient/) - Градиент является прекрасным инструментом манипуляции с цветом в CSS3, а также сокращает время загрузки страницы. - [Изменяем полосы прокрутки браузеров WebKit](https://xozblog.ru/2012/10/webkit-scrollbars/) - В этой статье разберем способ замены стандартных полос прокрутки на собственные. - [Самый простой способ сделать Lightbox эффект](https://xozblog.ru/2012/09/lightbox/) - Используя CSS3 можно максимально упростить создание Lightbox эффекта. В данной статье, эффект реализован благодаря псевдоклассу :target. - [jQuery всплывающие подсказки, с помощью плагина TipTip](https://xozblog.ru/2012/09/jquery-tool-tip/) - Плагин, который мы рассмотрим называется TipTip. C его помощью можно взять под контроль всплывающие подсказки на сайте и настроить их на свой вкус. - [Особенности адаптивной верстки](https://xozblog.ru/2012/09/responsive-media/) - В этой статье разберемся, как же поступить с медиа элементами при адаптивной верстке. - [Вся правда о псевдоэлементах :before и :after](https://xozblog.ru/2012/09/before-after-css/) - Рассмотрим сегодня псевдоэлементы, а именно разберемся с :before и :after. Что такое псевдоэлемент и как он отличается от псевдокласса? Как :before и :after реализованы в CSS? - [Создаем адаптивное меню для сайта](https://xozblog.ru/2012/09/responsive-menu/) - Так вот, в этом уроке создадим простенькое адаптивное меню для сайта. Использовать будем CSS3 медиа запросы и немного jQuery. - [Галерея изображений на jQuery](https://xozblog.ru/2012/07/gallery-jquery/) - В этом уроке я покажу Вам, как создать минималистичную, но в тоже время удобную и функциональную фото галерею на jQuery. - [CSS слайдер изображений с эскизами](https://xozblog.ru/2012/06/css3-slider/) - Сегодня разберем на практическом примере использование CSS3 transitions, которое позволяет изменить свойство CSS плавно и в течение некоторого времени. - [Google Play вкладки на jQuery и CSS3](https://xozblog.ru/2012/05/tabs-jquery-css3/) - В этом уроке Вы узнаете, как можно создать вкладки для сайта с дизайном как в магазине Google Play. - [HTML5 и CSS3 генераторы](https://xozblog.ru/2012/05/html5-css3-generators/) - В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5. - [Свежие хаки и фильтры для WordPress](https://xozblog.ru/2012/04/hooks-and-filters-wordpress/) - В этой статье рассмотрим 8 свежих хаков и фильтров для WordPress (отключение трэкбэков, отключение обновления WordPress, отключение автосохранения и тд.). - [Установка плагина WP-FAQ на WordPress (видеоурок)](https://xozblog.ru/2012/03/wp-faq-wordpress/) - В этом небольшом видеоуроке, я расскажу Вам об установке и настройке плагина WP-FAQ, с помощью которого можно сделать на WordPress раздел FAQ (раздел с ответами на часто задаваемые вопросы) - [Фотогалерея для сайта с использованием HTML5 Canvas](https://xozblog.ru/2012/02/galereya-html5-canvas/) - В этом уроке мы создадим фотогалерею для сайта с использованием HTML5 Canvas и CSS3. - [8 онлайн-инструментов для проверки и тестирования сайта](https://xozblog.ru/2012/02/8-online-instrumentov-dlya-proverki-saita/) - В этой статье рассмотрим 8 инструментов для проверки и тестирования сайта. Проверку HTML кода и стили CSS, а также скорость загрузки сайта. - [Тема для WordPress - Danko](https://xozblog.ru/2012/02/theme-wordpress-danko/) - Скачать бесплатно тему для WordPress Danko со слайдерем, виджетами, контактной формой, генератором коротких кодов и тд. - [6 новых методов, которые должен знать каждый веб-разработчик.](https://xozblog.ru/2011/10/6-new-web-techniques/) - 6 новых методов, которые должен знать каждый веб-разработчик - [Плагин для WordPress социальные кнопки](https://xozblog.ru/2012/02/social-slide-out-buttons-to-wordpress/) - Устанавливаем плагин социальных кнопок KN Social Slide на блог WordPress. Кнопки от Facebook, Twitter, Google+, FeedBurner subscriber и др. - [Условные теги WordPress для начинающих](https://xozblog.ru/2012/03/uslovnie-tegi-wordpress/) - Условные теги - одна из особенностей WordPress. Благодаря условным тегам, можно действовать по разному в определенных ситуациях. В этой статье мы рассмотрим условные теги WordPress, как они работают, и когда можно их использовать. - [60 лицензионных иконок для сайта](https://xozblog.ru/2012/04/60-web-icons/) - Вот отличный набор из 60 иконок, набор представлен в светлых и темных тонах, в 4 разрешениях (16px, 24px, 48px и 64px) иконки в формате PNG. Также в архив вложен исходный векторный файл для Adobe Illustrator. - [Полезные вставки (фрагменты) кода для WordPress](https://xozblog.ru/2012/03/wordpress-code-snippets/) - В этой статье рассмотрим полезные вставки кода WordPress, такие как постраничная навигация, количество комментариев, облако тегов, хлебные крошки и многое другое! - [Очистка очереди анимации JQuery (плагин hoverFlow)](https://xozblog.ru/2012/01/hoverflow-plugin/) - Применяем плагин hoverFlow для того чтобы очистить очередь анимации JQuery и избавиться от повторяющихся эффектов анимации. - [50 иконок для web-интерфейса](https://xozblog.ru/2011/12/50-web-ui-crisp-icons/) - 50 иконок для web-интерфейса, в черно-белом исполнении, формат PNG разрешение 16х16 и 32х32 - [10 свежих JQuery плагинов (декабрь 2011)](https://xozblog.ru/2011/12/10-fresh-jquery-plugins-december-2011/) - 10 свежих JQuery плагинов, вышедших за последний месяц. Среди них слайдер, всплывающие окна, диалоговые окна и многое другое. - [Релиз WordPress 3.3](https://xozblog.ru/2011/12/release-wordpress-3-3/) - Вышла новая версия одной из самых популярных CMS, WordPress 3.3, краткий обзор. - [Шрифты для сайта с помощью CSS @font-face](https://xozblog.ru/2012/09/font-face/) - Сегодня речь пойдет о свойстве CSS - @font-face. С помощью которого стандартные шрифты, можно заменить на более совершенные, пользовательские. - [Создание анимационного листинга элементов на CSS3](https://xozblog.ru/2012/06/css3-listing/) - как с помощью только CSS3, можно сделать анимационный листинг элементов (элементов списка ul) с возможностью выбрать в каком виде будет находиться список - [Эффект с помощью CSS3 Transform 3D](https://xozblog.ru/2012/06/transform/) - В этом уроке я собираюсь рассказать Вам, как можно сделать куб с информацией на гранях. Будет применен эффект, который основан на CSS3 3D Transform. - [Таймер обратного отсчета для сайта](https://xozblog.ru/2012/05/countdown-template/) - Предоставляю Вашему вниманию таймер обратного отсчета для сайта! - [Форма e-mail подписки с валидатором на jQuery](https://xozblog.ru/2012/05/jquery-email-form/) - В этом уроке я покажу, как мы можем сделать форму e-mail подписки HTML5 с валидатором на JQuery. Таким образом при сохранении будет использован AJAX (т.е. вызовем PHP сценарий без перезагрузки страницы). - [Определяем местоположение с помощью HTML5 Geolocation](https://xozblog.ru/2013/02/html5-geolocation/) - В этом уроке Вы узнаете, как можно определить географическое местоположение (координаты) посетителя сайта с помощью Geolocation API. - [Adi.js - jQuery плагин для обнаружения Adblock](https://xozblog.ru/2015/11/adi-plugin-adblock/) - Adi.js - плагин на jQuery для обнаружения браузерного расширения Adblock. В этой статье рассмотрим его установку и использование. - [Подборка тем для WordPress (10 бесплатных тем, апрель 2012 года)](https://xozblog.ru/2012/04/10-theme-wordpress/) - Подборка бесплатных тем для WordPress, апрель 2012 года (10 штук). Темы на любой вкус и для любых целей. - [Создаем аккордеон для сайта](https://xozblog.ru/2012/06/accordions/) - В этой статье разберем 3 способа создания аккордеона для сайта: с помощью jQuery, CSS3 и HTML5. - [8 простых эффектов с использованием свойства CSS3 Transition](https://xozblog.ru/2015/01/8-simple-css3-transitions/) - В этой статье рассмотрим 8 простых эффектов с использованием свойства CSS3 Transition, для создания анимации на сайте. - [Текстовый редактор для сайта - wysihtml5](https://xozblog.ru/2012/05/text-editor-html5/) - В этой статье расскажу Вам о wysihtml5 - текстовом редакторе для сайта с открытым исходным кодом. wysihtml5 создает правильную и чистую разметку HTML5. - [Предзагрузка страниц на jQuery](https://xozblog.ru/2012/04/preloader-page/) - Он производит предварительное загрузку изображений, фоновых изображений, а уже после показывает готовую страницу. Проверял во всех браузерах (последних версий) и даже в Internet Explorer 7, 8, 9 - работает. - [10 советов по CSS для WEB-разработчика](https://xozblog.ru/2012/08/10-css-sovetov/) - В этой статье дам 10 советов, которые могут помочь Вам при разработке стилей CSS - [Генератор кнопок на CSS3 для WordPress (плагин)](https://xozblog.ru/2012/07/wp-button/) - Сегодня я познакомлю Вас с плагином для WordPress - MaxButtons. Это плагин, который позволяет создавать пользовательские кнопки на CSS3. - [6 полезных PHP фрагментов кода](https://xozblog.ru/2012/02/6-poleznih-php-fragmentov-coda/) - 6 полезных фрагментов (вставок) кода PHP: извлечение email из текста, определение числа читателей в twitter, создание временного URL, преобразование в RGB, удаление ссылок из теста и др. - [С Праздником Великой Победы!](https://xozblog.ru/2012/05/9-may/) - В этот знаменательный для нашей страны день, да и вообще для всего земного шара, Поздравляю Вас с 9 мая - С Праздником Великой Победы! - [Валидатор HTML форм (плагин jQuery - Validatr)](https://xozblog.ru/2014/06/jquery-form-validate/) - В этой статье рассмотрим jQuery плагин для валидации HTML форм - Validatr. Плагин использует возможности HTML5. - [Добавляем дополнительные поля в профиль пользователя WordPress](https://xozblog.ru/2014/05/add-custom-fields-profile-wordpress/) - В этом уроке научимся добавлять собственные поля в профиль пользователя WordPress. - [Тема для WordPress - Launch](https://xozblog.ru/2012/05/launch/) - Launch - это свеженькая бесплатная премиум тема для WordPress. Тема отлично подходит для личного блога. Можно выбирать тип записи буть то: видео, аудио, изображения, ссылки, цитаты и конечно стандартные сообщения. - [Тема для WordPress - Tint](https://xozblog.ru/2012/05/tint/) - Скачать бесплатно тему для WordPress Tint со слайдерем, виджетами, контактной формой, генератором коротких кодов, встроенным google maps и тд. - [Иконки сервисов и приложений Google](https://xozblog.ru/2012/02/nabor-ikonok-servisov-i-prilozhenii-google/) - Скачать подборку иконок Google+ в формате PNG c файлом исходником. А также огромное количество различных иконок сервисов и продуктов от google в разных разрешениях и форматах. - [Самые популярные цвета в изображении (php класс)](https://xozblog.ru/2012/01/samie-populyarnie-cveta-v-izobrazhenii/) - С помощью этого PHP класса можно определить самые популярные цвета в изображении. Изображение в формате JPG, GIF или PNG. Скачать PHP класс! - [Векторные иконки для сайта (91 иконка)](https://xozblog.ru/2012/01/vector-web-icons-91/) - Скачать векторные иконки для сайта (91 иконка) в формате PNG. Исходный файлы PSD и PNG (Adobe Fireworks). - [Простые стили для горизонтальных линий, тег
](https://xozblog.ru/2011/11/simple-style-for-hr/) - Несколько простых стилей css, для горизонтальных линий. Тег - [Набор кнопок/иконок Twitter](https://xozblog.ru/2011/11/twitter-follow-buttons-icons/) - Скачать набор кнопок, иконок Twitter с файлом psd - [Набор иконок социальных сетей](https://xozblog.ru/2011/11/set-socialis-icons/) - Набор иконок социальных сетей, в формате png и psd. - [Тема для WordPress - Swatch](https://xozblog.ru/2011/11/theme-wordpress-swatch/) - Бесплатная тема для WordPress Swatch со слайдерем, виджетами, цветовыми схемами. - [Вертикальное металлическое меню на CSS3](https://xozblog.ru/2011/10/css3-onclick-vertical-metal-menu/) - Статья по созданию вертикального меню на CSS3 - [Работа с Web хранилищами, на примере корзины для покупок](https://xozblog.ru/2013/12/web-storage/) - В этом уроке продолжу тему хранения данных в браузере пользователя и разберу на примере, корзины для покупок, способ работы с web хранилищами. - [Кнопки социальных сетей на CSS3](https://xozblog.ru/2012/05/css3-button/) - Представляю Вашему вниманию набор социальных медиа кнопок созданный полностью на CSS3. - [Стилизация элементов checkbox и radio button на CSS3](https://xozblog.ru/2012/10/checkbox-radio-css3/) - В этой статье покажу как можно легко и просто заменить стандартные элементы checkbox (флажки) и radio button (переключатели) на свои. Использовать будем средства только CSS3! - [Слайдер изображений на JQuery](https://xozblog.ru/2011/12/simple-image-slider/) - Создаем слайдер изображений на JQuery, используем плагин jQuery Cycle Plugin, а также CSS спрайты! Посмотреть Демо, скачать Исходники! - [Автоматическая группировка элементов (jQuery плагин Stapel)](https://xozblog.ru/2012/11/jquery-stapel/) - Stapel - плагин позволяющий автоматически группировать элементы по общему атрибуту с использованием эффектов. - [Автозаполнение полей формы (плагин jQuery-Autocomplete)](https://xozblog.ru/2013/01/jquery-autocomplete/) - Рассмотрим плагин jQuery-Autocomplete, с помощью которого легко создать автозаполнение текстовых полей формы. - [Эффект на Google Chrome Extension с помощью CSS3, jQuery и MooTools](https://xozblog.ru/2012/03/google-chrome-extension/) - Там применяется эффект - при наведении курсора мыши на миниатюру расширения, снизу "выезжает" панель с описанием. Реализуем этот эффект тремя способам. - [Галерея изображений в стиле Google Images](https://xozblog.ru/2013/08/google-gallery/) - Галерея SuperBox достаточно "легковесная", да к тому же адаптирована под мобильные устройства. Работает исключительно на CSS3 и jQuery, как говорится ничего лишнего. - [Релиз WordPress 3.4](https://xozblog.ru/2012/06/wordpress-3-4/) - Этот релиз включает в себя значительные улучшения позволяющие производить настройку темы оформления, создавать твиты в записях и добавлять HTML теги в подписи к картинкам... ## Страницы - [Видеокурсы](https://xozblog.ru/courses/) - Вы можете скачать бесплатные видеокурсы по веб-программированию и созданию сайтов, а также приобрести платные. - [Обратная связь](https://xozblog.ru/callback/) - Если у Вас есть предложение, пожелание или просьба, смело отправляйте письмо на почту. Не забудьте указать имя и обратный адрес. Постараюсь ответить Вам при первой же возможности. xozblog@gmail.com - [Результат поиска](https://xozblog.ru/search_gcse/) - [wp_google_search] - [Правила перепечатки](https://xozblog.ru/sitemap/rewrite/) - На этой странице Вы можете узнать, на каких условиях можно использовать материалы сайта https://xozblog.ru - [Карта блога](https://xozblog.ru/sitemap/) ## Сниппеты - [Адаптивная сетка на CSS](https://xozblog.ru/snippets/simple-css-grid/) - Благодаря свойству CSS можно легко создавать сетки. Используя единицу длины , сетки можно сделать адаптивными для любого дисплея. Давайте рассмотрим наиболее простой пример: Содержимое первого блока Содержимое второго блока Содержимое третьего блока Содержимое четвертого блока Вот как выглядит наша сетка HTML: [cc lang="html"] Содержимое первого блока Содержимое второго блока Содержимое третьего блока Содержимое четвертого блока - [Индикатор загрузки на чистом CSS](https://xozblog.ru/snippets/css-loading-indikator/) - Сейчас рассмотрим достаточно элегантный пример организовать индикатор загрузки чего-либо, ожидания и тд. При упоминании подобных индикатор возникает законное желание использовать зацикленную картинку - гифку. Но все же это не особо хорошо сказывается на скорости загрузки страниц, для браузера лучше будет если данный индикатор выполнен на чистом CSS. Разметка очень простая: [cc lang="html"] [/cc] Используемые стили: - [Классическое горизонтальное адаптивное меню на CSS и JS](https://xozblog.ru/snippets/responsive-touch-friendly-css-menu/) - Все хорошие сайты должны быть по умолчанию дружелюбны к мобильным устройствам. А именно адаптивны под размер экрана и должны адекватно реагировать на касания сенсора. Данный сниппет представляет собой прекрасный пример вышеперечисленных характеристик в совокупности с иерархической структурой построения ссылок выпадающих пунктов меню. Для того чтобы увидеть все возможности сниппета, рекомендую менять размер демки. See the - [Hover эффекты для изображений (с помощью свойств CSS Transform и CSS Transition)](https://xozblog.ru/snippets/image-hover-effects/) - Если вам понравились данные эффекты, то вы можете также почитать про используемые CSS свойства: CSS Transform и CSS Transition на страницах моего блога. - [Эффект скользящего подчеркивания пунктов меню на CSS3](https://xozblog.ru/snippets/css3-underline-slide-effect/) - Разработчик Ryan Morse создал этот очень простой эффект скользящего нижнего подчеркивания пунктов меню (ссылок), работающий исключительно на CSS3. Это довольно элегантное решение, учитывая что оно даже не требует дополнительных элементов HTML. Эффект достигается благодаря свойству CSS3 Transition. See the Pen Simple CSS Sliding Underline Menu by Dmitry (@xozblog) on CodePen. - [Эффект подчеркивания с помощью CSS3](https://xozblog.ru/snippets/underline-css3/) - При наведении курсора, текст будет плавно подчеркнут слева направо. Имитация линии подчеркивания осуществляется с помощью псевдоэлемента ::after - [Простой способ вертикального и горизонтального центрирования элементов](https://xozblog.ru/snippets/css-flex-align/) - Используем Flexbox для вертикального и горизонтального выравнивания (центрирования) элементов. - [CSS перенос длинных слов](https://xozblog.ru/snippets/wrapping-long-word/) - Многие из веб-разработчиков сталкивались с такой ситуацией, когда очень длинное слово не помещается в контейнер определенного размера. Что делать в таком случае? Следующие несколько свойств CSS будут отличным сниппетом для решения этой проблемы. По умолчанию, длинное слово будет расширяться по горизонтали, независимо от заданной ширины контейнера, например: С помощью всего лишь пары свойств CSS вы - [Создание анимационной кнопки, используя CSS градиент](https://xozblog.ru/snippets/animated-css3-gradient-button/) - Одной из наиболее заманчивых особенностей в CSS3 является возможность добавления эффекта анимации. Вы можете оживить цвет фона, прозрачность, размер элемента, но не цвет градиента. Пока мы не можем анимировать цвет градиента в привычном понимании, однако есть одна хитрость, с помощью которой мы можем создать эффект перехода одного цвета в другой. Есть способ заставить двигать позицию - [CSS тень с одной стороны элемента (с использованием псевдоэлементов CSS)](https://xozblog.ru/snippets/box-shadow-only-one-side/) - Если вы хотите, чтобы тень от блока div была только с одной стороны, попробуйте этот трюк. Сначала необходимо определить блоку определенную ширину и высоту. Затем, используя псевдоэлемент CSS создать эффект тени от элемента. Вот пример использования тени только снизу блока: .box-shadow { background-color: #FF8020; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: - [Сжимаем сайт методом deflate, htaccess сниппет](https://xozblog.ru/snippets/deflate-htaccess/) - Для повышения скорости работы сайта, часто приходится использовать сжатие передаваемых данных. На серверах Apache за это отвечает модуль mod_deflate. - [Замена не найденных изображений](https://xozblog.ru/snippets/fix-broken-images/) - Зачастую на сайтах появляются проблемы с не найденными изображениями, чаще всего когда мы вставляем картинки по ссылкам с других сайтов. Бороться с такими изображениями по одиночке достаточно проблематично, но необходимо, а до тех пор пока такие картинки не будут "пофиксины" можно поставить вместо стандартных заглушек свои. Для этого можно использовать следующий сниппет: $('img').error(function(){ $(this).attr('src', 'broken.png'); - [Удаление пунктов меню в административной панели WordPress](https://xozblog.ru/snippets/remove-wordpress-admin-menu-items/) - Я покажу Вам способ с помощью которого можно быстро и безопасно скрыть неугодные пункты меню. - [Растянуть элемент на всю высоту окна (CSS прием)](https://xozblog.ru/snippets/full-height-window-css-snippet/) - Для того, чтобы растянуть элемент на всю высоту окна браузера необходимо выполнить условие - самый верхний элемент структуры страницы: HTML и body, должны иметь 100% высоту. html, body { height: 100%; } Затем можно применить высоту 100% к любому элементу, например, так: div { height: 100%; } - [Способ вертикального выравнивания CSS](https://xozblog.ru/snippets/vertical-align-css-snippet/) - Кто работает с CSS сталкивался с тем, как сложно выполнить вертикальное выравнивание блоков и элементов с текстом. Использовались разные уловки, однако теперь благодаря CSS3 Transform, мы можем решить эту проблему более элегантно: .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } Браузеры, которые поддерживают CSS3 Transform: Chrome 4, Opera 10, Safari 3, - [Убираем пунктирную рамку у ссылки](https://xozblog.ru/snippets/dotted-outline/) - CSS сниппет позволяющий легко убрать пунктирную рамку у ссылки. - [Как изменить URL страницы записей автора блога на WordPress](https://xozblog.ru/snippets/change-wp-author-url/) - Сниппет меняет стандартный URL страницы записей автора WordPress на заданный. - [Как настроить оповещение по электронной почте при ошибке 404 на сайте WordPress](https://xozblog.ru/snippets/404-notification-wp/) - В этой статье приведен сниппет для WordPress, с помощью которого при попадании пользователя на страницу 404, формируется и отсылается на почту электронное письмо об ошибке. - [Как показать в админке время публикации у запланированных записей](https://xozblog.ru/snippets/time-post-wordpress/) - В этой короткой статье я покажу, как добавить время в список записей WordPress. - [Получение ключевых слов (keywords) любой веб-страницы](https://xozblog.ru/snippets/extract-keywords-webpage/) - С помощью следующего PHP-сниппета можно получить массив ключевых слов указанной веб-страницы. - [Найти все ссылки на странице с помощью PHP](https://xozblog.ru/snippets/find-links-webpage/) - Используя объектную модель документа (DOM), Вы можете легко захватить все ссылки с любой веб-страницы. - [Тонирование фоновых изображений (CSS прием)](https://xozblog.ru/snippets/tinted-images-css-rule/) - Для того чтобы произвести эффект тонированного цветом изображения, можно использовать псевдоэлемент :after, однако можно также использовать линейный градиент. - [Удаление эффекта (при ошибке ввода) в панели входа WordPress](https://xozblog.ru/snippets/remove-the-login-shake-effect-wordpress/) - WordPress сниппет, позволяющий избавится от эффекта перемещения из стороны в сторону панели, при ошибке входа в админку WordPress - [Перенаправление на поддомен, htaccess сниппет](https://xozblog.ru/snippets/htaccess-redirect/) - При создании поддомена, часто приходится переносить файлы из старой папки. И для того, чтобы решить проблему "отвалившихся" ссылок, можно использовать перенаправление. ## Видеоуроки - [Бесконечная прокрутка страницы на блоге WordPress - плагин Infinite scroll](https://xozblog.ru/video-lessons/infinite-scroll-plugin/) - Видео урок по установке и настройке плагина для WordPress - Infinite scroll. ## Рубрики - [WordPress](https://xozblog.ru/category/wordpress/) - [HTML](https://xozblog.ru/category/html-dhtml/) - [CSS](https://xozblog.ru/category/css/) - [jQuery](https://xozblog.ru/category/jquery/) - [Новости](https://xozblog.ru/category/новости/) - [WordPress-Темы](https://xozblog.ru/category/downloads-wordpress-themes/) - [Иконки](https://xozblog.ru/category/icons/) - [PHP](https://xozblog.ru/category/php/) - [Полезное](https://xozblog.ru/category/poleznoe/) - [Видеоуроки](https://xozblog.ru/category/video-lessons/) - [MooTools](https://xozblog.ru/category/mootools/) - [HTML/CSS - шаблоны](https://xozblog.ru/category/html-css-templates/) - [Плагины](https://xozblog.ru/category/plugins/) - [JavaScript](https://xozblog.ru/category/javascript/) ## Метки - [HTML](/tag/html/) - [Плагины](/tag/плагины/) - [меню](/tag/меню/) - [обзор](/tag/обзор/) - [beta версия](/tag/beta-версия/) - [WordPress themes](/tag/wordpress-themes/) - [темы](/tag/темы/) - [скачать](/tag/скачать/) - [иконки](/tag/иконки/) - [icons](/tag/icons-2/) - [pop-up](/tag/pop-up/) - [button](/tag/button/) - [twitter](/tag/twitter/) - [слайдер](/tag/слайдер/) - [новая версия](/tag/новая-версия/) - [cms](/tag/cms/) - [ui](/tag/ui/) - [plugins](/tag/plugins-tag/) - [web](/tag/web/) - [php](/tag/php-2/) - [фрагменты кода](/tag/фрагменты-кода/) - [snippets](/tag/snippets/) - [цвета](/tag/цвета/) - [php класс](/tag/php-класс/) - [php class](/tag/php-class/) - [кнопки](/tag/кнопки/) - [google](/tag/google/) - [тестирование](/tag/тестирование/) - [инструменты](/tag/инструменты/) - [проверка сайта](/tag/проверка-сайта/) - [canvas](/tag/canvas/) - [html5](/tag/html5/) - [css3](/tag/css3/) - [галерея](/tag/галерея/) - [scroller](/tag/scroller/) - [видео](/tag/видео/) - [.htaccess](/tag/htaccess/) - [chrome](/tag/chrome/) - [tags](/tag/tags/) - [условные теги](/tag/условные-теги/) - [preloader](/tag/preloader/) - [image](/tag/image/) - [шаблоны](/tag/шаблоны/) - [LESS](/tag/less/) - [menu](/tag/menu/) - [apple](/tag/apple/) - [hooks](/tag/hooks/) - [filters](/tag/filters/) - [:before](/tag/before/) - [:after](/tag/after/) - [e-mail](/tag/e-mail/) - [валидатор](/tag/валидатор/) - [ajax](/tag/ajax/) - [генераторы](/tag/генераторы/) - [День Победы](/tag/день-победы/) - [вкладки](/tag/вкладки/) - [tabs](/tag/tabs/) - [текстовый редактор](/tag/текстовый-редактор/) - [шаблон](/tag/шаблон/) - [таймер](/tag/таймер/) - [аккордеон](/tag/аккордеон/) - [transitions](/tag/transitions/) - [transform](/tag/transform/) - [transition](/tag/transition/) - [галерея изображений](/tag/галерея-изображений/) - [генератор кнопок](/tag/генератор-кнопок/) - [pseudo-elements](/tag/pseudo-elements/) - [@font-face](/tag/font-face/) - [адаптивность](/tag/адаптивность/) - [tool-tip](/tag/tool-tip/) - [gradient](/tag/gradient/) - [drag & drop](/tag/drag-drop/) - [uploader](/tag/uploader/) - [checkbox](/tag/checkbox/) - [radio](/tag/radio/) - [web sql](/tag/web-sql/) - [plugin](/tag/plugin/) - [zoom](/tag/zoom/) - [gallery](/tag/gallery/) - [custom post types](/tag/custom-post-types/) - [taxonomy](/tag/taxonomy/) - [datepicker](/tag/datepicker/) - [slider](/tag/slider/) - [table](/tag/table/) - [Apache](/tag/apache/) - [пагинация](/tag/пагинация/) - [autocomplete](/tag/autocomplete/) - [geolocation](/tag/geolocation/) - [api](/tag/api/) - [widgets](/tag/widgets/) - [attributes](/tag/attributes/) - [shortcodes](/tag/shortcodes/) - [комментарии](/tag/комментарии/) - [history](/tag/history/) - [parallax](/tag/parallax/) - [эффект](/tag/эффект/) - [social](/tag/social/) - [avatar](/tag/avatar/) - [javascript](/tag/javascript/) - [диаграммы](/tag/диаграммы/) - [web storage](/tag/web-storage/) - [notification](/tag/notification/) - [уведомления](/tag/уведомления/) - [анимация](/tag/анимация/) - [история](/tag/история/) - [adblock](/tag/adblock/) - [lightbox](/tag/lightbox/) - [WordPress](/tag/wordpress/) - [CSS](/tag/css/) - [jQuery](/tag/jquery/) - [MooTools](/tag/mootools/) - [charts](/tag/charts/) - [diagrams](/tag/diagrams/) - [графики](/tag/графики/) - [errors](/tag/errors/) - [wix](/tag/wix/) - [migrate](/tag/migrate/) - [WP-Cron](/tag/wp-cron/) ## Категории - [CSS](https://xozblog.ru/snippets-category/css-snippets/) - [jQuery](https://xozblog.ru/snippets-category/jquery-snippets/) - [PHP](https://xozblog.ru/snippets-category/php-snippets/) - [WP](https://xozblog.ru/snippets-category/wp-snippets/) - [Разное](https://xozblog.ru/snippets-category/others/)