27 безплатни HTML и CSS карти за блогове, електронна търговия и др

Карти за задържане

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

Ще изброим поредица от безплатни карти в HTML и CSS които са напълно подходящи за всички видове блогове, бизнес, електронна търговия и много други. Колекция с голям обхват, за да може да бъде включена в част от работата, която вършите за всички видове клиенти. Нека го направим с този списък, който използва codepen.io, за да можете да получите кода както в HTML, така и в CSS.

Блог за забавление №1

Забавление с карти

а страхотна дизайнерска картичка което казва почти всичко изображението, което го представлява, можете да отидете на codepen.io, за да получите съответния код и да го инсталирате на вашия уебсайт.

CSS News Cards само CSS

Картичка за новини

Тази карта, с По-странни неща като фон, се откроява със своята плавна анимация, която разкрива съдържанието. Това е чист CSS.

Позиция в блог

Блог пост

Предварителен преглед на мрежата, като поставите курсора на мишката върху него. Той има CSS и HTML за лесно включване.

Блог карти

Блог карти

Минималистичен отзивчив дизайн на блог карта. Бързи и плавни анимации с високо качество, които не оставят никого безразличен.

Отзивчиви визитки

Отзивчиви карти

Откроява се за леката анимация като задържите курсора на мишката върху изображението на картата.

Още една блог карта

Блог Hover Card

Появява се текст на картата при задържане в същото.

Визитки

Карта за посещение

а проста, но актуална карта посещение с демонстрация и код в HTML и CSS.

3D визитка

3D флип карта

Тази карта си струва 3D анимация с HTML и CSS. Изработена от Елена Назарова, тя е идеална за впечатляваща с цветове визитка.

CSS визитка

CSS визитка

Много поразителна визитка в CSS върти се в 3D за да направим място за поредица от URL адреси, които отговарят на показалеца на мишката в момента, в който го оставим.

Решетки за карти

Решетъчна карта

Поредица от добре поставени карти с привлекателен дизайн. Изненадващо е с опростената си естетика, но с добър удар в HTML, CSS и SCSS кода.

3D карти се разкриват

3D карта

Тази серия от мрежови карти разкриват повече информация в момента че оставихме мишката върху иконата в зелено. В същото време, когато оставим показалеца, останалата част от мрежата се движи съответно.

Отзивчива карта за дизайн на материали

Материал Design

С език на Google за дизайн, се появява тази серия от карти, които са подчертани от иконата на менюто, която отваря цялата информация на актьорите, както в примерния случай. Красиви и интуитивни анимации със страхотен визуален външен вид.

Решетка за карти на Flexbox

Flexbox

Прототип на картата на същата височина, на която се открояват с използването на мрежовия формат flexbox. Друга негова стойност е използването на CSS пропорции и CSS филтри.

Карти на Clash of Clans

Сблъсъкът на Кланове

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

Слайд карти за електронна търговия

Продуктова карта

С пъргава анимация, тези карти ви насърчават да търсите техните елементи, за да разберете за какво става въпрос. С чудесен дизайн от Омар Дсоки.

Дизайн на интерфейса - продуктова карта

Потребителски интерфейс на продукта

Перфектна картичка за проектиране на тези на продукт на нашата електронна търговия. Изработено в HTML и CSS.

Продуктова карта

Продукт на ECommerce

От същата карта можем преминете през няколко изображения за да видите по-добре продукта. Той включва бутона за добавяне в количката и съдържа HTML, CSS и JavaScript код.

Flexy продуктови карти

Flexy карта

Както показва името му, използва flexbox за да създадем интересна анимация, когато щракнем върху бутона за добавяне в количката.

Флип карти

Флип карта

Малко код за някои карти с гладка и перфектна анимация. След броени минути можете да ги включите. Наскоро добавен в codepen.

Карти като 3D продуктови карти

3D карта

Трябва да се отбележи, че тези карти са сякаш имаме поредица от карти на маса. Показалецът е оставен и те увеличават, кликват върху всеки от тях и показват гърба на картата, за да покажат информация за продукта. Щракваме отново и го оставяме както беше отпред. Перфектен за изучаване на 3D CSS свойства.

Паралакс карта

Карта Parallax

Много визуален експеримент с a привличащ вниманието ефект на обръщане. По-добре е да го видите, за да знаете за какво става дума.

Ефект на задържане на мишката за карти

Карта на мишката

Един прост ефект, но измамен ховър за картите.

Лесен ефект на задържане

Обикновена карта

Поразителен доста прост ефект, но това има страхотен ефект в момента, в който го визуализираме.

Карти за дълбочина на паралакс

Дълбочина на паралакса

Тези карти носят концепция за паралакс до върха за да оформите някои много поразителни картички по дизайн. Трябва само да го видите, за да разберете по-добре ефекта, който произвежда върху потребителя, когато изберете някои от категориите в нашия блог.

UI карта за филми

Филмова карта

Карта на страхотно оформление, направено с HTML и CSS.

Профилна карта

Карта за контакт

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

Картони в комплект с Polaroid

Polaroid

Със свойства, филтри и CSS персонализирани преходи Създадени са тази серия от групирани карти Polaroid; не пропускайте тези SVG изображения в мрежата.


2 коментара, оставете своя

Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.

  1.   Cristian каза той

    Ще бъде възможно да вмъкнете някоя от тези карти на страница с wordpress

  2.   Стан каза той

    ОБИЧАМ ГИ