ブログ、eコマースなどのための27の無料のHTMLおよびCSSカード

ホバーカード

オンラインリソースはほぼ無限ですが、 質の高いものを見つけるのは本当に難しいことです少し検索して、デザイン専用のWebサイトの良いリストを持っていますが、物事は簡単になります。 HTMLやCSSのような言語が素晴らしい形になっているとき、無料の高品質のリソースに近づくには、ほとんど数回クリックするだけです。

一連のリストを作成します HTMLとCSSの無料カード あらゆるタイプのブログ、ビジネス、eコマースなどに最適です。 すべてのタイプのクライアントに対して行っている作業の一部に組み込むことができるようにするための長距離コレクション。 HTMLとCSSの両方でコードを取得できるように、codepen.ioを使用するこのリストを使用してこれを実行します。

ブログカードの楽しみ#1

カードの楽しみ

A 素晴らしいデザインカード つまり、それを表す画像のほとんどすべてが、codepen.ioにアクセスして対応するコードを取得し、Webサイトにインストールすることができます。

CSSニュースカードのみCSS

ニュースカード

このカード、 背景としてのストレンジャー・シングス、コンテンツを明らかにするスムーズなアニメーションで際立っています。 純粋なCSSです。

ブログ投稿アイテム

ブログ投稿 マウスポインタをWeb上に置いてWebをプレビューします。 CSSとHTMLがあります 簡単に組み込むことができます。

ブログカード

ブログカード

ミニマリストのレスポンシブブログカードのデザイン。 高速でスムーズなアニメーション 誰もが無関心にならない高品質の。

レスポンシブ名刺

レスポンシブカード

目立つ わずかなアニメーション カード画像の上にマウスポインタを置く。

別のブログカード

ブログホバーカード

が表示されます ホバリング時のカードテキスト 同じように。

名刺

名刺

A シンプルだが最新のカード HTMLとCSSのデモとコードでアクセスしてください。

3D名刺

3Dフリップカード

このカードは価値があります HTMLとCSSを使用した3Dアニメーション。 エレナ・ナザロワ製で、印象的な名刺に最適です。

CSS名刺

CSS名刺

非常に目を引くCSS名刺 3Dで回転します マウスポインタを置いた瞬間にマウスポインタに応答する一連のURLアドレスに道を譲ります。

カードグリッド

グリッドカード

よく配置されたカードのシリーズ 目を引くデザイン。 その単純な美学には驚くべきことですが、HTML、CSS、およびSCSSコードで大きなヒットがあります。

公開されている3Dカード

3Dカード

この一連のカードグリッド 現時点でより多くの情報を明らかにする 緑色のアイコンにマウスを置いたままにしました。 ポインタを離れると同時に、グリッドの残りの部分もそれに応じて移動します。

レスポンシブマテリアルデザインカード

材料設計

ととも​​に グーグルデザイン言語、この一連のカードは、例の場合のように、俳優のすべての情報を開くメニューアイコンを際立たせて表示されます。 見た目も美しく直感的なアニメーション。

Flexboxカードグリッド

フレックスボックス

カードのプロトタイプ グリッドフレックスボックス形式を使用するために目立つのと同じ高さで。 その値のもうXNUMXつは、CSSアスペクト比とCSSフィルターの使用です。

クラッシュ・オブ・クランカード

氏族の衝突

El 人気のモバイルゲーム AndreMadarangによって作成されたHTMLとCSSのカードがあります。 正確で非常に視覚的なアニメーションでそれらの間を行き来することができます。

eコマース用のスライドカード

製品カード

アジャイルアニメーションこれらのカードは、それらが何であるかを見つけるためにそれらの要素を検索することをお勧めします。 OmarDsokyの素晴らしいデザイン。

インターフェイスデザイン-製品カード

製品UI

それらをデザインするのに最適なカード 私たちのeコマースの製品。 HTMLとCSSで作られました。

製品カード

Eコマース製品

同じカードから いくつかの画像を通過します 製品を見やすくするために。 カートに追加ボタンが含まれ、HTML、CSS、JavaScriptコードが含まれています。

Flexy製品カード

フレキシカード

その名前が示すように、 フレックスボックスを使用 [カートに追加]ボタンをクリックすると、興味深いアニメーションが作成されます。

カードをめくる

フリップカード

スムーズでいくつかのカードの小さなコード 完璧なアニメーション。 ほんの数分でそれらを組み込むことができます。 最近codepenに追加されました。

3D製品カードとしてのカード

3Dカード

これらのカードは まるでテーブルの上に一連のカードがあるかのように。 ポインタを置いたままにしてズームインし、それぞれをクリックして、カードの裏面を表示して製品情報を表示します。 もう一度クリックして、正面のままにします。 3DCSSプロパティの学習に最適です。

視差カード

視差カード

非常に視覚的な実験 目を引くフリップ効果。 それが何について話しているのかを知るためにそれを見る方が良いです

カードのホバー効果

ホバーカード

シンプルな効果ですが ギミックホバー カードについて。

シンプルなホバー効果

シンプルなカード

かなりシンプルな効果が印象的、しかしそれは私たちがそれを視覚化した瞬間に大きな効果があります。

視差深度カード

視差の深さ

これらのカードには トップへの視差の概念 設計上、非常に印象的なカードを作成します。 ブログでいくつかのカテゴリを選択したときにユーザーに与える影響をよりよく理解するには、それを確認する必要があります。

映画のUIカード

ムービーカード

のカード HTMLで作られた素晴らしいレイアウト およびCSS。

プロフィールカード

お問い合わせカード

MUY 良いアニメーション ソーシャルメディアプロファイルへのアクセスを実装できる連絡先カードの場合。 HTMLとCSS。

ポラロイドバンドルカード

ポラロイド

プロパティ、フィルター、 CSSカスタムトランジション この一連のポラロイドグループカードが作成されます。 これらのSVG画像Webをお見逃しなく.


記事の内容は、次の原則に準拠しています。 編集倫理。 エラーを報告するには、 ここで.

コメント、あなたのコメントを残してください

コメントを残す

あなたのメールアドレスが公開されることはありません。 必須フィールドには付いています *

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。

  1.   クリスティアン

    ワードプレスのページにこれらのカードのいずれかを挿入することが可能になります