Цодепал

Постс таггед 'како'

Креирање Неон блинк ефекат за обрасце помоћу ЦСС3 и јКуери

Субота, јули 17тх, 2010

Па захваљујући светле нови клинац у блоку, ЦСС3, спруцед са мало јКуери, ја ћу вам показати како да направите диван ефекат како би унапредили Ваше форме.

Сигуран сам да је кул НЕОН трепнути ефекте у овој форми су идући да буде корисно за многе сврхе, тако да не пропустите мој туториал о 1стВебДесигнер.цом .

У овом упутству, ми смо користили @-ВебКит-Кеифрамес који ради само у прегледачима користи ВебКит распоред мотора као што су Цхроме и Сафари. За прегледачима као што Фирефок и Опера, где не постоји алтернатива, ми ћемо морати да достојанствено деградира ефекат, који у овом случају ће бити само кутија, сенку на фокус. Интернет Експлорер (до верзије 8) не може да пружи највећи део онога што ћемо овде научити, али ИЕ 9 изгледа да се врло обећавајуће од онога што сам видео у последње платформе преглед.

Тагс: ЦСС 3 , развоја , облици , како , јКуери
Објављено у Туториали | 2 Коментари »

Како да креирате Топ слиде оут табла са ЦСС3 само

Мондаи, Јули 5тх, 2010

Сам написао туториал за 1ствебдесигнер.цом је о томе како да користите ЦСС3 за постизање циљева који су једино могуће помоћу ЈаваСцрипт библиотека као јКуери и Моотоолс. У овом упутству, ми стварамо слајд из претплатити панела.

Када гледалац лебди над претплатити дугме у горњем десном углу, цео скривене панел ће се спуштању са веома глатке анимације ефекат открива претплате опције за посетиоце. Све то ће бити учињено код праведан помоћу ЦСС3.

Не пропустите моје упутство за 1стВебДесигнер.цом ако желите да заобиђе коришћењем ЈаваСцрипт за постизање овог кул клизне ефекат.

Тагс: кодирање , ЦСС 3 , развој , како , упутство
Објављено у Туториали | 2 Коментари »

Зачинити свој Туиттер Феед Приказ Бокс Коришћење ЦСС

Петак, 23. октобар 2009

За дуго времена сада је дошло до овог тренда приказа туеетс на Сидебар веб сајта, или подножје заглавље. Многи дизајнери су осмислили ингениозан начина приказивања туеетс стварањем лепе атрактивне илустрације које садрже њих. Основни циљ што их визуелно атрактиван, тако да посетиоци могу да се занимам и прочитајте свеже исправке које локације власник пружа. Шта је ово туториал ће да урадите је да омогући да вас како би ваш цвркут оквир фид приказује интерактивне, тако да ваши посетиоци ићи 'Вау! То је прилично кул када посете Ваш сајт или чита фидове. Дакле, овде то иде:

Корак 1. Како да убацим феед на мом сајту?

Убацивање хране ваш цвркут рачун у вашој веб локацији може постати лукав. То је добра ствар што постоји толико много туториали вани који вам пружи знање о убацивању те канале једноставно. Овде су неке ресурсе који ће вам омогућити да добијете из цвркут фидове на ваш лични сајт:

1. Пројектовање Јединствене страницу за Туиттер Упдатес
2. 10 Ауесоме Начини за интеграцију Туиттер са ваше веб локације
3. Цвркут!

Уордпресс корисници могу да користе неке Ауесоме плугинс да се њихов цвркут феед на њиховом сајту:

1. 35 Туиттер Ауесоме Плугинс за Уордпресс
2. Јуиттер
3. јКуери Плугин за Туиттер

2. корак. Стварање слика дух.

Сада када сте успешно научила како да се увоз хране цвркут, време је да конфигуришете подручје екрана. За овај туториал, ја одлазим, да користе исти дизајн за цвркут оквир као што сам се у подножју, односно овог сајта је цвркут птица буље у туеетс.

Шта наш примарни циљ је да кад год корисник лебдјети над кутија цвркут феед, нека акција ће се одржати. У нашем случају цвркут птица ће изгледати према кориснику.

Можете да креирате решења као што је овај коришћењем различитих цвркут икона од стране неких дивно дизајнере који воле да деле свој рад са веб заједницу. Овде је крајњи извор за ове иконе.

100 + Изузетно Беаутифул Туиттер иконе и дугмад (Увек имајте на уму да захтева дизајнер пре него што користите ове иконе.)
Бесплатне векторске скуп икона које ПродуцтивеДреамс.цом

Користио сам икона од стране ПродуцтивеДреамс. Након што креирате једноставан оквир у Пхотосхоп. Поставите нормалан икону цвркут птица, тј онај са крстом Пресек птица, на дну десне стране оквира тако да птица, како се чини у потрази унутар кутије. Сада налепите друге икону цвркут птица, онај који чини да се гледа у правцу посматрача.

Затим притисните икону птица нагнут над старијим икону коју сте поставили у доњем десном углу оквира тако да изгледа као двоглави цвркут птица као што је приказано у наставку

Сада сакриј помери икону цвркут птица и правилно означити квадрат са нормалним цвркут птица помоћу упутства. Уверите се да су нагнуте и нормалан птица стане правилно у истом тргу од стране смернице.

Цроп слике са нормалним икону цвркут птица уз смернице и отворите нову датотеку и налепите га тамо. Затим проверите висину ошишан слику и повећати величину платну тај износ вертикално. То је учињено тако да можете да налепите помери верзија цвркут птица на истом платну дати коначни дотакне на слику дух.

Сакриј икону цвркут птица нормално и да других птица нагнут видљив. Затим исечете поново заједно упутства као што сте учинили за претходну слику. Копирање слике и налепите га на новонастале платну где сте налепили друге слике. Прилагодите слике тако да правилно опреми целу платну. Ваш дух слика је спремна за употребу и треба да изгледа овако:

3. корак. Кодирање птица на живот!

Хтмл костур из кутије цвркут феед је идући да буде једноставна. Ту ће бити главни контејнер див са цвркут феед, птица и опциони "пођи за мном" линк.

 &лт; див ид = &куот; &гт; &куот; цвркут
	 &лт; а хреф = &куот; хттп://твиттер.цом/СумеетЦхавла&куот; ид = &куот; цвркут-линк &куот; &гт; &лт; за мном / & ГТ! ;
	 &лт; див ид = &куот; цвркут птица &куот; &гт; &лт; / див &гт;
	 &лт; - Ваш Туиттер Феед! долази овде - &гт;
 &лт; / див &гт;

контејнер див ЦСС '# цвркут "је врло једноставна. '# Цвркут птица' див ће да садржи птица. То би требало да има половину висине оригиналне дух ми је јер је само једна од две слике у дух ће бити приказани. Помоћу ЦСС спритес је добра пракса, јер смањује серверу захтеве, дакле смањује време учитавања и спречава нагли трепери од слика када лебдела по први пут.

Цвркут птица див би требало да су летјели са десне стране и негативне маргине треба да буду додељене тако да птица, како се чини оно што неки ван контејнер див. Направите позадину позицију 'врх', тако да је нормална цвркут птица се приказује. Да би завршавао се на наш оквир цвркут феед, само на промену става позадинску слику за 'цвркут птица' див у 'дну' кад год корисник лебди над контејнер див.

 # Цвркут (цолор: # 658097; поситион: релативе; ширина 332пк, висина 122пк; бацкгроунд-цолор: # 1ф1ф1ф; бордер: 1пк солид # 414040; бацкгроунд-поситион: левом доњем, бацкгроунд-репеат: но-репеат; Размак -лефт: 10пк; паддинг-топ: 10пк;) # цвркут птица (бацкгроунд-имаге: урл ('имагес / твиттер.јпг'); бацкгроунд-поситион: топ; поситион: релативе; флоат: ригхт; маргин-топ: 32пк; маргин-ригхт: 75пк-, ширина 101пк, висина 100пк; бацкгроунд-репеат: но-репеат;) # цвркут: ховер # цвркут птица (бацкгроунд-поситион: боттом;) 

Да бисте видели како крајњи резултат ће изгледати, само идите доле до подножја на дну ове странице.

Примери

Гопал Рају из ПродуцтивеДреамс је направио свој цвркут феед изгледају врло живахно и светла. Цвркут птица је интерактиван у врло пријатељски и цасуал начин. То уинкс и приказује укупан број следбеника да је има.

Пре Лебдећи:

После ховер:

Ово је једини сајт који сам могао наћи која је цвркут феед пољу интерактивне. Ако ви нађете било који други сајт који прати овај тренд само пост о томе на коментар и ја ћу сигурно да га додате овде.

Тагс: ЦСС , екран хранити , хранити , како , дух , Туиттер
Постед ин Блог , Туториали | 14 Коментара »

Како да број који се преклапају картица Главни мени

Среда, октобар 14тх, 2009

Постоје различите стилове и технике израде картица навигацију менија и један од њих је картица обложени или преклопљени стила у којој је сваки наслов, како се чини лежи над другим и тиме даје цео мени веома реалан осећај. Док пројектовање мој сајт, ја сам прошао кроз пуно инспирација и туториали. Један од њих је овај туториал се зове Пхотосхоп Папир текстуре од нуле онда Креирање грунги Веб дизајн са њом! Написао Цоллис из НетТутс.цом Ова завршио је главна инспирација за мој сајт и док пролази кроз туторијал сам нашао Цоллис рекавши да:

"Сада, ако ја кажем да сам ове картице изгледају одлично, и разлог зашто они то је зато што се преклапају. Нажалост, то такође чини да је теже радити са ХТМЛ-у. Можете међутим да урадите разне ствари са транспарентним ПНГс, или наизменично само направите промену боје текста у ролловерс и не брините о промени картицу боје. У сваком случају ово је све мало изван опсега овог туториал. Довољно је рећи да је мени можда мало проблематично за изградњу. "

Па сам покушао кодирање једног у хтмл и после сам следећи мисао то дељење са свима вама.

Корак 1.Геаринг Горе

Дакле, пре него што почнете да код ове врсте картица навигацију у хтмл / цсс код, прво морате да научите како да креирате један у Пхотосхоп први. Горе туториал је врло детаљна и Цоллис не велики посао у настави како да направите што мени у Пхотосхоп. су изградили сам један једноставан један специјално за овај уџбеник.

Сада ћемо ми одредити да постоје три државе таб.Тхе неактивних држава сивкасто у боји, активно стање је дубоко плаво и лебдети држава је светло плаве боје челика. Дакле, уместо сјечење до три слике за сваку картицу, можемо исечак из слике дух.

2. корак. Одсецање Картице из ПСД

Поравнајте језичке вертикално помоћу мреже као што је приказано на слици изнад. Такође можете да поравнате картица хоризонтално него вертикално, али онда у ЦСС позадинску слику позиција ће се приступити на другачији начин. Избор зависи од особе до особе, али оба раде савршено. Док опсецање слика пратите правилно смернице и имајте на уму да сам направио позадине транспарентан, јер ћемо бити потребна транспарентна позадина, ако треба да се преклапају картице. Исеци слику и сачувајте је за веб у ПНГ24 формату. Још једна тачка на уму док сечење горе слика је да је прва картица, односно 'Хоме' на картици не би требало да има било какве сенке на левој ивици у неактивно стање. Дакле, за дату картицу морамо да креирате други дух без сенке на њему.

3. корак. Код Ауаи

Сада је наш сечење је комплетна и имамо све потребне слике можемо да почнемо кодирање наше траци за навигацију. Само да би пример изгледа добро, ја сам изградио узорак Феатуред цонтент подручју распоред са преклопљени траци за навигацију. Цео распоред изгледа овако:

 <ДОЦТИПЕ хтмл ПУБЛИЦ "- /! / В3Ц / / ДТД КСХТМЛ 1.0 Транситионал / / ЕН" "хттп://ввв.в3.орг/ТР/кхтмл1/ДТД/кхтмл1-транситионал.дтд">
 <ХТМЛ кмлнс="хттп://ввв.в3.орг/1999/кхтмл">

 <хеад>
 <мета цонтент="тект/хтмл; цхарсет=утф-8" хттп-екуив="Цонтент-Типе" />
 <линк хреф="цсс/стилес.цсс" рел="стилесхеет" типе="тект/цсс" />
 </ Хеад>

 <боди>
	 <див ид="паге-врап">
		 <ул ид="маин-нав">
			 <ли цласс="цуррент"> <а Хреф="индек.хтмл"> Почетна </ а> </ п>
			 <ли цласс="портфолио"> <а хреф="портфолио.хтмл"> портфолио </ а> </ п>
			 <ли цласс="сервицес"> <а хреф="сервицес.хтмл"> Услуге </ а> </ п>
			 <ли цласс="абоут"> <а Хреф="абоут.хтмл"> О нама </ а> </ п>
			 <ли цласс="цонтацт"> <а хреф="цонтацт.хтмл"> Контакт </ а> </ п>
		 </ Ул>
		 <див цласс="цлеар"> </ див>
		 <див ид="феатуред">
			 <див ид="феатуред-цонтент">
			 </ Див>
		 </ Див>
	 </ Див>
 </ Боди>

 </ Хтмл>

Омогућава поглед на нашу главну навигацију менија. Имам користи једноставан несређене листе као и сваки други траци за навигацију и стилизовани помоћу позадинску слику на хипервезу таг листе је.

 <ул ид="маин-нав">
	 <ли цласс="цуррент"> <а Хреф="индек.хтмл"> Почетна </ а> </ п>
	 <ли цласс="портфолио"> <а хреф="портфолио.хтмл"> портфолио </ а> </ п>
	 <ли цласс="сервицес"> <а хреф="сервицес.хтмл"> Услуге </ а> </ п>
	 <ли цласс="абоут"> <а Хреф="абоут.хтмл"> О нама </ а> </ п>
	 <ли цласс="цонтацт"> <а хреф="цонтацт.хтмл"> Контакт </ а> </ п>
 </ Ул>

 ул # нав ли главна-(
	 флоат: лефт;
	 поситион: релативе;
	 дисплаи: инлине;
 )

Сетите се да смо помоћу слика дух за картице у којој врху највише картици представља активно стање, на средини представља неактивно стање и дну представља лебдети државе. Дакле, ми ћемо користити "бацкгроунд-поситион 'имовине исправно место за слике њихових држава као што следи:

 ул # нав ли главна-(
	 поситион: релативе;
	 видтх: 110пк;
	 висина: 29пк;
	 дисплаи: блоцк;
	 бацкгроунд-имаге: урл ('../ слике / табс.пнг ');
	 бацкгроунд-поситион: центер центер;
	 цолор: # 44403б;
	 тект-децоратион: ноне;
	 фонт-сизе: 14пк;
	 паддинг-топ: 12пк;
	 тект-алигн: лефт;
	 паддинг-лефт: 30пк;
	 фонт-веигхт: болд;
 )
 ул # нав-главни ли.хоме (
	 бацкгроунд-имаге: урл ('../ слике / картицу-хоме.пнг ');
 )
 ул # нав-главни ли.цуррент (
	 бацкгроунд-поситион: топ;
	 цолор: # фффффф;
 )
 ул # нав ли главни-а: ховер (
	 бацкгроунд-поситион: боттом;
	 цолор: # фффффф;
 )
 ул # нав-главни ли.цуррент а: ховер (
	 бацкгроунд-поситион: топ; / * Да бисте спречили да тренутне картицу са променом боје на лебдети * /
	 цолор: # фффффф;
 )

Ћете приметити да сам дао одговарајуће класе за сваку од листе елемената и класе под називом 'струја' на картици који је за тренутну страницу. То је учинио да могу да доделите различите з-индек вредности сваке картице у растућем редоследу тако да свакој картици се налази на вишем з-осе у односу на картицу након тога. Картицу са класе "тренутни" лаже и на највишем налогу з-осе, јер представља тренутну страницу и увек ће остати на врху, без обзира на своје позиције на листи. Пре наношења з-вредности индекса, уверите се да је положај атрибут за листу елемент је постављено релативно. Без икаквих позиционирања вредности з-индек имовине неће радити уопште.

 ул # нав-главни ли.цуррент (
	 з-индек: 100;
 )
 ул # нав-главни ли.хоме (
	 з-индек: 100;
 )
 ул # нав-главни ли.портфолио (
	 з-индек: 99;
 )
 ул # нав-главни ли.сервицес (
	 з-индек: 98;
 )
 ул # нав-главни ли.абоут (
	 з-индек: 97;
 )
 ул # нав-главни ли.цонтацт (
	 з-индек: 96;
 )

Иако смо додељене различите з-индек вредности картице, они још увек не појављују преко одушевљено примили и да ће изгледати овако:

Да би завршавао на наше траци за навигацију, ми смо гурнути свакој картици на врху друге. су додељене смо з-индек вредности у опадајућем редоследу с лева на десно. Дакле, ми ћемо само гурнути свакој картици, почев од права на око 20пк са леве стране додавањем негативних "маргин-лефт" имовине "ул # нав ли главних и притисни целу траку навигацију несређене листе са леве стране додајући позитиван 20пк "маргин-лефт 'да поништи леве одељења кретање траке.

 ул # нав (главни-
	 маргин-лефт: 20пк;
 )
 ул # нав ли главна-(
	 флоат: лефт;
	 поситион: релативе;
	 маргин-лефт:-20пк;
	 дисплаи: инлине;
 )

Мисија Остварени

Након склапања заједно све ЦСС и КСХТМЛ, ми ћемо имати наш преклапали картицама главном менију за навигацију спреман за употребу. То је био мој се о томе како да креирате ову врсту менија и сигуран сам постоји много боље начине да учине исто. Биће ми драго ако би могао делити било који други начин да се ово уради, или једноставно разговарају нека побољшања са овим сама процедура.
Овде су неке странице које користе преко преклапање картице као главни мени за навигацију:
ИЛове2Десигн.ат
ХидденДептх.ие
ХотЦардс.цом

Тагс: ЦСС , како , мени , навигација , преко одушевљено примили
Постед ин Блог , Туториали | 34 Коментара »