Онлайн ресурсите са почти безкрайни, но намирането им на качество е наистина трудното нещоВъпреки че търсите малко и имате добър списък с уебсайтове, посветени на дизайна, нещата стават по-лесни. Във време, когато езици като HTML и CSS са в отлична форма, доближаването до безплатни, висококачествени ресурси е на почти няколко кликвания.
Ще изброим поредица от безплатни карти в HTML и CSS които са напълно подходящи за всички видове блогове, бизнес, електронна търговия и много други. Колекция с голям обхват, за да може да бъде включена в част от работата, която вършите за всички видове клиенти. Нека го направим с този списък, който използва codepen.io, за да можете да получите кода както в HTML, така и в CSS.
Блог за забавление №1
а страхотна дизайнерска картичка което казва почти всичко изображението, което го представлява, можете да отидете на codepen.io, за да получите съответния код и да го инсталирате на вашия уебсайт.
CSS News Cards само CSS
Тази карта, с По-странни неща като фон, се откроява със своята плавна анимация, която разкрива съдържанието. Това е чист CSS.
Позиция в блог
Предварителен преглед на мрежата, като поставите курсора на мишката върху него. Той има CSS и HTML за лесно включване.
Блог карти
Минималистичен отзивчив дизайн на блог карта. Бързи и плавни анимации с високо качество, които не оставят никого безразличен.
Отзивчиви визитки
Откроява се за леката анимация като задържите курсора на мишката върху изображението на картата.
Още една блог карта
Появява се текст на картата при задържане в същото.
Визитки
а проста, но актуална карта посещение с демонстрация и код в HTML и CSS.
3D визитка
Тази карта си струва 3D анимация с HTML и CSS. Изработена от Елена Назарова, тя е идеална за впечатляваща с цветове визитка.
CSS визитка
Много поразителна визитка в CSS върти се в 3D за да направим място за поредица от URL адреси, които отговарят на показалеца на мишката в момента, в който го оставим.
Решетки за карти
Поредица от добре поставени карти с привлекателен дизайн. Изненадващо е с опростената си естетика, но с добър удар в HTML, CSS и SCSS кода.
3D карти се разкриват
Тази серия от мрежови карти разкриват повече информация в момента че оставихме мишката върху иконата в зелено. В същото време, когато оставим показалеца, останалата част от мрежата се движи съответно.
Отзивчива карта за дизайн на материали
С език на Google за дизайн, се появява тази серия от карти, които са подчертани от иконата на менюто, която отваря цялата информация на актьорите, както в примерния случай. Красиви и интуитивни анимации със страхотен визуален външен вид.
Решетка за карти на Flexbox
Прототип на картата на същата височина, на която се открояват с използването на мрежовия формат flexbox. Друга негова стойност е използването на CSS пропорции и CSS филтри.
Карти на Clash of Clans
El популярна мобилна игра има своите карти в HTML и CSS, създадени от Андре Мадаранг. Можем да преминем между тях с прецизна и силно визуална анимация.
Слайд карти за електронна търговия
С пъргава анимация, тези карти ви насърчават да търсите техните елементи, за да разберете за какво става въпрос. С чудесен дизайн от Омар Дсоки.
Дизайн на интерфейса - продуктова карта
Перфектна картичка за проектиране на тези на продукт на нашата електронна търговия. Изработено в HTML и CSS.
Продуктова карта
От същата карта можем преминете през няколко изображения за да видите по-добре продукта. Той включва бутона за добавяне в количката и съдържа HTML, CSS и JavaScript код.
Flexy продуктови карти
Както показва името му, използва flexbox за да създадем интересна анимация, когато щракнем върху бутона за добавяне в количката.
Флип карти
Малко код за някои карти с гладка и перфектна анимация. След броени минути можете да ги включите. Наскоро добавен в codepen.
Карти като 3D продуктови карти
Трябва да се отбележи, че тези карти са сякаш имаме поредица от карти на маса. Показалецът е оставен и те увеличават, кликват върху всеки от тях и показват гърба на картата, за да покажат информация за продукта. Щракваме отново и го оставяме както беше отпред. Перфектен за изучаване на 3D CSS свойства.
Паралакс карта
Много визуален експеримент с a привличащ вниманието ефект на обръщане. По-добре е да го видите, за да знаете за какво става дума.
Ефект на задържане на мишката за карти
Един прост ефект, но измамен ховър за картите.
Лесен ефект на задържане
Поразителен доста прост ефект, но това има страхотен ефект в момента, в който го визуализираме.
Карти за дълбочина на паралакс
Тези карти носят концепция за паралакс до върха за да оформите някои много поразителни картички по дизайн. Трябва само да го видите, за да разберете по-добре ефекта, който произвежда върху потребителя, когато изберете някои от категориите в нашия блог.
UI карта за филми
Карта на страхотно оформление, направено с HTML и CSS.
Профилна карта
много добри анимации за карта за контакт, в която можем да реализираме достъп до профили в социалните медии. HTML и CSS.
Картони в комплект с Polaroid
Със свойства, филтри и CSS персонализирани преходи Създадени са тази серия от групирани карти Polaroid; не пропускайте тези SVG изображения в мрежата.
Ще бъде възможно да вмъкнете някоя от тези карти на страница с wordpress
ОБИЧАМ ГИ