ページ 93-H5 チュートリアルプログラミングチュートリアル: H5 チュートリアルオンラインで学ぶ-php.cn

Article Tags

H5 チュートリアル

ホームページ

Technical articles

ウェブフロントエンド

H5 チュートリアル

hwSlider-コンテンツのスライド切り替え効果(1)

コンテンツのスライド切り替えは広く使用されており、一般的なものにはスライドフォーカス画像、ギャラリー切り替えなどが含まれます。 WEBフロントエンド技術の普及に伴い、Webページにおいてコンテンツのスライド切り替え効果が重要な位置を占めるようになりました。そこで、当サイトのHellowebaでは、フロントエンド向けのコンテンツスライド切り替え効果のわかりやすい開発チュートリアルを特別に用意しました。エンド愛好家。デモを見るソースコードをダウンロードする

Mar 24, 2017 am 10:40 AM

hwSlider，内容滑动，切换效果

hwSlider-content スライド切り替え効果 (2): 応答性の高いタッチスライド

今日は引き続き、コンテンツのスライド切り替えエフェクトの後半を説明します。現在、Web 開発はモバイルデバイスに対応する必要があります。つまり、Web ページは携帯電話などのモバイルデバイスでもアクセスできる必要があります。そのため、最初の部分の基本的なスイッチング効果を強化し、応答性とタッチスライド効果を追加しました。デモを見るソースコードをダウンロードする

Mar 24, 2017 am 10:40 AM

hwSlider，响应式，可触控滑动

用HTML5轻松实现图片预览

在网页中实现图片上传功能，当用户选择了图片文件后，自从有了HTML5，通过FileReader可以轻松的实现这个功能。，。

Mar 23, 2017 pm 04:16 PM

HTML5，图片预览

html5画像アップロードの詳細説明画像プレビュー圧縮と進捗表示をサポート IE6および標準ブラウザに対応。

以前にアップロードコンポーネントを作成しました。進行状況表示とドラッグアンドドロップアップロードを実装する HTML5 ファイルアップロードコンポーネントの作成を参照してください。ただし、一般的なアップロードには問題ありません。写真をアップロードしていて、プレビューする必要があります。これはもう強力です。空き時間を利用して、画像のプレビューとスケーリングをサポートする別の画像アップロード UI をアップロードコンポーネントに追加しました (画像サイズを調整することで実現できます)。画像圧縮）。

Mar 23, 2017 pm 04:14 PM

html5，图片上传，浏览器

美しいステップバイステップの登録およびログインフォームを実装するための HTML5/CSS3 サンプルコードの共有

現在、ユーザーエクスペリエンスを向上させるために、段階的なログインおよび登録フォームが多数用意されており、ユーザーが多数のフォームを見てがっかりすることがないよう、対応するフォーム情報を選択して入力できます。今日皆さんに共有するのは、HTML5 と CSS3 に基づいたステップバイステップの登録およびログインフォームです。言うまでもなく、非常に美しく見えます。 DEMOを見ればすぐにわかります。

Mar 23, 2017 pm 04:14 PM

HTML5，CSS3，注册登录表单

HTML5 の実践 - CSS3 のいくつかのプロパティ text-shadow、box-shadow、border-radius の詳細な紹介

今日の内容は、CSS3 の text-shadow、box-shadow、border-radius プロパティの紹介であり、これらはページレイアウトを強化するものであり、学ぶ価値があります。

Mar 23, 2017 pm 04:08 PM

HTML5，css3，属性

HTML5実践 - グレーピクチャギャラリーの実装方法

以前は、Web 上でグレースケール画像を表示したい場合は、画像ソフトウェアを使用して手動で変換する必要がありました。しかし現在では、画像編集ソフトウェアを使用せずに、HTML5 キャンバスを使用してこのプロセスを実行できるようになりました。この機能を実装する方法を示すために、html5 と jquery を使用してデモを作成しました。

Mar 23, 2017 pm 04:06 PM

HTML5，灰色图片，画廊

HTML5実践～CSSを使って時刻アイコンを作成する詳細解説（写真）

最近、ブログサイトのデザインを変更し、時間を表示するためにカレンダースタイルのアイコンを使用することにしました。以前の解決策は一般的に背景画像を使用することでしたが、CSS3 のおかげで、CSS3 を使用してこの機能を実現できるようになりました。線形グラデーション、境界線の半径、およびボックスの影のプロパティを使用して、以前の Photoshop デザインを置き換えます。

Mar 23, 2017 pm 04:03 PM

HTML5，css，ICON

HTML5 実践 - スケーラブルなモバイル検索ボックスの詳細なグラフィックとテキストの説明

今日は、CSS を使用して、モバイルレスポンシブデザインのニーズに非常に適したスケーラブルなモバイル検索ボックスを作成する方法を紹介します。このチュートリアルでは JavaScript を使用せず、ネイティブ CSS プロパティのみを使用するため、非常にシンプルで効率的な実装になります。

Mar 23, 2017 pm 04:00 PM

HTML5，mobile，搜索框

HTML5実践～css3を使って画像スタイルを豊かにする方法を詳しく解説(2)

写真に背景画像パッケージを追加し、box-shadow と border-radius を使用して写真のさまざまなスタイルを設定する方法を紹介しました。興味のある友人は読み返すことができます。しかし最近、PhotoTouch テーマをデザインするときに、背景画像のサイズを調整できないという問題が発生しました。これはレスポンシブデザインには理想的ではありません。今日はその問題を解決してみます。

Mar 23, 2017 pm 03:58 PM

HTML5，css3，图片样式

HTML5実践～css3を使って画像スタイルを豊かにする方法を詳しく解説(1)

CSS3 では、box-shadow と border-radius が画像に直接使用されている場合、ブラウザーはそれらを適切にレンダリングできません。ただし、画像を背景画像として使用すると、追加されたスタイルブラウザで適切にレンダリングできます。 box-shadow、border-radius、transition を使ってさまざまな画像スタイルの効果を作成する方法を紹介します。

Mar 23, 2017 pm 03:55 PM

HTML5，css3，图片样式

HTML5 の実践 - クロスブラウザー HTML5 テキストプレースホルダーの実装 - プレースホルダーの詳細な紹介

HTML5では入力用のプレースホルダーであるWebフォームの機能「プレースホルダー」が強化されました。プレースホルダーの機能は、入力コンテンツが空であるかフォーカスされていない場合に、入力にプレースホルダーのコンテンツが表示されることです。これは優れた機能ですが、すべてのブラウザがサポートしているわけではありません。このチュートリアルでは、Modernizr クラスライブラリを使用してブラウザーがこの属性をサポートしているかどうかを判断し、jquery を使用してプレースホルダーを動的に表示する方法を紹介します。

Mar 23, 2017 pm 03:48 PM

HTML5，文字占位符，placeholder

CSS を使用して画像ギャラリーを装飾するための HTML5 実践コード共有 (1)

このレッスンでは、画像ソースを変更せずに CSS を使用して画像ギャラリーを装飾する方法を紹介します。ここで使用される手法も非常に単純です。画像の前にを作成し、そのスパン上で背景画像を使用してマスク効果を生成します。この方法はシンプルかつ柔軟です。デモでは 20 を超えるスタイルが紹介されていますので、参照してください。

Mar 23, 2017 pm 03:45 PM

HTML5，css，图片画廊