Сред ползите рядко дискутирани CSS-за наслагване на фонови изображения за постигане на различни ефекти. В съответствие с CSS2 стандарт за всяка фоново изображение изисква отделен HTML елемент. В повечето случаи, един типичен код, който описва общи компоненти на интерфейса, ни предоставя множество HTML елементи.
Един такъв случай раздели за навигация базирани. Това е време, за да си върне контрола над разделите, популярността на която се разраства като основно средство за навигация. И сега, благодарение на широка подкрепа за CSS можем да подобрим качеството и външния вид на разделите на нашия сайт. Може би вече знаете, че CSS може да се използва за "опитомяване" прост неподреден списък. Може да сте виждали дори списъци проектирани под формата на табове, които изглеждат така:
Какво става, ако можем да вземем кода точно в предишния пример и включване на раздели в нещо като това:
С помощта на възможно просто CSSeto.
Какво е иновация?
Много от CSS-срещнат моите отметки на (отметки, основани на CSS) страдат от монотонността на своя дизайн: цветни правоъгълници, вероятно инсулт, в раздела ток не е инсулт, цветът се променя за състоянието на задържане на курсора. Наистина ли е всичко, което може да ни предложи CSS? Няколко кутии с един цвят попълват?
Преди CSS е широко приета в дизайна на навигационната много нови идеи: странни форми, умни преходи на цвят, симулира реалния свят интерфейси. Този дизайн, обаче, разчита основно на сложни структури на разложено текста и с многото вградени таблици. Редактиране на текст или смяна на отметки последователности разположение са тромави афера. Мащабиране на текст е невъзможно или води до сериозни проблеми в състава на страницата.
Навигация на обикновен текст е лесно да редактирате и зареди много по-бързо, отколкото навигацията на базата на разложено текста. В допълнение, въпреки че можем да добавим н атрибут за всяко изображение, текст, още повече публично достояние, тъй като тя може да се мащабира. Не е изненадващо, че навигацията е базиран на обикновен текст се връща на уеб дизайна. Въпреки това, появата на CSS-отметките още една стъпка назад в дизайна, и със сигурност не на факта, че можете да се включите в дизайна на портфейл. Новите технологии (например, CSS) трябва да позволяват да се създаде нещо по-добро и с едно и също качество на дизайн, който позволява употребата на таблици и отметки, основани на растерни изображения.
Методът на "плъзгащи врати"
Ние можем да създадем един красив, наистина гъвкав интерфейс компоненти, които се разширяват и свиват в зависимост от големината на текста, като се използват две отделни фонови изображения. Една от лявата страна на раздела, а другият-надясно. Представете си, че тази двойка картини, плъзгащи се врати, затваряне на врата. Тези врати са изместени и се припокриват повече, ако вратата е тесен, както и обратното, се движат един от друг и да се припокриват по-малко, ако искате да се затвори по-голям пространство. Това е показано на илюстрацията:
В този модел, едно изображение обхваща част от друг. Ако приемем, че по краищата на нашите снимки са нещо уникално, като заоблени отметките от корнер, ние не би искал, че една картина е напълно закрита от друг, който се намира зад себе си. За да избегнете това, ние ще направим отпред (в този случай отляво) картината възможно най-тясна. Но тази картина трябва да бъде достатъчно широко, за да се защитят видно своята уникалност. В нашия случай са уникални със заоблени ъгли, така че предната част е снимка с ширина от закръглената част от изображението:
Ако размерът на раздела ще се увеличи в резултат на, например, мащабиране на текста, нашите снимки ще се разпръснат към страните, разкривайки един неприятен почивка. Поради това е необходимо да се оцени степента на разширяване на приемливо. Колко може да се увеличи на обекта и когато промените размера на текста в браузъра? Наистина трябва да разчита на възможността за увеличаване до 300%. , Трябва да се простират на фоновото изображение, за да компенсира това увеличение. В нашия пример, ние ще направим обратно изображение (отдясно) с размер 400h150 пиксела, както и предния 9h150 пикселите.
Не забравяйте, че фоновото изображение се вижда само в "врата" елемент, към който те се прилагат ( "врата" + -региони съдържание отстъп). И двете от нашите снимки са приложени към външните ъгли на съответните им елементи. Видими части от тези изображения се комбинират в формата на отваряне на вратата и форма раздели:
Когато раздела се увеличава, изображението освен, запълване на по-широк вход, с видими изображения са също стават по-големи:
Същите нужно да се направи, и с ярка картина за текущия раздел. По този начин получаване на всички 4 изображения (1, 2, 3, 4), можем да започнем да генерираме кода и CSS за нашите раздели.
Както проучи създаването на хоризонтални списъци с CSS, ще забележите, най-малко два начина да се позиционират на група от обекти, в един ред. Всяка от тях има своите предимства и недостатъци. И двете изискват прибягването до доста сложни аспекти на CSS, в резултат на това можете бързо да се объркват. Първият метод се използват вградени елементи, втората плувка собственост.
Първият начин е вероятно по-често, включва промяна на свойствата на дисплея на «инлайн» (линия). метод "Пътека" е привлекателна в своята простота. Въпреки това, тя води до проблеми при прилагането на метода Плъзгащи нашите врати в някои браузъри. Вторият начин, по който можем да съсредоточим вниманието си, използва модел за изграждане на плаващи елементи от списъка в хоризонтален ред. Плаващ модел, обаче, също така може да бъде разочароващ. Това понякога е противоречива поведение нарушава всички възможни логика. И все пак едно общо разбиране за това как да се справят с няколко плаващи елементи и познаване на надеждни начини за "излизане" от няколко плаващи (или задържането му в контейнер) може да направи чудеса.
Ние ще се опитаме да се поставят няколко плаващи елементи плаващи в друг контейнер елемент. Това трябва да се направи така, че външната родител плаващия елемент е напълно заобиколен от вътрешни плаващи елементи. След това можем да добавим зад нашия раздели фонов цвят или фоново изображение. Важно е да се помни, че ситуацията след разделите елемент трябва да се възстанови с помощта на CSS имоти ясни. Тогава плаващ раздела няма да се отрази на мястото на другите елементи на страницата.
Започваме със следния код:
На практика #header единица може да включва например, има формата на лого и търсене. В нашия пример, ние ще се намали HREF стойност за всяка препратка към "#". Ясно е, че в реалния живот, вместо иконата ще бъде пътят до файла или папката.
Нека да започнем с CSS свойства, за да зададете поплавък #header контейнер. Това гарантира, че контейнерът е всъщност "задържане" на елементите на списъка, което също ще полетя. Тъй като ние направихме #header плаващ, ние трябва да го зададете ширина от 100%. Ние също така ще добави временна жълт фон, за да се уверите, че майка елемент се простира по цялата ширина зад разделите. И най-накрая, да зададете няколко основни свойства на шрифтовете, за да се гарантира единството на външния вид на елементите:
#header #Current на
По този начин, ние имаме един пример 4. Обърнете внимание, че сме взели за създаване на прозрачни ъгли стъпала водеха до малка "мъртва" зона в лявата част на страницата, когато не отговарят на мишката върху. Мъртвата зона е извън текста, но тя все още се забелязва. Прозрачни изображения за всяка страна на нашия употреба раздели не е задължително. Ако ние не избираме да бъдем в раздела ни "мъртви" сайт, само трябва да използвате плътно запълване зад разделите, вместо градиент, и да направи отметки краища на един и същи цвят. В същото време, ние ще се запази прозрачността на ъглите. [В IE / Win каза "мъртва" зона е съществувала преди предприетите стъпки, и от всички страни на текста на връзката. Решението на този проблем е описано в следната статия SlidingDoorsofCSS поредицата, PartII.-ок. преводач]
И накрая, последните щрихи. Изведнъж: направи целия текст чер, текста на разделите на конвенционален кафяво, и текущата-тъмно сиво, със същия цвят на текста, за да зададете състоянието на връзките Hover, премахване на подчертаването на връзки. Всички направени от този момент допълнения и модификации са представени в Пример 5.
Друг метод за осигуряване на съвместимост
Вземем примера 2, ние призна проблем с IE5 / Mac, който протегна се случва на цялата ширина на прозореца, да ги изграждаме вертикално една под друга. Не е точно ефекта, които търсим.
В повечето браузъри на имоти за кандидатстване плава елемент предполага компресия му до минималния размер, определен от неговото съдържание. Ако плаващ елемент съдържа картинка (или самата снимка е), тя ще се свие до ширината на изображението. Ако тя съдържа само текст, той ще се свие до ширината на най-дългия ред от текста, който не съдържа тирета.
Проблеми възникват в IE5 / Mac, когато блоков елемент с автоматично ширина се поставя вътре плаващ елемент. В този случай, всички браузъри плаващи елемент е компресиран до най-малката възможна ширина, без да обръща внимание на вътрешния блок парче. Но IE5 / Mac в тази ситуация не е така. Вместо това, тя се разширява поплавъка и блокиране на вътрешните елементи на цялата налична ширина. За да избегнете този проблем, ние трябва да се прилага по отношение на поплавъка също да се свържат, но само за IE5 / Mac, без да засяга други браузъри. Първо, добавете поплавък на съществуващо правило. След това нанесете "метода наклонена черта", за да се скрие от IE5 / Mac ново правило, което премахва поплавъка за всички останали браузъри:
никой не се повтаря горния десен;
подложка: 5px 15px 4px 6px;
/ * Коментирани Обратно наклонена черта Hack
скрива правило от IE5-Mac \ * /
/ * Край IE5-Mac проникна * /
В съответствие с пример 6 IE5 / Mac сега показва маркери, както се очаква. За други браузъри, нищо не се е променило. IE5 / Mac съдържа голям брой на CSS-бъгове, които са фиксирани във версия IE5.1. От тези грешки в IE5 / Mac страда и метода на "плъзгащи се врати." Техният брой е над всички възможни граници, и аз няма да се справят с тях. И тъй като ъпгрейд до 5.1 за доста дълго време, тя е достъпна за всеки, процентът на Mac COS 9 инсталиран и IE5 / Mac постоянно намалява и е близо до нула.
Ние просто щателно разследване на метода на "плъзгащи се врати", която ви позволява да създадете оформление, с помощта на неподреден списък и връзките и модифицирана с няколко правила, CSS с раздели навигация посредством елементарен текст. Тази навигация е бързо да се зареди, лесно да се подкрепят, а текстът в него може да бъде значително намалено във всяка посока, без да нарушава дизайна. Излишно е да казвам, колко гъвкав е този метод при създаването на всеки сложен изглеждащи навигация?
Използването на тази техника е ограничено само от въображението. Крайният пример илюстрира само едно изпълнение. Но този пример не трябва да се ограничи нашите идеи.
Чрез прилагане на техника и други ефекти, които не смятаме, че тук може да се добави. В нашия пример, ние променихме цвета на текста за изскачащата статус, но защо да не промените фоновото изображение за цялото интересни преобръщане ефекти. Ако има код на два вложени HTML елементи ние винаги може да използва CSS за наслагване на фонови изображения и предизвика ефекти, които никога не сме мечтали. В нашия пример, ние сме създали хоризонтален ред от разделите, но методът Плъзгащи се врати може да се използва и в много други случаи. Какво е използването на този метод предлагаш?
Всички материали в "информатиката и програмирането"
Свързани статии