Изразяване на ИТ

Друг бърз пф. Ето нещо по-просто и хубаво, използвайки силата на CSS ... но е трудно concieve (и със сигурност не бях аз), да започнем с това. Като Добавяне Dropshadow, може да бъде peice торта за много от нас, като се използват някои инструменти за редактиране на изображения, като Photoshop ANF Фойерверки и др.
Причината, защо, аз избрали за Drop Shadow използване на CSS е, че обикновено по време на създаването на дизайна на страницата / HTML на заявление, изискванията пазят iterating. Какво искам да кажа е в съществуващ уеб сайт с много изображения, като тези, показващи freinds списък или галерия, тя ще бъде трудно да се регенерират целия товар на изображения, които вече са били разтоварени да добавяте или премахвате сенките, за това въпрос.
Така че, ако сте направили малко напред мислене, докато създаване на HTMLS да добавите тези допълнителни подразделения или обикновено ситуацията е, че имате Loop Logic генериране на тези икони / миниатюри в XSL, PHP. JAVA или друг програмен / скриптов език, можете да го добавите по всяко време, тогава е само въпрос на шоуто и скриване на тези сенки, използващи Покажи CSS собственост, както и на непрекъснато променящите се изисквания на клиентите ... аз havn't се направи това нещо напред мислене преди това ... но ahev започва сега!

В примера по-долу, оригиналното изображение е сянка безплатно, и dropshadows се прилагат, както се изисква! Също така, аз са отишли ​​малко повече, с помощта на трикове на по-ранните ми Тутанкамон (Well! те вероятно са най-кратък разнообразие от уроци, така че е оправдано само наричайки ги "Тутанкамон" и) за използване на CSS Clip Имоти покаже само

Оригиналното изображение

Резултатите от СГО DropShadow

Вижте Демо | Download sourcefiles

Защо искам да се разбере това?? ... Humm!!

Повечето писатели на СГО ще се съгласят, че CSS Clip имот е може би една от най-нетипичната-често използваните свойства на CSS. Това е толкова вярно за мен и е най-щастлив да го пренебрегнем, докато не започна промяна на MooTools два копчето (ПИН) Slider компонент (с обхват Indicator) .

Имаше добро предложение от една от съставните потребители промяна на плъзгача компонент, използват на подстригва backgroud изображения (срещу променлива разделение ширина), за да се посочи обхвата на плъзгача. Така дойде и моето време да се въведат забавно, но не-експерт (за мен разбира се) води на клипа собственост CSS.

Е! колко трудно може да бъде? Не е много на всички ... ДА и НЕ. Синтаксисът да използвате Clip CSS имот е доста изправено, но, смисъла, / usuage е малко croocked. С памет като моята, всеки път, когато седнете да се преработи на Slider Script ми ... Имам tokeep, препращащо към използването на този клип имот, за да се напомня на логиката, че са създали в моя скрипт .... Следователно! смята, че то писалката, с надежда да се помни, че бъдещето (а също и за полза на онези, които изглежда слисан от клипа Property CSS)

Какво CSS Clip направя?

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

Използвайки клипа собственост CSS, можете да създадете клипинг с помощта на формата на прякото. Подобно на много други свойства на CSS (като марж, подложка и т.н.), използващи прякото изисква четири координати Top, надясно, надолу, наляво (TRBL). Croocked характер на този имот отразява, когато погледнем по-отблизо как клип изчислява клипинг региона, като се използват тези четири координати (изпраща мозъка в хвърляне за известно време). Сега да ви обърка дъното започва от върха, и правото започва от ляво. . Виждате ли какво ти казах? .... Оттук този пост ...

Това малко объркване може лесно да изчезне, с тази визуална обяснение на CSS Clip / прякото собственост, както по-долу!!!

Изискванията на СГО за клипа

Задачата, ние започнахме, е за клипа на следния умалено изображение в squarer търси образ (а също и широк ъгъл на изображение)

На Оригинален Thumbnal / изображение	Клипа Изисквания за Sqaure Thumbmail

Резултатите от СГО за клипа

Вижте Демо | Download sourcefiles

Този въпрос ми е минавало през ума няколко пъти, преди, когато работех на сайтовете по-рано прекалено, която използва WordPress да покаже, блогове или нов вид на съдържанието в някои части на сайт / portal.Being на начинаещ в PHP и около WordPress, аз продължавах да procastinating, мислене "това не е peice ми торта". Най-накрая! това изискване Upto носа ми, когато започна Закопаваш около малко за разтвор.
Бях изненадан да открие, че това наистина е по-лесно, отколкото всъщност мислех, че е било, да се покаже списък от заглавия или последните мнения на всяка друга страница извън 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 добавете следния peice, код, включват WordPress API файл. Можете да добавите това към горната част на страницата, която искате вашия пост да се появи на.

<? PHP
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ("WP_USE_THEMES", FALSE); / / 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 ... Това ... сте готови!

Как показват определен пост / страница, за разлика от последните мнения:
Това може лесно да постигнала чрез промяна на аргументите, за да query_posts() за да се включат на страницата ID или страница на голия охлюв

) ; query_posts ("page_id = 7 ');
) ; query_posts ("pagename = за ');

Можете да контролирате броя на длъжностите:
) ; query_posts (showposts = 3);

Понякога да запази pageweight надолу ... ние сме разделени на нашите скриптове на фрагменти ... Тези javascript, фрагменти могат да бъдат заредени, както и когато е необходимо (на дадено събитие или на кликване на връзка или бутон и т.н.).

Зареждане Javascripts динамично е прост и доста чисти напред както по-долу ...

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

и можете да имате на следния линк за набиране навсякъде в тялото, или може да има този скрипт "onLoad", на самия документ ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <Една HREF = "JavaScript: loadNewScript (" myDynamicScript.js ");"> Зареди Dynamic Script </ 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" />

Повече За DOCTYPES:

Ако сте все още непознат с вид на животно, наречено "DOCTYPE" ... ето някои бързи прочетете
Какви са DOCTYPES? Какви са Браузър странности и ПЪЛНА режим?
Настройка на DOCTYPE в XSL

За по-задълбочено разбиране за DOCTYPES, опитайте да посетите тези връзки ...
A List Apart: да се определи вашия сайт с десния DOCTYPE!
A List Apart: Отвъд DOCTYPE: Уеб стандарти, Forward съвместимост и IE8

Забележка: Въпреки, че много от нас HTML / CSS хора са се пренебрегва значението на DOCTYPE decleration, в нашите документи, създаването на правилните DOCTYPE, обикновено е отговорът на по-голямата част от трансграничните проблеми на браузъра.

С разнообразието на въртележката там, много и за MooTools, аз все още реших да напиша моя клас тип "въртележка", за няколко добри причини
1. Исках функцията за виртуална памет (за да бъдем в състояние да скочи даден слайд / стъпка в тип "въртележка").
2. Искаха свобода с поставянето на левия и десния бутони / връзки, където и да се моля.
3. Повече контрол през слайдове стъпки.

Успяха да се създаде нов тип "въртележка", с посочените по-горе функции ..., както по-долу ... Чувствайте се свободни да предлагаме някакви промени, ще изискват!!!

Примера ми прилича на ... [ Виж Demo ]

Преглед на Демо | Download MooTools Въртележката С Пейджинг версия 1.0 (Свалено 1991 пъти)

1. Въртележката Пейджинг

Можете лесно да добавяте за виртуална памет на вашия тип "въртележка", просто чрез създаването на виртуалната памет, под чийто флаг плава корабът, който е миналата parater премина, докато създаването на копие на MooCarousel да е истина (искам виртуална памет) или невярно (, donot желанието за виртуална памет).

за Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно); / / NS = броя на кадрите, SSS = размер слайд стъпка

И разбира се можете да промените външния вид на N-усещане на тези пейджинг achors както ти е угодно, чрез модифициране на техните CSS.

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

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

Е! има малък проблем обаче, пейджинг котви ако е зададено, след това ще се генерира винаги след Carousel компонент. Исках да направя това динамично, както и, но след това само за да поддържат сценария за духа на пропорциите, реших да го пропуснете.
Но знаете ли малко Javascript, можете лесно биха могли да променят кода на поколение пейджинг в MooCarousel клас да се моля на вашите нужди.

2. Персонализиране на левия и десния икони

Можете да промените разположение, изображения или всеки displat собственост на левия и десен бутон просто играя наоколо с CSS. да бъде в състояние да променят разположенията на левия и десния buttoms е действителната причина за мен да ми право Въртележката нашия клас.
Тъй този MooCarousel клас, приема ID е от тези бутони, може действително да постави тези бутони навсякъде по страницата, ако обичате ... не трябва да бъде в йерархията елемента, тъй като в моя пример.

Var 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; поплавъка: ляво; курсора: показалка;}

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

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

3. Стъпки Персонализиране слайдове

Какво имам предвид МОИТЕ Персонализиране слайдове СТЪПКИ?
Повечето въртележки плъзна в пълна с видимата прозорец. Да предположим, че сте имали четири елемента (като в моя проба-горе), тя ще се плъзне всичките четири позиции. С този тип "въртележка" компонент, се преминава броя на кадрите и размера стъпка по ваш избор.

Var carousel1 = за нов MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, вярно);
c_ns = броя на кадрите, c_sss = размер слайд стъпка

Също така, в моя example1 аз calcuted размера пързалка стъпка, на базата на логиката, където, знам, че броя на елементите, ширината на всеки елемент и маржовете, които са дали след всеки елемент в моя CSS.

/ * За пиршество 1 * /

VAR c1_w = 92; / / пиршество Позиция Ширина

VAR c1_n = 10; / / общ брой на Сравнение пиршество позиции

Var c1_pp = 4 / / Брой на елементите пиршество perpage Сравнение

VAR c1_marginFactor = 51;

Var c1_sss = c1_w * c1_pp / / SSS = размер на слайд стъпка

Var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5); / / НЧ = брой на слайдове

c1_sss + = c1_marginFactor; / / SSS = пързалка стъпка, размер, 51 за маржовете

Изисквания: MooTools 1.2

Преглед на Демо | Download MooTools Въртележката С Пейджинг версия 1.0 (Свалено 1991 пъти)

MooRating е прост (кръстосана браузър, разбира се, тъй като използва силата на MooTools библиотеката), лек и отлично MooTools рейтинг решение. Тя не се обозначават като "звезди", просто защото изображението рейтинг може да бъде, колкото сте избрали съм предоставил звезди, Барове и сърцата с изтеглянето, но можете да създадете свой собствен разнообразие и просто да го пуснете.

Как изглежда така:

	Оценка на MooTools с различни изображения видите демонстрация
	Оценка на MooTools с процентни стойности видите демонстрация
	На MooTools Оценка Дробни стойности видите демонстрация

Изтегляне Mootols звезди Script (Свалено 718 пъти)

Рейтинг данни: цяло число, след десетичната запетая или процент
В момента сценария е предназначено да показва данни за кредитен рейтинг като цели стойности (1,2,3,4,5), в знак след десетичната запетая (1,24, 3,45 и т.н.) или в проценти (12%, 55% и т.н.). Изборът да показвате данни в някоя от споменатите формати могат да бъдат настроени просто чрез промяна на някои флага ценности в рамките на JavaScript (moorating.js)
Съществуват две електронни две знамена, за да играе с, за показване на стойности във формат по ваш избор ...

VAR inpercent = False; / / Задаване на знамето да е истина, ако имате нужда от процентни стойности, които да бъдат показани
VAR isFractional = FALSE / / Задайте това да е истина, ако искате част от ценности като 1,24, 1,25, 4,56, а от 1,2 ... 5

И аз не мисля, че има някакво обяснение, необходими за това. Нещо повече. Сценарият е много проста. Ако знаете малко javascripting, бихте могли да модифицирате скрипта, за да получите каквато и да е на показаната стойност. Защото например, ако искаш три знака след десетичната запетая, да се показва ... просто ощипвам скрипта по-долу ...

ако (isFractional) {ако (X <= 5 | | х> = 0) moostartval [I] innerHTML = formatNumber (X, 3);} / / 2 се променя до 3
друг {moostartval [I] innerHTML = Math.round (X).

Актуализиране Оценка стойност:
Аз пристанище притеснявана да запише каквото и AJAX скриптове, за актуализиране на Оценки стойност, защото знам от моя опит, че не винаги възнамерява да актуализира Оценката най-скоро нещо като потребител проценти. Вие сте свободни да правите каквото си искате с номинална стойност, актуализирайте го използвате AJAX, или да го представи или скрита стойност за областта форма, да бъде представена с целия формуляр и т.н.

на функция updateRating (ID, рейтинг) {
/ / Предупреждение (ID + "," + рейтинг);
/ / Направете каквото е с рейтинг
}

Има функция в JavaScript, наречена "updateRating". Тази функция е преминал ID на Оценка Div, да се идентифицират по отношение на рейтингите (ако има повече от една рейтинги на страницата) бе актуализиран и стойността на рейтинг [updateRating (ID, рейтинг). Можете да изберете каквото искате с тези стойности, както споменах по-рано.

Рейтинг на снимката: звезди, сърца, барове или каквото ви моля
Промяна на рейтинг на някоя от горепосочените видове (звезди, сърца и т.н.) е много проста. Просто създайте изображение, подобно на един и да го пуснете инча Не забравяйте, ако промените името на изображението, не направи необходимите промени в CSS файла, виж по-долу.

. Moostar {марж: 0px; подложка: 0px; препълване: скрит, широчина: 84px; височина: 20px; поплавъка: ляво; фон: URL ("stars.gif") многократно х;}
Moostar педя {поплавъка: ляво; марж: 0px; подложка: 0px; дисплей: блок; ширина: 84px; височина: 20px; текстови декорация: няма; текст-indent:-9000px; Z-индекс: 20;}
Moostar Curr {фон: URL ("stars.gif"), оставяли 25px;}

Повечето джаджи рейтинги използват звезда и половин-звездни изображения с мишката над събитията на всяка звезда. Moo Оценки използва проста Sprite изображението като фоново изображение, за постигане на необходимите визуални ефекти с много ниски режийни.

Изисквания: MooTools 1.2
Изтегляне Mootols звезди Script (Свалено 718 пъти)

Във Firefox ... Понякога може да сте забелязали, че курсора на екрана започва да мига. Тя може да се случи, когато щракнете върху всеки елемент на страницата, разделяне или изображение и др. Това мигащия курсор в прозореца на браузъра всъщност е достъпността характеристика на FireFox, наречен "каретата сърфиранията". Тази функция позволява /, дава възможност на потребителите да изберете текст на страницата с клавиатурата (които обикновено са склонни да направят с използването на нашата мишката).

Е! ако donot искате ... просто натиснете "F7", за да го включите с неверни и обратно (ако го искате ON) тази функция. Вие също може да напишете "за: конфиг" в адресната лента (тип в "каретата" в полето на филтъра) и просто да щракнете два пъти да се промени опцията "accessibility.browsewithcaret", от "истинска" (Включете каретата разглеждате) "фалшиви (Включете каретата браузване OFF)

Търси за двойна тушира ​​плъзгач (слайдер с две копчета, минимален и максимален), като се използва MooTools. Въпреки, че открих няколко добре свършената двойно тушира ​​плъзгача в форум MooTools, единственият проблем е, че всички тези плъзгачи удар избрания маркер кръг,. Най-накрая! Реших да създам мой собствен. Е! Направих се използва оригиналния код и да го промените, за да има слайдер фон, че диапазона избра визуално, като в моя пример по-долу. Сините области показва, избран от порядъка на стойността.

Вижте Версия 2.2 Демо | Изтегли MooTools Двойна Важна Slider Версия 2.2 (Свалено 11727 пъти)

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

Да ме оставиш коментар, ако откриете, че е полезно.

Преди трябваше да се справим с CSS да се създаде нашата страница оформления, привеждане на част от съдържанието вътре в клетката на таблицата изглежда просто детето игра. Просто настройте "Подравняване" или "valign", собственост на масата, за да има привеждане в съответствие на вашия избор, парче от тортата!
С оформления на СГО, че имаме "вертикална-align" имот за елементите, тя не изглежда да е толкова просто като "Подравняване" или "valign" свойства. За да бъде по-specifiic "вертикална-align" никога не изглежда да решат вашите проблеми, особено ако се напише парче от кръста браузър CSS.

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

Въпреки че има известни никакви правилно решение, че ще работи в целия диапазон от браузъри, ние трябва да се справят с решение, че съм опитал да стигне до прави изглежда да работят в няколко браузъри, които са опитвали в (IE6, IE 7 , FF).

РЕШЕНИЕ:
В браузъри като Mozilla, Opera и Safari, странно поведение "вертикална-align" собственост може да бъде доведен до сетивата си, просто чрез създаване собственост на "Дисплей", съдържащи разделение "Таблица клетка" (показване на маса клетка) .

Проблемът все още остава с 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>

Резултатът изглежда така: -

Вижте демото тук | Изтегли изходни файлове (Свалено 452 пъти)

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 от горния разтвор тук (Свалено 452 пъти) ... за разбираемост, CSS не се е оптимизиран

PS: И между другото, това са миниатюри на някои картини, които са кликнали върху ...