Мир CSS http://cssworld.ru Про CSS, HTML, AJAX и многое другое... Wed, 27 Dec 2017 13:33:39 +0300 ru-RU daily 1 Разбираем простую AJAX функцию http://cssworld.ru/post/77-razbiraem-prostuyu-ajax-funktsiyu http://cssworld.ru/post/77-razbiraem-prostuyu-ajax-funktsiyu#comments Wed, 27 Dec 2017 12:55:29 +0300 cssmaster http://cssworld.ru/post/77 Давайте разберем простейшую функцию, которая работает просто вот так: ajax("?param=123");

Подробнее

]]> http://cssworld.ru/post/feed/77 0 Календарь для сайта с возможностью выбора даты http://cssworld.ru/post/76-kalendar-dlya-sayta-s-vozmozhnostyu-vibora-dati http://cssworld.ru/post/76-kalendar-dlya-sayta-s-vozmozhnostyu-vibora-dati#comments Fri, 17 Nov 2017 15:30:16 +0300 cssmaster http://cssworld.ru/post/76 Попробуйте простой для установки, удобный для использования, маленький по размеру, гибкий для настройки, но функциональный и совершенно бесплатный календарь.

Подробнее

]]> http://cssworld.ru/post/feed/76 0 Простые всплывающие по нажатию подсказки на JavaScript http://cssworld.ru/post/75-prostie-vsplivayushchie-podskazki-na-javascript http://cssworld.ru/post/75-prostie-vsplivayushchie-podskazki-na-javascript#comments Fri, 06 Oct 2017 20:12:45 +0300 cssmaster http://cssworld.ru/post/75 Рассмотрим подробно как сделать простые всплывающие подсказки или окна на JavaScript, которые открываются и закрываются по клику по ним или рядом с ними. При этом может быть открыта только одна из них. Будем использовать JavaScript и CSS без jQuery. Кому нет нужды разбираться, можно взять готовый код.

Подробнее

]]> http://cssworld.ru/post/feed/75 0 Понимание flex или просто о непривычном http://cssworld.ru/post/74-ponimanie-flex-ili-prosto-o-neprivichnom http://cssworld.ru/post/74-ponimanie-flex-ili-prosto-o-neprivichnom#comments Thu, 21 Sep 2017 16:42:06 +0300 cssmaster http://cssworld.ru/post/74 FlexBox, или просто flex, это новый способ верстки страницы или ее части. Его использование сильно отличается от привычных методов. Однако его можно достаточно просто объяснить разделив набор параметров или свойств на две части: родительские и дочерние.

Подробнее

]]> http://cssworld.ru/post/feed/74 0 Как правильно писать CSS код - 5 простых эффективных правил http://cssworld.ru/post/73-kak-pravilno-pisat-css-kod-5-prostih-effektivnih-pravil http://cssworld.ru/post/73-kak-pravilno-pisat-css-kod-5-prostih-effektivnih-pravil#comments Fri, 08 Sep 2017 10:36:12 +0300 cssmaster http://cssworld.ru/post/73 Несколько простых правил, которые помогут избежать многих проблем при верстке.

Подробнее

]]> http://cssworld.ru/post/feed/73 0 Как точно расположить элемент внутри другого элемента http://cssworld.ru/post/72-kak-tochno-raspolozhit-element-vnutri-drugogo-elementa http://cssworld.ru/post/72-kak-tochno-raspolozhit-element-vnutri-drugogo-elementa#comments Mon, 08 Apr 2013 14:13:32 +0400 cssmaster http://cssworld.ru/post/72 Для этого нам послужит свойство position со значением absolute. Однако, значения top, right, bottom, left при значении position:absolute будут указываться относительно всего окна сайта.

Это верно, а чтобы значения работали относительно родительского элемента (внутри которого располагается объект), необходимо родительскому элементу присвоить значение position:relative

Это кажется простым, однако многие начинающие верстальщики сталкиваются с подобными проблемами.

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

Поясним на примере.

Подробнее

]]> http://cssworld.ru/post/feed/72 0 HTML5 визуальный редактор http://cssworld.ru/post/71-html5-vizualnyj-redaktor http://cssworld.ru/post/71-html5-vizualnyj-redaktor#comments Tue, 22 May 2012 22:01:42 +0400 cssmaster http://cssworld.ru/post/71
WYSIHTML5 это текстовый редактор с открытым исходным кодом, разработанный не кем-нибудь а самим Xing.
Редактор сделан полностью на HTML5 и не использует ни грамма JS, он очень легкий и работает довольно быстро.
Он преобразует поле textarea и обеспечивает основные функции редактирования текста, включая стили текста (жирный, курсив), списки, заголовки, вставка изображений и ссылок и окраски текста. Любителям браузера Chrome предоставляется возможность голосовой ввод текста.

Подробнее

]]> http://cssworld.ru/post/feed/71 0 Подсветка кода:Rainbow http://cssworld.ru/post/70-podsvetka-kodarainbow http://cssworld.ru/post/70-podsvetka-kodarainbow#comments Sun, 29 Apr 2012 16:28:50 +0400 cssmaster http://cssworld.ru/post/70
На сегодняшний день выбор js скриптов для подсветки кода в тексте страниц очень много. Представляю вашему вниманию, пожалуй, самый легкий из всех - Rainbow. Rainbow весит всего 1,4 кб, очень легок в использовании с минимумом настроек. Цвета и шрифты подсветки в зависимости от языка кода можно настраивать в css. Существуют уже готовые к использованию различные цветовые темы.

Подробнее

]]> http://cssworld.ru/post/feed/70 0 Еще один ротатор контента на jQuery http://cssworld.ru/post/69-eshhe-odin-rotator-kontenta-na-jquery http://cssworld.ru/post/69-eshhe-odin-rotator-kontenta-na-jquery#comments Fri, 11 Feb 2011 20:13:46 +0300 cssmaster http://cssworld.ru/post/69
Полностью настраиваемый ротатор контента с использованием jQuery, предусмотрено автоматическое воспроизведение при помощи кнопок вкл / выкл, настраивается скорость переходов, элементы управления включения / выключения, эффекты и многое другое.
Элементы в ротатора можно перемещать с помощью кнопки предыдущий-следующей или при помощи эскизов.

Подробнее

]]> http://cssworld.ru/post/feed/69 0 HTML5 видеоплееры для вашего сайта http://cssworld.ru/post/68-html5-videoplayers-for-your-site http://cssworld.ru/post/68-html5-videoplayers-for-your-site#comments Sun, 28 Nov 2010 15:19:13 +0300 cssmaster http://cssworld.ru/post/68
Рекомендую статью на "Временно нет" посвященую HTML5 видеоплеерам. Рассмотрено десять решений для кроссплатформенного показа видео на ваших сайтах.
Все рассмотренные HTML5 плееры умеют использовать не только HTML5, но подключать флеш версии тогда, когда это необходимо. Почти все из них бесплатные, и подходят для коммерческого использования.

Подробнее

]]> http://cssworld.ru/post/feed/68 0 Динамический баннер на jQuery http://cssworld.ru/post/67-animation-banner http://cssworld.ru/post/67-animation-banner#comments Tue, 23 Nov 2010 01:03:04 +0300 cssmaster http://cssworld.ru/post/67
В баннере используются различные уже готовые элементы, которые совершают движение (вращение и перемещение). Реализовано как плагин к jQuery.

Подробнее

]]> http://cssworld.ru/post/feed/67 0 Breadcrumbs - навигационное меню http://cssworld.ru/post/66-breadcrumbs http://cssworld.ru/post/66-breadcrumbs#comments Tue, 24 Aug 2010 16:50:30 +0400 cssmaster http://cssworld.ru/post/66
xBreadcrumbs (Расширенная Breadcrumbs) является плагином JQuery для создания горизонтального меню для вашего сайта. Это может быть полезно, если ваш сайт имеет сложную структуру, и вы хотите дать посетителям быстро перемещаться с одной части сайта на другую. xBreadcrumbs работает с неупорядоченными списки (UL / LI).

Подробнее

]]> http://cssworld.ru/post/feed/66 0 Показываем пароль в формах http://cssworld.ru/post/61-unmask-password http://cssworld.ru/post/61-unmask-password#comments Fri, 20 Aug 2010 15:40:24 +0400 cssmaster http://cssworld.ru/post/61
Прекрасная функция отключения маскировки пароля при заполнении формы. Без проблем работает в IE, а значит и везде.

Подробнее

]]> http://cssworld.ru/post/feed/61 0 Пускаем пузыри http://cssworld.ru/post/60-puskaem-puzyri http://cssworld.ru/post/60-puskaem-puzyri#comments Thu, 22 Jul 2010 12:42:55 +0400 cssmaster http://cssworld.ru/post/60
Bubble Engine - красивый плагин JQuery который может очень миленько имитировать мыльные пузыри.
Можно менять количество источников пузырей, скорость пузырей, да и вообще сами пузыри можно заменить на что нибудь другое. Например на сердечки или звезды (искры).

Подробнее

]]> http://cssworld.ru/post/feed/60 0 Pines Notify: Всплывающие уведомления http://cssworld.ru/post/59-tips http://cssworld.ru/post/59-tips#comments Mon, 24 May 2010 14:26:57 +0400 cssmaster http://cssworld.ru/post/59
JQuery плагин для отображения настраиваемых всплывающих уведомлений.
Уведомляющие блоки можно установить для отображения в любой части веб-страницы, а также могут быть настроены на автоматическое исчезновение или при помощи кнопки "Закрыть".

Подробнее

]]> http://cssworld.ru/post/feed/59 2 Подключаем нестандартные шрифты http://cssworld.ru/post/58-podklyuchaem-nestandartnye-shrifty http://cssworld.ru/post/58-podklyuchaem-nestandartnye-shrifty#comments Fri, 21 May 2010 11:46:35 +0400 cssmaster http://cssworld.ru/post/58
Появилась прекрасная возможность без проблем использовать на сайте нестандартные шрифты. Помог нам в этом всеми любимый Google.

Подробнее

]]> http://cssworld.ru/post/feed/58 0 Выдвижное меню http://cssworld.ru/post/57-stack-menu http://cssworld.ru/post/57-stack-menu#comments Wed, 19 May 2010 14:49:22 +0400 cssmaster http://cssworld.ru/post/57
JQuery UI виджет, который преобразует вложенные элементы списка в красивые меню.

Подробнее

]]> http://cssworld.ru/post/feed/57 0 Крутящееся раздвигающееся меню http://cssworld.ru/post/56-rounded-menu http://cssworld.ru/post/56-rounded-menu#comments Thu, 13 May 2010 17:45:14 +0400 cssmaster http://cssworld.ru/post/56
Уникальное меню для сайта. При наведении указателем мыши кнопка раскручивается и отъезжает в сторону показывая дополнительные ссылки, заголовки и, даже, элементы формы. Одним словом лучше один раз посмотреть...

Подробнее

]]> http://cssworld.ru/post/feed/56 0 CSS3-хаки, трюки и техники http://cssworld.ru/post/55-css3-xakitryuki-i-texniki http://cssworld.ru/post/55-css3-xakitryuki-i-texniki#comments Fri, 07 May 2010 16:04:50 +0400 cssmaster http://cssworld.ru/post/55
Если бы не проклятый IE то наверняка CSS3 и HTML5 уже бы использовались во всю.

Подробнее

]]> http://cssworld.ru/post/feed/55 0 Простая крутилка баннеров http://cssworld.ru/post/54-prostaya-krutilka-bannerov http://cssworld.ru/post/54-prostaya-krutilka-bannerov#comments Thu, 29 Apr 2010 13:19:12 +0400 cssmaster http://cssworld.ru/post/54
Простой PHP, MySQL и JQuery ротатор баннеров, с помощью которого можно создавать и случайным образом отображать баннеры на вашем сайте. Каждый из баннеров снабжен изящным Jquery эффектом анимации, который вы можете настроить его под собственные нужды.

Подробнее

]]> http://cssworld.ru/post/feed/54 0 jsTree - работаем с деревьями http://cssworld.ru/post/53-jstree-rabotaem-s-derevyami http://cssworld.ru/post/53-jstree-rabotaem-s-derevyami#comments Mon, 26 Apr 2010 09:45:56 +0400 cssmaster http://cssworld.ru/post/53
JavaScript компонент для визуальной работы с деревьями. Реализован в виде плагина jQuery. Идеально подойдёт для управления категориями каталога или схожей задачи.

Подробнее

]]> http://cssworld.ru/post/feed/53 0 Простой пример Drag and Drop http://cssworld.ru/post/52-prostoj-primer-drag-drop http://cssworld.ru/post/52-prostoj-primer-drag-drop#comments Wed, 14 Apr 2010 12:52:34 +0400 cssmaster http://cssworld.ru/post/52
Простой пример Drag & Drop приведен в блоге simplecoding.org есть версия с jQuery UI и с применением

Подробнее

]]> http://cssworld.ru/post/feed/52 0 Потрясающее apple-style меню на jQuery http://cssworld.ru/post/51-apple-style-menu-on-jquery http://cssworld.ru/post/51-apple-style-menu-on-jquery#comments Wed, 14 Apr 2010 10:45:23 +0400 cssmaster http://cssworld.ru/post/51
Это меню очень похоже на навигацию девайсов от Apple. При наведении на раздел меню соответствующие значки плавно выезжают сверху. Создавая при этом эффект "перемешивания карт"

Подробнее

]]> http://cssworld.ru/post/feed/51 0 Подбираем цвет онлайн http://cssworld.ru/post/50-color-finder http://cssworld.ru/post/50-color-finder#comments Wed, 14 Apr 2010 00:27:31 +0400 cssmaster http://cssworld.ru/post/50
0to255 - простой инструмент, который позволяет веб-дизайнерам найти светлые и темные тона, любого цвета. Почему это необходимо? Ну, это занимает немного больше объяснений.
Просто задаете любой цвет, и сервис выдает вам всю линейку тонов этого цвета от белого до черного.

Подробнее

]]> http://cssworld.ru/post/feed/50 0 Выбор даты на jQuery: CalendarPicker http://cssworld.ru/post/49-data-checker http://cssworld.ru/post/49-data-checker#comments Fri, 09 Apr 2010 12:39:52 +0400 cssmaster http://cssworld.ru/post/49
CalendarPicker кроссбраузерен т.е. который работает во всех основных браузерах, включая IE6. Внедрение элемента в страницу очень простое, вы легко можете изменить внешний вид календаря редактированием файла CSS.

Подробнее

]]> http://cssworld.ru/post/feed/49 0 Как научить IE border-radius и box-shadow http://cssworld.ru/post/48-border-radius-and-box-shadow-in-ie http://cssworld.ru/post/48-border-radius-and-box-shadow-in-ie#comments Wed, 07 Apr 2010 13:43:27 +0400 cssmaster http://cssworld.ru/post/48
Статья о том как Internet Explorer научить закруглять углы и разрешать тени элементам. Вообщем всем рекомендую прочесть, даже если вы забили на IE. Так же неплохая статья про

Подробнее

]]> http://cssworld.ru/post/feed/48 0 Текстовый редактор для вашего сайта http://cssworld.ru/post/47-tekstovyj-redaktor-dlya-vashego-sajta http://cssworld.ru/post/47-tekstovyj-redaktor-dlya-vashego-sajta#comments Tue, 06 Apr 2010 14:20:44 +0400 cssmaster http://cssworld.ru/post/47
Простой, легкий, расширяемой WYSIWYG (What You See Is What You Get, «что видишь, то и получишь» англ.) HTML-редактор построенный на JQuery. Этот компонент позволяет легко отображать WYSIWYG HTML редактор в место любого TextArea элементов на странице. Размер сценария всего 9.17kb; CSS и изображения в общей сложности весят 25.9kb.

Подробнее

]]> http://cssworld.ru/post/feed/47 0 Центрирование div'ов http://cssworld.ru/post/46-centering-a-div http://cssworld.ru/post/46-centering-a-div#comments Tue, 30 Mar 2010 12:47:24 +0400 cssmaster http://cssworld.ru/post/46 MicroTut
Вертикальное выравнивание div.
Страница с описанием и

Подробнее

]]> http://cssworld.ru/post/feed/46 0 Правильный justify http://cssworld.ru/post/45-good-justify http://cssworld.ru/post/45-good-justify#comments Sat, 27 Mar 2010 01:17:08 +0300 cssmaster http://cssworld.ru/post/45
p {
text-align: justify;
word-spacing: -0.3ex;
}
и текст станет красивее.
Обязательно читаем комменты и узнаем как в тексте делать переносы

Подробнее

]]> http://cssworld.ru/post/feed/45 0 Доска почета http://cssworld.ru/post/44-hall-of-fame http://cssworld.ru/post/44-hall-of-fame#comments Fri, 26 Mar 2010 11:42:27 +0300 cssmaster http://cssworld.ru/post/44 Поле чудес", и появляется краткое описание и ссылка.
Демо и

Подробнее

]]> http://cssworld.ru/post/feed/44 0