私には才能がまったくありません。 私は知識に情熱を注いでいます

Article

31ウェブサイトの美しい検索フォームセクション

31ウェブサイトの美しい検索フォームセクション


November, 18 2021

検索コンポーネントは、Webサイトの重要なコンポーネントです。 それはユーザーがあなたのウェブサイトで彼らが望むコンテンツを見つけるのを簡単にします。 今日の投稿では、HTML、CSS、およびJavascriptで構築されたいくつかの美しい検索コンポーネントのデザインを見ていきます。

ウェブサイトの美しい検索フォーム

美しい検索フォームCSSJavascript

美しい検索フォームCSSJavascript

CSSとで構築された検索フォームのアニメーション効果の完全なコレクション Javascript。

See the Pen CSS Animated Search Box Concepts by Brandon Kennedy (@brandonkennedy) on CodePen.

リンク

検索フォームとアイコンのモーションエフェクトを作成する

Animation Search Form

検索アイコンをクリックすると、ユーザーが検索ボックスにキーワードを入力するための入力ボックスが自動的に表示されます。 また、検索アイコンを矢印アイコンに変更します。

See the Pen Search button animation by Kristy Yeaton (@kristyjy) on CodePen.

リンク

HTMLCSSを使用した検索フォーム

HTMLCSSを使用した検索フォーム

この検索フォームはHTMLCSSで作成されているため、さまざまな種類のWebプロジェクトに適用できます。 赤をメインカラーにすることで、ユーザーの注目を集めやすいのが気に入っています。

See the Pen Search Form With Animated Search Button by Himalaya Singh (@himalayasingh) on CodePen.

リンク

入力検索フォームの作成

この入力検索フォームのハイライトは、ユーザーが検索ボックスにコンテンツを入力すると、下の境界線が入力された文字サイズと同じ幅で自動的に色が変わることです。

See the Pen Tripadvisor input highlight by Petr Gazarov (@petrgazarov) on CodePen.

リンク

CSSを使用して検索フォームのアニメーションを作成する

CSSを使用して検索フォームのアニメーションを作成する

これは、今日最も一般的に使用されている検索フォームと見なすことができます。 検索アイコンを使用して機能を表示するだけで、Webサイトのスペースを大幅に節約できます。 ユーザーがこのアイコンをクリックすると、美しいモーションエフェクトを備えた入力ボックスが自動的に表示されます。

See the Pen Animated Search Box by Alex Tkachev (@alexpopovich) on CodePen.

リンク

検索フォームでアイコンを作成する

検索フォームでアイコンを作成する

これは、ユーザーが画像やユーザーなどのさまざまなタイプのコンテンツを表すアイコンを使用して簡単に検索できるようにする検索フォームです。.

See the Pen DailyUI #022 - Search by Fabio Ottaviani (@supah) on CodePen.

リンク

マテリアルスタイルでフォームを検索

マテリアルスタイルでフォームを検索l

このタイプの検索フォームは、マテリアルスタイルに従って設計されています。 会社のロゴやウェブサイトを配置するために使用できる検索ボックスの左側。 その特別な機能は、ユーザーが入力ボックスをクリックすると、高さと幅の両方が自動的に拡大することです。 そこから、多くの文字を含むコンテンツを簡単に入力できます。.

See the Pen Material Design: Search Bar by Matt (@uixmat) on CodePen.

リンク

Jqueryを使用した検索フォーム

Jqueryを使用した検索フォーム

Webサイトのスペースを節約する必要がある場合は、この検索フォームを使用できます。 ユーザーが検索アイコンをクリックすると、タイトルバーの下に表示されます。

See the Pen Sliding Search Form by Thierry Dulieu (@Linuance) on CodePen.

リンク

レスポンシブ検索フォーム

レスポンシブ検索フォーム

この検索フォームで気に入っているのは、アイコンを使用して検索ボックスを拡大または縮小できることです。 ボーダーボトムのみを使用した入力ボックスで、シンプルでモダンなデザイン感をユーザーに提供します。 さらに、さまざまなデバイス画面での表示に応答するようにも設計されています。

See the Pen Hidden search box slide down by Matt Saling (@msaling) on CodePen.

リンク

ウェブサイトのフォームHTMLを検索

 ウェブサイトのフォームHTMLを検索

これは、Bootstrapスタイルの検索フォームです。

See the Pen Animated Search Interaction by Jon Kantner (@jkantner) on CodePen.

リンク

CSSの背景と組み合わせた検索フォームの作成

CSSの背景と組み合わせた検索フォームの作成

この検索フォームの最も顕著な特徴は、背景と入力ボックスの間の配色です。 ユーザーがアイコンをクリックすると、検索ボックスがゆっくりと表示され、美しいモーション効果が得られます。 また、ユーザーが簡単に検索をキャンセルできるクローズ機能も備えています。

See the Pen Search box animation by Denis Pasko (@faustdp) on CodePen.

リンク

ボーダーCSSと組み合わせた検索フォーム

ボーダーCSSと組み合わせた検索フォーム

この検索フォームの効果は、境界線とボックスの影に基づいています。 ユーザーが検索ボックスをクリックすると、下と右の境界線のサイズと色が変わり、入力ボックスに3D感が生まれます。

See the Pen :focus-within and :placeholder-shown selectors by Mert Cukuren (@knyttneve) on CodePen.

リンク

Search Form UI

Search Form UI

これは、ウェブサイトの検索フォームUIのコレクションのプロジェクトです。 検索ボックスの効果には、主に4つのタイプがあります。背景色の変更、幅の変更、アイコンの拡大、およびユーザーが検索フォームをクリックしたときに検索アイコンを表示することです。

See the Pen rlnvz by Paula Borowska (@paulaborowska) on CodePen.

リンク

Scene.jsライブラリを使用した検索ボックス

Scene.jsライブラリを使用した検索ボックス

これは、scene.jsライブラリの上に構築された検索ボックスです。 アイコンをクリックすると、検索アイコンの移動とプレースホルダーの入力に合わせて、入力ボックスが中央から拡大します。

See the Pen Scene.js example search box animation by Daybrush (@daybrush) on CodePen.

リンク

検索フォームとナビゲーションを組み合わせる

検索フォームとナビゲーションを組み合わせる

このプロジェクトは、ウェブサイトで検索フォームとタイトルバーを組み合わせた例のコレクションです。 ナビゲーションに関連して、下の中央に右に検索ボックスが表示される可能性があります。

See the Pen Header Search by Aleksandar Čugurović (@choogoor) on CodePen.

リンク

CSSとJavascriptの検索ボックス

CSSとJavascriptの検索ボックス

この検索ボックスはCSSとJavascriptで実行されます。 そのハイライトは、検索アイコンから閉じるアイコンに切り替えるときの遷移効果です。

See the Pen Search box v.2 by Takane Ichinose (@takaneichinose) on CodePen.

リンク

Javascriptを使用したフォーム入力の検索

Javascriptを使用したフォーム入力の検索

検索フォームの入力はJavascriptに組み込まれており、入力セルに境界線と影を組み合わせて使用​​することを強調しています。

See the Pen Expanding Input by Steve Gardner (@ste-vg) on CodePen.

リンク

Animation Effects For Search Icon

Animation Search Icon

この検索ボックスはhtmlとcssで作られています。 ユーザーがアイコンをクリックすると、入力ボックスが自動的に展開されます。

See the Pen Search bar by Takane Ichinose (@takaneichinose) on CodePen.

リンク

CSSJavascriptを使用したフォーム検索ボックス

CSSJavascriptを使用したフォーム検索ボックス

検索ボックスはcssとjavascriptで構築されています。 美しいアニメーションと洗練された検索アイコンで、サイトにモダンな雰囲気を与えます。

See the Pen Expanding Animated search box Using Jquery by rajeshdn (@RajRajeshDn) on CodePen.

リンク

検索フォームのアイコンのアニメーション効果の構築

検索フォームのアイコンのアニメーション効果の構築

これは、入力ボックスに透明な背景を使用することで可能になった検索フォームボックスです。

See the Pen Search Form Animation by Aleksandar Čugurović (@choogoor) on CodePen.

リンク

HTMLフォーム検索

HTMLフォーム検索

ユーザーが入力ボックスにフォーカスすると、検索ボックスの背景が自動的に変更されます。

See the Pen Search Box by Roy Motloutsi (@emelent) on CodePen.

リンク

Search Form Box Shadow

Search Form Box Shadow

セルは、入力ボックスとアイコンにボックスシャドウを適用することで検索できます。

See the Pen Expandable Search box using jquery by rajeshdn (@RajRajeshDn) on CodePen.

リンク

Search Form Email

Search Form Email

ハイライトは、メール検索ボックスのアニメーション効果です。 検索アイコンの下に入力ボックスが表示されます。

See the Pen expanding search box - toggle animated search box by rajeshdn (@RajRajeshDn) on CodePen.

リンク

HTML入力を使用した検索フォーム

HTML入力を使用した検索フォーム

検索フォームは折りたたみ可能なアイコンを組み合わせて、ユーザーが検索入力ボックスを簡単に展開または折りたたむのに役立ちます。

See the Pen Search Form with Toggle Button by Mark Zolton (@mczolton) on CodePen.

リンク

Search Bar Website

Search Bar Website

検索バーは、Webページの色と一致するプレースホルダー入力色を使用して絞り込まれます。 さらに、検索ボックスも入力ボックスの下の境界線を使用してマテリアルスタイルで構築されます。

See the Pen Animated search bar by Austin Dudas (@austin_dudas) on CodePen.

リンク

Animated Search Box

Animated Search Box CSS Javascript

検索ボックスの美しいアニメーション効果。

See the Pen Search overlay by Steve (@stevemckinney) on CodePen.

リンク

Search Form Bootstrap

Search Form Bootstrap

ブートストラップ検索フォームのアニメーションを作成します。

See the Pen Expanding text box/button by Sam Daitzman (@sdaitzman) on CodePen.

リンク

CSSとJavascriptを使用した検索バー

CSSとJavascriptを使用した検索バー

検索ボタンのアニメーションと組み合わせた検索バー。

See the Pen Emoji Search Bar by Lashan Dias (@lashan) on CodePen.

リンク

GSAPを使用してアニメーション検索バーを作成するP

GSAPを使用してアニメーション検索バーを作成する

gsapライブラリを使用した検索ボックスのアニメーション。

See the Pen Search Animation GSAP by Valery Alikin (@AlikinVV) on CodePen.

リンク

Jqueryを使用して検索ボックスを作成する

Jqueryを使用して検索ボックスを作成する

Searchboxは、検索アイコンから閉じるアイコンへの美しい移行を備えたJqueryで構築されています。

See the Pen Search icon animation by Bram Krekels (@BramKrekels) on CodePen.

リンク

Search Form Input Javascript

Search Form Input Javascript

Javascriptで構築されたフォーム入力を検索します。 カラーマッチングによる美しい効果 検索ボックスのフォントと背景。

See the Pen ⚡️ Search Input ⚡️ #We❤️Frontend by 0guzhan (@0guzhan) on CodePen.

リンク

結論:

この記事があなたのウェブサイトプロジェクトの開発に役立つ検索コンポーネントを提供することを願っています。 ご不明な点がございましたら、メールでお問い合わせください。 できるだけ早くご連絡いたします。 より良い記事を書くことができるように、ページをサポートし続けてください。