Loading...

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

avatar Георги Кацаров 1 минута
Четири невероятни проекта, направени само с HTML и CSS

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

The Simpsons

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

Миньоните

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

Флуидно меню с прозрачни икони

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

Responsive котка

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

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

Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.