Выражая IT

Другой быстрый урок. Вот то, просто и красиво, используя силу CSS ... но было трудно concieve (и это, конечно, не мне), чтобы начать с. Добавление DropShadow, может быть peice пирога для многих из нас, используя некоторые инструменты для редактирования изображений, как Photoshop, Fireworks НФА и др.
Причина, почему я выбрала тени с помощью CSS является то, что, как правило, при создании дизайна страницы / HTML заявления, требования сохранить итерации. Я имею в виду, в существующий веб-сайт с большим количеством изображений, как те, отображающий Freinds списка или галереи изображений, трудно будет переработать весь груз изображений, которые уже были выгружены, чтобы добавить или удалить тени, для этого вопрос.
Так что если вы сделали немного вперед мышления при создании HTMLS добавить эти дополнительные подразделения или правило, ситуация такова, что у вас есть цикл логика создания этих икон / миниатюр в XSL, PHP. JAVA или любой другой программы / скриптовый язык, вы можете добавить его в любое время, то это просто вопрос о шоу и скрыть эти тени с помощью свойства CSS Display, в соответствии с клиентами постоянно меняющихся требований ... Я havn't сделать этот вид дальновидных до этого ... но ahev прямо сейчас!

В приведенном ниже примере, исходное изображение без теней и dropshadows применяются по мере необходимости! Кроме того, я пошел немного больше, используя приемы из моих предыдущих Тута (Well! это, вероятно, кратчайшие различные учебные материалы, так что оправдано только называя их "Тута" 'ы) об использовании CSS клип собственности на показать только

Исходное изображение

Результаты CSS DropShadow

Посмотреть демо | Скачать файлы исходного кода

Почему я хочу, чтобы это понимать?? Хамм ...!!

Большинство писателей CSS согласятся, что CSS клип собственности, вероятно, одним из самых неиспользованных свойств CSS. Это было так верно и для меня и был самый счастливый пренебрегать этим, пока я не начал изменения MooTools ДВА ручку (Pin) Slider Компонент (с Range Indicator) .

Существовал хорошее предложение от одного из компонентов пользователям изменять Slider Компонент использованием обрезанный Справочный изображения (по сравнению с переменной шириной деление), чтобы указать ползунка диапазона. Таким образом, пришло мое время, чтобы войти в удовольствие, но не-уставных (для меня конечно же) воды имущества клип CSS.

Ну! как трудно это может быть? Не так много на всех ... ДА и НЕТ. Синтаксис CSS собственности Клип довольно прямой, но смысл / usuage немного croocked. С памятью, как у меня, каждый раз, когда я сижу в переделку на мой Slider сценарий ... У меня есть tokeep возвращаясь к использованию этого клипа собственности, чтобы напомнить себе логику, которую я создал в мой сценарий .... Отсюда! думал пера его, в надежде вспомнить его будущем (а также в интересах тех, кто, кажется Поражает собственности клипа CSS)

Что такое CSS клип делать?

Клип является частью визуального модуля эффектов CSS 2.1. Проще говоря, его работа заключается в размещении видимое окно в верхней части объекта, который обрезается, поэтому обрезание изображений и создание миниатюр без создания дополнительных файлов (я уже поставил эту возможность для более эффективного использования в компоненте Slider )

Используя свойство клипа CSS, вы можете создать вырезку помощью формы прямоугольника. Как и многие другие свойства CSS (например, маржа, отступы и т.д.), используя прямоугольник, необходимо четыре координаты Top, Right, Bottom, Left (TRBL). Croocked природа этого свойства отражает, когда вы внимательно посмотрите, как клип вычисляет область отсечения, используя эти четыре координаты (посылает мозг в жеребьевке на некоторое время). Теперь, чтобы сбить вас с толку нижней начинается сверху, а правая начинается с левой стороны. . Вы видите, что я сказал? .... Таким образом, этот пост ...

Эта небольшая путаница может легко исчезнуть, с этим визуальным объяснение CSS Clip / прямоугольник собственности, как показано ниже!!

Требования CSS клип

Задача, которую мы начали это клип на следующем изображении Миниатюра на квадратный искать изображения (а также широкоугольные изображения)

Оригинальный Thumbnal / Image	Клип Требования к Sqaure Thumbmail

Результаты CSS клип

Посмотреть демо | Скачать файлы исходного кода

Этот вопрос мне в голову несколько раз, когда я работал на сайтах и ​​раньше, в котором используется, чтобы показать WordPress блогов или новый вид контента в некоторые части сайта / portal.Being новичок в PHP и вокруг WordPress, я продолжал procastinating он, думая, что "это не мое peice пирога". Наконец-то! Это требование вступило до моего носа, когда началась Diggin вокруг немного для ее решения.
Я был удивлен, обнаружив, что это действительно было легче, чем я на самом деле думал, что это было, чтобы отобразить список заголовков или к последнему сообщению любую другую страницу вне WordPress питанием раздел, используя только немного PHP и WordPress API .

Вот что нужно сделать: -
По причинам, объяснение, предположим, что ваш сайт http://www.inchembur.com/ и у вас есть раздел новостей на этом сайте на http://news.inchembur.com/ (который работает WordPress). Теперь требование показать последнее сообщение от http://news.inchembur.com/ на главной странице основного сайта, т.е. http://www.inchembur.com/index.php

Шаг 1: В вашем index.php добавить следующую часть кода, включить файл WordPress API. Вы можете добавить это в верхней части страницы вы хотите, чтобы после появиться на.

<? PHP
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES, ложный) / / Disbable использование темы WordPress
require ('/ var / news.inchembur.com / WP-блоге-header.php'); / / Включить WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Получить Последнее сообщение
>

В приведенном выше peice из включают в себя, мы получаем только одно последнее сообщение. если вы хотите попробовать несколько вариантов, не стесняйтесь, чтобы вырыть в, query_posts() документации .

Шаг 2: Теперь, в части Главная / Главная страница, на которой вы хотите показать последние WordPress сообщение от http://news.inchembur.com , используйте следующий код. Разумеется, не стесняйтесь объявление стиля подразделений, пролетов и классы в соответствии с вашими потребностями проекта.

Шаг 3: Существует нет Шаг 3 ... Thats, это ... все готово!

Как показывают конкретные записи / страницы, а не последнее сообщение: -
Это легко реализуется за счет изменения аргументов query_posts() включить идентификатор страницы или страницы пули

) ; query_posts ('page_id = 7');
) ; query_posts ("название страницы = о ');

или вы можете контролировать количество сообщений:
) ; query_posts (showposts = 3);

Иногда, чтобы сохранить pageweight вниз ... мы разбили наши сценарии на фрагменты ... Эти фрагменты JavaScript может быть загружен как и в случае необходимости (по событию или по нажатию на ссылку или кнопку и т.д.).

Загрузка Javascripts динамично прост и довольно прямо вперед, как показано ниже ...

= “text/javascript” > <Сценарий тип = "текст / JavaScript">
Функция loadNewScript (источник) {
Var S = document.createElement ('сценария');
s.setAttribute («типа», «текст / JavaScript");
s.setAttribute («SRC», источник);
document.body.appendChild (ы);
}
</ SCRIPT>

и вы можете по следующей ссылке вызова в любую точку тела, или вы можете иметь этот сценарий "OnLoad" самого документа ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A HREF = "javascript: loadNewScript ('myDynamicScript.js');"> Load Динамический сценарий </ a>

или

<body onload="loadNewScript('myDynamicScript.js');">

Если вы CSS человека, вы бы знали, боль в получении макеты рабочих крест-браузера. IE8 является еще одним ключом в работе для нас разработчики. Anywaz! если вы попали на этот вопрос, как я сделал вчера, когда ваш прекрасно работает CSS в IE7 (и ранее) и Firefox вдруг начали бросать истерики в IE8, попробуйте это ... Это хорошо, казалось, исправить мои проблемы на данный момент ....

Использование мета декларации, мы можем указать рендеринга мы хотели бы использовать IE8. Таким образом, чтобы заставить IE8 оказывать как IE7 ... вставьте следующий мета-тег в голову документа: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

По умолчанию IE Мета бы: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
которые сделают IE8 сделать страницу с помощью нового режима стандартов.

При необходимости, этот синтаксис может быть использован для размещения на других браузерах, как показано ниже:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

БОЛЬШЕ О ТИПЫ ДОКУМЕНТОВ:

Если вы еще не знакомы с подобного животного под названием "Doctype" ... вот некоторые быстро читать
Каковы ТИПЫ ДОКУМЕНТОВ? Что такое БРАУЗЕР причуды и строгий режим?
Установка DOCTYPE в XSL

Для более глубокого понимания ТИПЫ ДОКУМЕНТОВ, попробуйте посетить эти ссылки ...
A List Apart: Исправьте ваш сайт с правой DOCTYPE!
A List Apart: Beyond DOCTYPE: веб-стандартов, вперед совместимости и IE8

Примечание: Хотя многие из нас, HTML / CSS люди были без учета важности DOCTYPE decleration в наших документах, Установка правой DOCTYPE, как правило, ответ на самый крест вопросы обозревателя.

Благодаря разнообразию Карусели там много для Mootools, а также, я все же решил написать свой собственный класс Карусель, некоторые веские причины
1. Требуются подкачки функцию (чтобы иметь возможность перейти частности слайд / шаг в карусели).
2. Требуются свободы с размещением кнопок ВЛЕВО и ВПРАВО / связи, где бы я, пожалуйста.
3. Больше контроля над Слайд шаги.

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

Мой пример выглядит следующим образом ... [ Посмотреть презентацию ]

Посмотреть демо | Скачать Mootools карусель с подкачкой версии 1.0 (Скачано 2006 раз)

1. Карусель пейджинга

Вы можете легко добавить подкачки к карусели, просто установив подкачки флаг, который является последним parater прошло при создании экземпляра MooCarousel к истинной (хочу подкачки) или ЛОЖЬ (выигрыш желающих подкачки).

уаг carousel1 = новый MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда) / / нс = количество слайдов, SSS = слайд шага

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

. Carousel_paging {выравнивания текста: справа; поле: 5px 10px 0 0;}
. Carousel_paging тока, carousel_paging страницы {контура: нет; ширина:... 15px высота: 15px; высота строки: 15px; выравнивания текста: центр; дисплей: блок; float: left; фон: # D8D8EB; маржа: 0 1px 0 0; текст-отделка: нет;}

. Carousel_paging: наведите, carousel_paging текущий {фон: # 4D4D9B, цвет: # FFFFFF;}..

Ну! есть небольшая проблема, хотя, подкачки якоря если установлен, то он получит порожденных всегда после того, как карусель компонентов. Я хотел сделать его динамичным, как хорошо, но потом просто сохранить сценарий для выдува пропорции, я решил пропустить его.
Но вы знаете, немного Javascript, вы можете легко изменить код подкачки поколения в MooCarousel класса порадовать своих потребностей.

2. Настройка левый и правый иконки

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

уаг carousel1 = новый MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда);

CSS
.. Carousel_container_l, carousel_container_r {маржа: 50px 0 0 0; позиция: относительная ширина: 23px высота: 20px; float: left; курсора: указатель;}

. Carousel_container_r {фон-позиции: 0-38px;}

. Carousel_container_l {фон-позиции: 0-58px;}

3. Настройка слайд шаги

Что я имею в виду мой Настройка ШАГИ SLIDE?
Большинство Карусели скользить с полным видимого окна. Так говорят у вас было четыре элемента (как в моем примере выше), то будет скользить всеми четырьмя элементами. С этой карусели компонент, Вы передаете количество слайдов и размер шага по вашему выбору.

уаг carousel1 = новый MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright, c_ns, c_sss, правда);
c_ns = количество слайдов, c_sss = слайд шага

Кроме того, в моем example1 я calcuted размер слайда шаг, основанные на логике, где, я знаю, количество предметов, шириной по каждому пункту, и поля, которые дали после того, как каждый элемент в моем CSS.

/ * Для пирушки 1 * /

уаг c1_w = 92; / / пирушки товара Ширина

уаг c1_n = 10; / / Общее количество товаров Сравнение пирушки

уаг c1_pp = 4 / / Количество Сравнение perpage пирушки товаров

уаг c1_marginFactor = 51;

уаг c1_sss = c1_w * c1_pp / / SSS = слайд шага

уаг c1_ns = ParseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / нс = количество слайдов

c1_sss + = c1_marginFactor / / SSS = слайд шага, 51 полей

Требования: Mootools 1.2

Посмотреть демо | Скачать Mootools карусель с подкачкой версии 1.0 (Скачано 2006 раз)

MooRating простой (кросс-браузер, конечно, как он использует власть библиотеки MooTools), легкие и отлично Mootools основан рейтинг решение. Это не называется, как "Звездный Рейтинг", просто потому, что рейтинг изображение может быть, как вы выберете (я предоставил Звезды, бары и сердца при загрузке, но вы можете создать свой собственный сорт и просто его).

Как это выглядит следующим образом:

	Рейтинг Mootools с различными изображениями Посмотреть демо
	Рейтинг Mootools с Процент значений Посмотреть демо
	Рейтинг Mootools с дробными значениями Посмотреть демо

Скачать Mootols Категория сценарий (Скачано 724 раз)

Оценка данных: целое число, десятичное или процентах
В настоящее время сценарий предназначен для демонстрации в рейтинге данные в целом значения (1,2,3,4,5), в десятичных (1.24, 3.45 и т.д.) или в процентах (12%, 55% и т.д.). Выбор для отображения данных в любом из указанных форматов может быть установлен только путем изменения некоторых значений флага в JavaScript (moorating.js)
Есть два электронных два флага, чтобы играть, для отображения значений в формат по вашему выбору ...

уаг inpercent = false; / / Установить флаг так, если вам требуется процентные значения, которое будет отображаться
уаг isFractional = False / / Установить это верно, если вы хотите дробные значения, как 1,24, 1,25, 4,56, а не 1,2 ... 5

И я не думаю, что нет никакого объяснения, необходимые для этого. Более того. Сценарий очень прост. Если вы знаете немного javascripting, вы можете изменить сценарий, чтобы получить никакого значения отображаются. Для, например, если вы хотите трех знаков после запятой будет отображаться ... просто настроить сценарий, как показано ниже ...

если (isFractional) {если (х <= 5 | | х> = 0) moostartval [я] = InnerHtml FormatNumber (х, 3);.} / / 2 меняется на 3
еще {moostartval [я] InnerHtml экскурсии, (х).

Обновление Рейтинг Значение:
Я нету беспокоить написания сценариев AJAX для обновления Рейтинги значение, потому что я знаю из своего опыта, что не всегда делают это намерены пересматривать или обновлять РЕЙТИНГ как только пользователь что-то ставок. Вы вольны делать все, что вы хотите с номинального значения, обновление с помощью AJAX или предложить его или установить скрытое значение поля формы, которые будут представлены со всей форме и т.д.

Функция updateRating (ID, рейтинг) {
/ / Оповещения (ID + "," + рейтинг);
/ / Сделать что-то с РЕЙТИНГ
}

Существует функция в JavaScript под названием "updateRating". Эта функция была передана идентификатор Рейтинг Div, чтобы определить, какие рейтинги (если есть более одной оценки на странице) был обновлен и значение рейтинга [updateRating (ID, рейтинг)]. Вы можете выбрать все, что вы хотите с этими ценностями, как я упоминал ранее.

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

. Moostar {маржа: 0px; обивка: 0px; переполнение: скрытый, ширина: 84px высота: 20px; float: left; фон: URL ('stars.gif) повторите-х;}
. Moostar промежуток {float: left; края: 0px; обивка: 0px; дисплей: блок, ширина: 84px высота: 20px; текст-отделка: нет; текст-indent:-9000px, г-индекс: 20;}
.. Moostar вал {фон: URL ('stars.gif) оставил 25px;}

Большинство рейтингов виджеты используют звезды и половина звезд изображения с помощью мыши над событиями на каждую звезду. Му Рейтинги использует простой спрайт изображение в качестве фонового изображения для достижения требуемого визуального эффекта с очень низкими накладными расходами.

Требования: Mootools 1.2
Скачать Mootols Категория сценарий (Скачано 724 раз)

В Firefox ... иногда вы могли заметить, что курсор начинает мигать на экране. Это может произойти при нажатии на любой элемент на странице, разделения или изображений и т.д. Это мигающий курсор в окне браузера на самом деле ДОСТУПНОСТИ Особенность FireFox называется "каретка просмотра. Эта функция позволяет / позволяет пользователю выбрать текст на странице с помощью клавиатуры (которые мы обычно склонны делать с использованием нашего мыши).

Ну! если вы хотите выигрыш эту функцию ... простым нажатием "F7" для переключения его на ложный и наоборот (если вы хотите, ON). Вы можете также ввести "о: конфигурации" в адресной строке (типа "вставки" в поле фильтра) и просто дважды щелкните изменить опцию "accessibility.browsewithcaret" от "истинного" (поворот каретки просматривают ON) "ложным »(поворот каретки просматривают OFF)

Я искал двойной возлагали слайдер (слайдер с двумя ручками, минимальные и максимальные) с использованием MooTools. Хотя, я нашел несколько хорошо сделали двойной слайдер возлагали на форуме MooTools, единственной проблемой было то, что все эти ползунки вмятина есть выбранный маркер диапазона. Наконец-то! Я решил создать свой собственный. Ну! Я использовать исходный код и изменить его, чтобы иметь ползунок фон указывает на выбранный диапазон визуально, как в моем примере. СИНИЙ области указывает на диапазон стоимости выбранной.

Просмотр версии 2.2 Demo | Скачать Mootools двухместные ВАЖНО Slider версии 2.2 (Скачано 11965 раз)

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

Вы напишите мне комментарий, если вы найдете ее полезной.

Прежде, чем мы имели дело с CSS для создания макетов страниц нашего, совместив часть содержимого внутри ячейки таблицы, казалось, игра просто ребенка. Просто установите "align" или "VALIGN" свойство таблицы имеют выравнивание по вашему выбору, кусок пирога!
С макеты CSS, хотя у нас есть "вертикального выравнивания" свойства элементов, она не кажется такой простой, как «выравнивание» или «VALIGN" свойства. Чтобы быть более specifiic "вертикального выравнивания" никогда, кажется, решить любые ваши проблемы, особенно если будут писать кусок кросс-браузерный CSS.

Без использования таблиц HTML, задачи центровки на объект, будь то изображение или текст, содержащий внутри подразделения, вероятно, было каждый UI / CSS разработчики кошмар какой-то момент. Эта проблема дальнейшего экстраполирует ваши заботы согласования, если объект по центру динамический характер, т.е., когда его высота переменные (неизвестные высоты).

Несмотря на отсутствие известных прямым решением, которое будет работать по всему спектру браузеров мы имеем дело с того, что решение, которое я пытался прийти к действительно похоже на работу в нескольких браузерах, которые я пробовал в (IE6, IE 7 , FF).

РЕШЕНИЕ:
В браузерах Mozilla, Opera и Safari, странное поведение "вертикального выравнивания" имущество может быть доведена до его чувств, просто установив "дисплей" имуществом содержащие деление на «ячейки таблицы" (дисплей: ячейки таблицы) .

Проблема остается с IE браузеров семейства, который, однако, похоже, не понимают, что с "ячейки таблицы" имущество и невежды, как они есть, они просто игнорируют его. Решение приводится ниже, хотя простой, объявления нескольких DOM элементов в HTML, чтобы все произошло.

CSS и HTML выглядит следующим образом
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> производителя <br/> просмотров: 3456 </ div>
</ Div>
</ Div>

Результат выглядит следующим образом: -

просмотреть демонстрацию здесь | Скачать исходных файлов (Скачано 454 раз)

TOP краю CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> производителя <br/> просмотров: 1234 </ div>
</ Div>
</ Div>

Результат выглядит следующим образом: -

НИЖНИЙ краю CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> производителя <br/> просмотров: 1234 </ div>
</ Div>
</ Div>

Результат выглядит следующим образом: -

просмотреть демонстрацию здесь | Скачать здесь

Похоже, возраст, так как я пытался найти разумное решение этой проблемы выравнивания. Но теперь с этим решением, я чувствую себя немного мира.

С надеждой, что когда-нибудь

• вертикальное выравнивание собственности в CSS будет работать, как это делается в ячейке таблицы, без того, чтобы бить много вокруг да около
• По крайней мере, установление разницы-топ: авто и разницы-дно: авто, как даст тот же результат, с краю левого и правого края набора для автоматического
• Браузер войны будет над некоторыми день.
• Там будет только один браузер для ВСЕХ.

Скачать CSS и HTML вышеуказанных решений здесь (Скачано 454 раз) .. для понятности, CSS не оптимизирована

PS: И, кстати, те эскизы некоторых фотографиях я щелкнул ...