Четири невероятни проекта, направени само с HTML и CSS

Може да се говори много за способностите на CSS, да се изброяват сложни опции, да се описват техните възможности, но за да придобиете пълна представа за възможностите на CSS ви представяме няколко интересни проекта, направени изцяло с HTML и CSS.

Дизайнер на име Крис Патъл е пресъздал героите от популярния анимационен сериал „Семейство Симпсън“ използвайки единствено CSS. За целта той взел лицето на всеки герой, „разбил“ го на по-малки форми, след което отново слял парчетата заедно, а за да вдъхне малко живот на творението си успял да накара техните очи да се движат.

Едва ли ви е непозната манията по миньоните – малките, жълти сладурски същества, които вечно търсят най-злият господар, на когото могат да слугуват. В този проект трима от тези сладурковци са анимирани, посредством единствено CSS.

Ако предходните два проекта бяха просто демонстрация на възможностите на CSS, тук ви представяме нещо, което има както практическо приложение, така и добро естетично оформление. Този проект представя меню, което се състои от две части – горна и долна. Тази част, която е отпред т.е. отгоре, е просто поле, в което се визуализират възможностите за избор. Интересното е в частта, която е отдолу. Тя е плъзгащ се показалец, който следва вашият курсор, а цветът ѝ запълва прозрачната икона. И за да стане още по-интересно споменах ли, че долната част има стрелки, които „обгръщат“ горната?

Responsive дизайнът е ключов в наши дни. За да бъде един сайт привлекателен, той трябва да е удобен за разглеждане на най-различни платформи – от десктоп, през таблет и обикновен смартфон. Този проект демонстрира възможностите на CSS по отношение на responsive дизайна по един изключително атрактивен и иновативен начин. При първото зареждане на проекта ще се появи анимирана котка, която ще започне да извършва различни движения и да маха с опашка. Безспорно впечатляващо, в предвид, че е постигнато само със CSS, но подобни неща правеха и някои от горепосочените проекти. Ако искате обаче да проверите, кое е наистина впечатляващото на този проект – просто започнете да променяте мащаба на прозореца на браузъра.

Уменията по HTML5 и CSS3 са ключови в днешния свят на динамичния маркетинг. Курсът „HTML & CSS - февруари 2020“ е най-добрият начин да придобиете тези умения, в рамките на едно компактно и достъпно обучение. Запишете се още сега!