28 изключителни примера за CSS
Удивително е какво може да се направи с CSS в наши дни. Поддръжката на най-новите CSS3 свойства е силна в най-новите версии на всички основни браузъри - дори Internet Explorer - и възможностите за типография, анимация и интерактивността никога не е била по-голяма. Но намирането на вдъхновение за уеб дизайн може да бъде сложно.
В основата си тайната на страхотния уебсайт не е свързана с показването с хлъзгави визуализации и функции за бърз взрив, а се състои в създаването на страхотно изживяване за потребителите чрез оформление и навигация, които ги водят до мястото, където искат да отидат бързо и без усилие. Въпреки това, ако може да изглежда и красиво, това е черешката на тортата.
Тук изброяваме 28 чудесни примера за CSS сайтове, които ще осигурят вдъхновение от уеб дизайн. CSS също е чудесен за добавяне на движение към вашите сайтове - разгледайте нашето ръководство за Примери за CSS анимация и как да ги пресъздадете за някои указатели.
01. Тип Условия
Type Terms е анимиран мамят, създаден от екипа на Supremo, агенция за уеб дизайн в Манчестър. След като извършиха някои изследвания, те откриха, че повечето съществуващи онлайн данни за типографската терминология използват прости статични изображения. Екипът търсеше причина да експериментира със SVG и CSS анимация и това беше идеалната възможност.
„Реших да създам нещо, което е по-привлекателно визуално, което ще помогне на новите дизайнери да научат всички ключови типографски термини за миг“, казва дизайнерът Дан Хейууд.
Екипът подчертава значението на дизайнерите, които добре разбират типографията. За тези, които изучават правилата за първи път, или за опитни дизайнери, нуждаещи се от опресняване, тази таблица е едновременно образователна и удоволствие за изследване. Съдържанието е фокусирано, информацията е ясна, а анимациите са гладко гладки. Погледнете и впечатлете приятелите си дизайнери с вашия речник на типографията.
02. MIT Technology Review
MIT Technology Review, 117-годишна публикация, която обхваща технологиите по начин, който всеки може да разбере, беше възобновена по-рано това лято от дизайнерското студио в Бостън Upstatement. „Ние сме супер фенове на Tech Review, така че когато Ерик Пелетие [вицепрезидент на продукта] се обърна към нас, за да работим на сайта, бяхме одухотворени“, казва Майк Суорц, партньор в Upstatement.
В наши дни е необичайно да видите уебсайта на изданието, който не е проектиран толкова силно около изображения, така че е освежаващо, когато за първи път стигнете до изчистения, привидно вдъхновен от Швейцария дизайн на Tech Review. „Наистина искахме да уловим духа и душата на Tech Review със системата за дизайн на сайта и да създадем платно за творческите им ръководители,“ казва Суорц. „Креативният директор Тито Ботита и дизайнерският ръководител Нейтън Хас създадоха система, която трябва да демонстрира отлично изкуство и да бъде удоволствие за четене.“
Вместо да използва стандартната версия на Helvetica, която всички познаваме днес, сайтът включва Neue Haas Grotesk, оригиналната версия на Helvetica, която наистина движи модерното усещане. В съчетание с Miller Text за телесно копие, типографията се чувства класическа, но съвременна. Използването на изображения е обмислено, умишлено и позволява на типографията да блести.
03. BucketListly
BucketListly е общност, която има за цел да помогне на потребителите да отключват постижения в реалния живот, като вдъхновява другите да правят същото. Изградена с помощта на Ruby on Rails с HTML5, SCSS, CoffeeScript и jQuery, платформата има възможност да позволява на пътуващите и авантюристите да споделят своите истории с приятелите си в сайта, както и със свързаните си социални мрежи.
Когато потребител споделя история на BucketListly, платформата автоматично проследява какво, кога и къде е изпълнил тази житейска цел, като им позволява да печелят специални значки и да показват всички тези данни в красива времева линия и карта.
04. 96 Слонове
Базираната в САЩ Viget Labs създаде уеб опит с фокус върху осведомеността, за да привлече подкрепа за мисията на Обществото за опазване на дивата природа за защита на африканските слонове. Най-новата му кампания е 96 слона, така наречените, защото толкова много слонове се убиват всеки ден в Африка.
Образователното повествование е разказано чрез поредица от главни страници на една страница, всяка от които описва истинските усложнения в текущите усилия за прекратяване на незаконния акт на убиване на слонове заради бивните им. Въпреки основната цел да стимулира регистрациите за петиция, екипът на Viget свърши изкусна работа, като балансира непосредствеността, която вездесъщият призив за действие представя спрямо по-емоционално завладяващото, ориентирано към истории съдържание.
Отпред и в центъра е преследващата посока на изкуството, която ви принуждава да спрете и да се изправите срещу емоционалната мисия. Красивата фотография от край до край и оформление, подобно на списание, направиха усилието да го създаде реагиращо предизвикателство. Вместо да започне с работния плот, сайтът е създаден първо за мобилни устройства. Това позволи целенасочено да се обмислят дизайнерските решения за малки екрани, вместо да действат като разводнен прокси на работния плот.
05. Обединяване на записи
С групи като Arcade Fire, Superchunk и The Mountain Goats в списъка, Merge Records в Дърам, Северна Каролина, се обърна към местния дигитален партньор Новомоден да изгради опит от електронна търговия от световна класа, който да съответства на качеството на своите изпълнители.
Изграден върху NewfangledCMS, собствената PHP-базирана CMS на Newfangled, с HTML5 и CSS3, сайтът реагира прекрасно на различни размери на устройствата. Новата система вече е автоматизирана, за да гарантира, че всички активи на етикета са централно управлявани и достъпни. Крис Бътлър, новоизвестен главен оперативен директор, казва,
„Винаги, когато се добавя продукт, трябва да разберем как това съответства на част от физическия инвентар, който се намира в различна база данни, и как отчита част от дигиталния инвентар, който се намира в друга система. Трябваше да разберем тази логистика. С множество различни обаждания към база данни на всяка страница, редът на приоритет на данните беше важен, за да се получи правилно.
06. Пратеник
Пратеник , продукт, който се фокусира върху регистрацията на посетителите във вашия офис, предлага елегантен интерфейс, базиран на iPad, за събиране на имена, заснемане на подписи и отпечатване на значки за посетители на място. За уебсайта, който популяризира приложението, „основната цел беше да позволим на нашите клиенти да визуализират как техните собствени посетители могат да изпитат Envoy в техните офиси“, обяснява съоснователят и дизайнер Vítor Lourenço. „Решихме, че интерактивната демонстрация ще бъде най-визуално ангажиращият начин да се демонстрира това.“
За да постигне това, сайтът показва функционалността на приложението и състоянията на екрана на върха на макет на iPad. Докато превъртате сайта с една страница, състоянията се актуализират в демото. CSS преходите се използват за подпомагане на демонстрацията, подобрявайки преживяването, без никога да пречат на съдържанието.
„Прекарахме много часове, работейки върху малки детайли“, добавя съоснователят и инженер Лари Гадеа. „Харесва ни начинът, по който подписът на посетителя се очертава, когато превъртате покрай екрана NDA, или как значката на посетителя се отпечатва в края на потока.“
07. MoreSleep
MoreSleep , креативна агенция от Берлин, има смел сайт. „Нашата цел беше да покажем три проекта, които представляват нашата експертиза, вместо да покажем цялата работа, която сме свършили до момента“, казва техническият директор Торстен Берглер.
Големи стойности на размера на шрифта, спретнати ефекти на превъртане и тежка червена, контрастирана цветова схема правят този сайт да се откроява. „Уникалното е презентацията на работата: визуализиране на процеса на проектиране, насочване на посетителите през него и разказване на история за работата, която сме свършили“, казва ръководителят на арт направлението Стефан Шустер.
CSS преходите улесняват навигацията през страници и съдържание. Свойствата с размер на фона се използват за управление на мащабирането на изображения с различни размери. Дори формата за регистрация за бюлетин е оформена така, че да отговаря на изчистения външен вид и усещане.
08. Благодарен регистър
Благодарен регистър дава възможност на двойките да създадат уникален, персонализиран сватбен регистър от всякакви подаръци, които желаят, от всяка точка на интернет. Сайтът е създаден от Crush + Прекрасно ; Джеф Шрам и Майкъл Филипс от нейния екип искаха CSS да бъде толкова красив, колкото и дизайна. Отнеха време внимателно да планират своята SCSS структура за това приложение.
„В среда с много програмисти е изключително важно кодът да бъде организиран, лесно проходим и добре коментиран“, обяснява Филипс. Усилената работа показва естетиката на сайта със силна типография и големи, мощни изображения. Екипът не искаше да ги скрие в нито едно изгледно поле и да рискува да загуби тяхното значение.
„Създадохме отзивчива система, която се плъзга надолу по цялата страница, за да разкрие основните опции за навигация. Това ни позволи да се съсредоточим върху великолепните изображения и да предоставим на потребителите уникално отзивчиво изживяване “, казва Шрам.
09. Животът в моите обувки
Life In My Shoes е мощна мултиплатформена кампания, насочена към
млади хора, които предизвикват страха и неразбирането, които заобикалят ХИВ. Базираната в Лондон дигитална агенция Трафик беше запознат с разработването на уебсайт, който да се хареса на младежка аудитория.
Шрифтът на марката, Houshka Rounded Medium, е реализиран с помощта на шрифт, за да придаде на уебсайта свеж вид и усещане. Декоративните изображения и драматичните жълти акценти осигуряват привлекателна естетика.
Страницата „За нас“ включва оживен ефект на паралакс, който е настроен за таблети и смартфони. „Написахме медийна заявка за тези устройства, която променя прикачения фон от фиксиран на превъртане и задава отделните позиции на фона, така че изображенията да седят на правилното място“, обясни екипът на Traffic.
10. Само
Solo е универсален инструмент за управление на проекти, насочен към използване от фрийлансъри. Икономично и лесно за използване, приложението съчетава страхотна функционалност, използваемост и красив дизайн.
Сайтът, популяризиращ продукта, е пълен със страхотни CSS3. „Реших да използвам HTML5 и CSS3 от самото начало, обслужвайки само модерни уеб браузъри“, обяснява Джером Айвънсън , дизайнер на приложението. „Само три процента от посетителите на нашия сайт използват Internet Explorer. Тъй като изглежда, че целевият ни пазар не го използва, изглеждаше малко причина Соло да го подкрепи. '
Ще видите тези CSS правила в действие през целия дизайн, което прави управлението на проектите по-игриво с множество цветни сенки в CSS полета. Шрифтове като Clarendon и Bryant осигуряват приятен баланс на изтънченост и забавление.
Преоразмеряването на сайта или разглеждането му на мобилен телефон ви позволява да видите оформлението, адаптирано към различни размери на екрана и резолюции. „Много ми хареса да се забивам в медийните въпроси на нещата. Намирам това за много интересно от гледна точка на дизайна “, казва Айвсън.
единадесет. Функцията следва формуляра
Функцията следва формуляра (FFF) е красиво проектирана витрина на HTML5 и CSS експерименти от корейски разработчик Джонгмин Ким който работи като интерактивен разработчик в Първороден мултимедия в Ню Йорк.
Ким обяснява, че името на сайта му отразява целта му винаги да следва „минус дизайн, а не плюс дизайн“ и имайте предвид, че формата следва функцията. Той казва, че стилът му е минимален и използва златно сечение както и интересна типография. FFF беше създаден „за забавление“ и отне на Ким три седмици, включително да прекара почивката си, работейки върху него.
12. Нежно лудият
Нежно лудият е тематично-агностичен подкаст за създателите на уеб. Адам Кларк , умът зад него се отдръпна от традиционното оформление на блога, когато го проектира, за да създаде нещо с малко по-голямо въздействие.
Големият заглавен и добре проектиран списък с епизоди показва, че има личен щрих в този дизайн. Кларк започна с „по-луди“ CSS3 преходи и избледнява, но ги премахна, казва той. „Чувствах, че направеният от мен дизайн (цвят, оформление, типография) работи много по-добре, просто оставен сам“, казва той.
13. Amazee Labs
Създаване на свежи уебсайтове и решения за общността, Amazee Labs при представяне на вашата марка в онлайн света, базиран на модерната рамка на Drupal с отворен код. С компетентност и увереност, техният собствен уебсайт е прекрасен пример за CSS.
Вече създавайки сайтове за телевизионни мрежи, дигитални агенции, благотворителни организации и бизнеси, ясно е, че техният сайт е впечатлил почти всички. Не можахме да се съгласим повече.
14. A&W
Групата в Корнет IMS исках сайт за A&W това беше повече от лого, бургери и бира.
„Любовта ни към A&W трябваше да свърши много със спомените, споделени в ресторантите в родните ни градове, така че искахме да надхвърлим уникалността на всеки магазин, свързвайки ново поколение фенове с местните A&W“, обяснява главният творчески директор Дейвид Кумър на целта на сайта.
Използването на @ font-face за обслужване на шрифтове Metroscript и Century Gothic създава персонализирана, приятна система от тип. Преобразуванията на CSS ротация се използват в заглавния текст, придавайки на сайта забавно усещане за меню за печат.
25. Nolowene Nowak
Уеб дизайнер и илюстратор Nolowene Nowak създаде забавно онлайн портфолио - чудесен пример за използване на CSS с брилянтен ефект. Ако превъртите надолу и проверите секцията с времевата линия, ще забележите, че управляваното от CSS оформление интелигентно определя основни правила за създаване на модул, който се променя от хоризонтално към вертикално оформление на по-малки екрани.
Сайтът е толкова приятен за използване, колкото и за създаване: „Това беше наистина богато преживяване, което ми даде възможност да създам нещо уникално, което просто бях аз“, казва разработчикът Кристоф Дюмон . „Искахме да предложим на посетителя същото преживяване, както когато беше дете, откривайки нова играчка.“
По време на разработката Дюмон използва Zurb's Фондация : отзивчива CSS рамка, изградена със Sass. „Подкрепата му наистина оживява отзивчивия дизайн“, казва той.
16. Caava Design
Студио за дизайн Каава има красив нов сайт. Потребителите са привлечени от намеци за превъртане на анимация и паралакс функции, докато основният фокус остава върху портфолиото. „Опитахме се да осигурим ново и уникално линейно изживяване, без да бием хората над главата с него“, обяснява собственикът на Caava Коди Смол.
Превъртайки през сайта, стрелките, които свързват различните секции заедно, анимират горните и левите позиции, поддържайки изживяването сплотено. „Тъй като имаме много анимирани изригвания, отне известно време, за да се почувстваме естествени и подкрепящи дизайна“, казва разработчикът Брандън Лавин.
Стрелките са последователни в целия дизайн, например при проучване на работната зона. Като се вгледате внимателно, ще видите, че те са създадени с CSS граници и трансформации. Това е изключително изчистено и полезно, тъй като проектите имат различни цветови схеми и цветовете на стрелките могат лесно да бъдат променяни със CSS свойства, за да съвпадат.
17. Fitbit
Fitbit прави проследяващи дейности и везни за записване на активност, наблюдение на съня и документиране на телесното тегло и мазнини. Тази информация се публикува безжично до Fitbit, където потребителите могат да виждат графики, да си поставят цели и да се състезават и да споделят напредъка си с другите. „Нашата мисия не е нищо повече от използването на технологии, за да направим света по-здравословен!“ отбелязва разработчикът Биаджо Азарели.
Дизайнът на сайта е ярък и оживен. Иконите и цветните статистически графики помагат за оживяване на информативни фрагменти, без да отегчават потребителите. Добре използваната мрежа трябва да улесни трансформирането на сайта в плавно оформление в бъдеще.
Azzarelli казва, че му е било приятно да разработва сайта, базиран на потребителски анализ. „Тъй като нашата потребителска база продължава да възприема браузъри A-grade, ние сме в състояние да се възползваме от приятните части на CSS3 с приемливо влошаване на IE7 и 8.“
18. Mammothbooth
Базираните в Детройт художници на MammothReach искаше да създаде най-радиалната фотобудка, която светът е виждал и с това, MammothBooth е роден уебсайт.
„Искахме сайт, който да е течен, незабавен и забавен“, спомня си дизайнерът / разработчик Ник Кийбоу, „и точно такъв е нашият щанд. Като цяло искахме напълно персонализирано усещане в сайта, което отразява кои сме ние като компания и какво прави нашият продукт в основата си. Уебсайтът е онлайн разширението на MammothBooth през него. “
MammothReach използва свойството за завъртане на преобразуване с голямо спираловидно избухнало изображение, което е в постоянно въртене. Забавно съдържание се плъзга, докато посещавате различните секции на сайта с анимирани свойства на стила. Игривият шрифт Arvil Sans е чудесен за естетиката и се предлага като шрифт „назовете си цена“ от Изгубен тип Кооп .
19. Лабораторни партньори
Студио за изкуство и дизайн Lab Partners, ръководено от екипа на съпруга и съпругата Райън Мейс и Сара Лабиенец, пусна колоритен и декоративен уебсайт, който е един от най-добрите примери за CSS наоколо.
Вниманието към детайлите прозира за всяка страница. Работният раздел разполага с подбрано оформление, което позволява на портфолиото да се чувства особено оригинално. Миниизображенията на проекта имат голяма площ на задържане, която се възползва от свойството непрозрачност чрез ясно разграничаване на състоянието на задържане. Разделът „Магазин“ работи на пазарската количка на Big Cartel, но се чувства като интегрирана част от сайта с персонализиран CSS, приложен към елементите.
„Мрежата наистина се чувства като една от най-добрите комбинации от форма и функционалност“, отбелязва Мейс. Продължава да обяснява, че е било приятно и предизвикателно да се намери баланс между двете. „В крайна сметка всеки проблем се оказа възможност за създаване на решение, за което първоначално не бях мислил.“
двайсет. Мозък за пица
Примери за CSS не стават много по-добри от това! Основана от Брайън Дуайър, Pizza Brain е първият в света музей и ресторант за пица. Уебсайтът популяризира съобщения за пресата и блог, описващ напредъка на начинанието и брандиране на функции, проектирани от Майкъл Алмквист.
Шрифтовете Pacifico Regular и Bebas Neue са съчетани с топла, подобна на пица цветова палитра, създаваща приятелска естетика, която е лесна за четене, въпреки че е вълнуваща и забавна. „Този оранжев, красив е и наистина поставя началото на съдържанието“, казва разработчикът Арджун Мехта.
Разнообразие от заоблени ъгли и ефекти на непрозрачност допълват този изчистен външен вид. „Да имаш всяка публикация в отделна секция със съдържание на закръглени правоъгълници всъщност беше заемка от визуалния език, който се намира във визитките на Pizza Brain“, добавя Мехта. Напълно отзивчив, сайтът изглежда страхотно и при по-малки оформления.
Един от най-добрите примери за CSS в действие - и следете сайта, тъй като се очаква да дойдат повече. „Вълнувам се от начина, по който сайтът може да се разрасне и да бъде допълнително усъвършенстван и изграден, тъй като това невероятно начинание се реализира с течение на времето“, казва Мехта.
двадесет и едно. По пощата
Насочен главно към посетители, които искат да изпратят покани за сватба и празнични картички, или за тези, които просто искат онлайн адресна книга, Postable предоставя лесен начин за заснемане на пощенски адреси.
„Postable има невероятно игрив външен вид, особено за уеб приложение, и аз исках да остана верен на тези дизайни“, казва разработчикът на интерфейс, Кевин Кнайф. От вдъхновени от пликове граници, до забавни текстури на фона до здравия заоблен шрифт Omnes Pro, сайтът незабавно прави адресите за събиране по-малко плъзгане.
Навсякъде се използват забавни и полезни илюстрации. Заоблените ъгли, панделки и интелигентните състояния на задържане поддържат ангажираността на сайта забавна. Това е един от най-добрите примери за CSS трансформации, които сме виждали, като те се използват за актуализиране на стойността на завъртане на фоново изображение, привличайки потребителите към инструкциите за това колко лесно е да се използва сайтът.
След създаване на акаунт, добавянето на контакт се осъществява чрез лесен за използване формуляр, който съдържа изчистени полета за избор на CSS, които Kneife напълно изработи. Той разкрива: „Това включваше маскиране на избраните полета във формулярите с външен div, добавяне на прозрачност и използване на -webkit-izgled. Резултатът е поле, което изглежда добре във всички браузъри и се влошава елегантно. '
22. Роби Леонарди
Домът на дизайнера Роби Леонарди се отличава с цветни илюстрации и анимационни стилове, внасящи весела личност в работата. Както казва Леонарди, „Винаги е хубаво да караш хората да се усмихват и мисля, че този уебсайт ще направи точно това.“
Това е един от чудесните примери за използване на CSS за създаване на невероятни визуализации. Фоновите изображения са наслоени, за да създадат чисти хоризонтални паралакс ефекти в областта на заглавката. Надолу по страницата се използват трансформации за въртене на CSS за преместване на зъбните колела отстрани на зоната за гледане. Парчетата от портфолио са в рамка в дървени прозорци, които са анимирани.
Дървените блокове са направени от изобразяването на 3D модели на Леонарди. Той обяснява: „Комбинирах всички тези изобразявания в едно изображение и променях CSS лявото свойство, когато потребителят превърта страницата. Изненадващо е, че един прост CSS трик може да доведе до толкова добър ефект! '
2. 3. Либор Зезулка
Уебсайтът с една страница на Libor Zezulka е изчистено и умно лично портфолио, разположено сред градиенти, които се появяват и текст, който моли да бъде прочетен, благодарение на интелигентното използване на CSS текстови сенки.
Водещ дизайнер и разработчик на интерфейс Мартин Посписил от Мадео с удоволствие работех на сайта. „[Имахме] свободата да играем с дизайна и технологиите“, обяснява той. Това се вижда в забавния фактор на сайта. Дизайнът е прост, но същевременно ефективен, тъй като секциите са ясно различими. Посписил смята, че „силата е в иконите и цветовите комбинации“.
Друго уникално докосване са изскачащите прозорци на лайтбокса. Бутоните на този сайт са отделени като действащи чрез изображенията в сянка отдолу. Бутонът за затваряне е изместен малко от кутията, осигурявайки лесен за използване интерфейс.
3. 4. Emporium Пайове
„The Уебсайт на Emporium Pies има една работа: да те накара да искаш да ядеш повече баница “, Кайл Търман, интерактивен директор в Леярен колектив твърди. И момче, казва ли истината. Добре проектираният отзивчив сайт на базираната в Далас баница и кафене ще ви огладнее. Наистина гладен.
„Директорът на операциите Пол Уилкс засне някои наистина отлични снимки на пайовете и ние ги приоритизирахме в йерархията на дизайна, доколкото е възможно“, продължава Турман. „Смятахме, че е важно да оставим пайовете да говорят сами за себе си, а не да запълваме сайта с тон разтърсващо копие.“
Вижте ефектите при нанасяне на курсора на мишката върху страницата Pies. Той използва CSS 3D трансформации, комбинирани със свойството за видимост отзад върху изображенията на пайовете, за да разкрие името и повече информация за десерта.
25. Бъдещето на споделянето на автомобили
Бъдещето на споделянето на автомобили, сътрудничество между Фонд за сътрудничество и Хиперакт с подкрепа от Стартъп Америка Партньорство , е пълен с информация за все по-популярната алтернатива на собствеността на автомобила. Дешифрирането на разликите в споделянето на автомобили между партньори, бизнес за потребител и нестопанска цел е улеснено от този очарователен хоризонтален сайт за превъртане.
„Още от самото начало беше взето решение да избутаме това парче доколкото можем“, съветва Саймън Кори, информационен архитект в Hyperakt. „Това означаваше, че докато предоставяхме обратна съвместимост за по-стари браузъри, където е възможно, акцентът беше върху тестването на границите на CSS3 свойствата. Винаги съм бил фен на видеоигрите и с текущото ниво на поддръжка на браузъра за CSS3 успях да се насладя на това ниво на анимация и инженеринг чрез CSS.
„Красотата на CSS3 е в неговата простота, което го прави перфектен език за всеки креатив“, казва Кори.
26. Животът в Грийнвил
Животът в Грийнвил разглежда живота и работата в Грийнвил, Южна Каролина. - Всички в CoWork обичам Грийнвил и исках да създам уебсайт, който да помогне на хората да разберат защо “, казва водещият разработчик Шон Гафни.
Сайтът ви поздравява с шрифт Kulturista с привличащ вниманието размер 53px шрифт върху пълна ширина, отзивчиво изображение на герой. Изчистеният дизайн ви ангажира и искате да научите повече с лесно достъпното съдържание. Леко анимираното лого при нанасяне на курсора също доставя радост.
Екипът се възползва от скелета на скелета, за да помогне за изграждането на стиловете. „Скелетът предлага наистина хубав основен набор от ширини за проектиране, така че то се свежда до оправяне на няколко елемента в оформлението за всеки размер на екрана“, казва Гафни.
27. Истински рибни приказки
Истински рибни приказки наистина ви закача. Играе върху идеята, че рибарите са известни с това, че разказват високи истории, като обединяват невероятни „истински приказки“ за чудовищата, които дебнат под морето. Това, което го отличава, е неговата плавна и лесна за употреба интерактивност, която прави откриването на съдържанието забавно и забавно изживяване.
Инфографиката беше съставена от Брайън Майер и Марк Шелтън на агенция Кентъки DBS> Интерактивен като част от непрекъснатите усилия за добавяне на ново съдържание към Обединена морска пехота уебсайт.
Maier и Shelton използваха комбинация от CSS3 и JavaScript за изграждане на инфографиката. „Много от анимациите и графиките се обработват с CSS3“, обяснява Луис, „но на някои места са използвали JavaScript, за да се настанят за по-стари браузъри, които все още не поддържат тази технология.
28. Станция четвърта
Уеб агенция Станция четвърта е преминал през процес на ребрандиране и е проектирал нов уебсайт, за да подобри своята личност и марка. „Започнахме да замисляме новия уебсайт около идеята да показваме, а не да разказваме на потенциалните клиенти какво можем да направим“, обяснява креативният директор и съсобственик на Station Four Кристофър Олбърдинг.
Следователно новата начална страница използва голям банер за работа, за да покаже най-новата работа на Station Four.
Страницата „Експертиза“ има интересен навигационен дизайн: използва изображения на големи кръгове като връзки. Те се възползват от свойствата на граничен радиус, за да постигнат външния вид и прилагат анимации и върху тях.
Пропуснахме ли любимия ви пример за CSS в действие? Уведомете ни за това в коментарите по-долу!
Сътрудници : Крис Кашдолар и Рич Кларк
Тези рецензии първоначално бяха публикувани в нетно списание , най-продаваното списание в света за уеб дизайнери и разработчици.
