ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 の実践的な開発: コーナーeffectの開発方法を段階的に教えます_html/css_WEB-ITnose
CSS3 の実践的な開発: コーナーeffectの開発方法を段階的に教えます_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:00:19941ブラウズ
皆さんこんにちは、花会开です。今日の記事では、純粋な CSS 折り畳み効果 のセットを開発する方法を段階的に説明します。いつものように、コードのダウンロードは提供しませんが、チュートリアルのコードをローカル コンピューターにコピーする限り、私が示したものと同じ効果が確実に得られることを保証します。私の意図を理解していただければ幸いです。
それでは、今日のチュートリアルを直接始めましょう。まず第一に、今日の実際的な事例の効果をお見せしましょう:
これは何だという人もいるでしょう。これが今日の実際の開発です。上の図の右上隅にある折りたたみエフェクトを開発します。
説明を終える前に、難しくて信じられないと思う人もいるかもしれません。お伝えしたいのは、とても簡単なことです。以下の内訳に従って、段階的に学習してください。
まず、次のコードで青い領域を作成します:
<!DOCTYPE html><html><head><meta charset="utf-9"><meta name="keywords" content="css,css3,实战互联网,教程"><meta name="description" content="css3实现折角效果,折角效果,css3实战尽在实战互联网" ><link rel="stylesheet" href="styles_2014080901.css"><title>CSS3实现折角效果实战开发</title></head><body><div class="note"></div></body></html>
接着我们给.note元素应用样式：
*{ /*清除所有元素的内外边距*/margin:0;padding:0;}.note { /*设置折叠样式基本属性*/width:480px;height:400px;margin:2em auto; /*调整.note元素的外边距*/padding:2em;background:#53A3B4;} それでは、この時点のランニングエフェクトを見てみましょう:
この折り畳みエフェクトを実現するにはどうすればよいでしょうか?以下の手順に注意してください。
今度は CSS3 の擬似要素を使用して、コンテンツの一部をページに挿入します。
.note:before {content:"";display:block; /*伪元素默认是行内元素，所以如果要设定宽高，这必须显性设置为block*/border-width:0 16px 16px 0; /*设置边框宽度*/border-color:#fff #fff transparent transparent; background:transparent;border-style:solid; /*设置边框为固体的*/width:0; /*设定新创建的元素*/}
ここで、疑似要素について簡単に説明します。 :before 疑似要素はコンテンツを指定する必要があります。そうでない場合は、疑似要素はインライン要素であるため、コンテンツを設定する必要があります。デフォルトでは、幅と高さを設定する場合は、これを明示的にブロックに設定する必要があります。相対的な疑似要素についてさらに詳しい情報をお持ちの場合は、私のスペースに注目してください。
疑似要素が作成されましたが、作成した要素を .note 領域の右上隅に配置したいと考えています。さて、position の相対 (相対位置決め) と絶対位置 (絶対位置決め) を通じて要素の位置を調整できます。
position:relative (相対配置) を .note に適用します:
.note { /*设置折叠样式基本属性*/width:480px;height:400px;margin:2em auto; /*调整.note元素的外边距*/padding:2em;background:#53A3B4;<strong> position:relative;</strong>}
次に、絶対配置属性を使用して、新しく作成したオブジェクトをコンテナの右上隅に配置します:
.note:before {content:"";display:block; /*伪元素默认是行内元素，所以如果要设定宽高，这必须显性设置为block*/border-width:0 16px 16px 0; /*设置边框宽度*/border-color:#fff #fff transparent transparent; background:transparent;border-style:solid; /*设置边框为固体的*/width:0; /*设定新创建的元素*/ position:absolute; /*相对于父容器绝对定位，设置偏移父容器边框距离*/ top:0; right:0;} この時点で、もう一度見てみましょう 効果:
素晴らしい、欠けていた角が実現されました。冒頭で、折り畳まれた角には影の効果があると言いました。次に、.note:before に影のスタイルを追加しましょう。
/*设置元素的阴影效果*/-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
次に、影のスタイルを追加した後の効果を見てみましょう。
この時点で、純粋な CSS3 を使用して折り畳み効果を実現するのは非常に簡単であることがわかりました。
表示用なので高さを固定に設定していますが、自由に設定したい場合は属性を解除してください。
より実践的なチュートリアルについては、引き続き私のスペースに注目してください。読んでいただきありがとうございます。
インターネット技術交換グループへようこそ: 62329335
個人的な声明: 共有されたブログ投稿は完全にオリジナルであり、私たちは実践的なデモンストレーションを通じてあらゆる知識ポイントを検証するよう努めています。