CSSでハートを作成する方法
CSS3は、HTMLとCSSだけを使ってWebサイト上に構築できるものの実現可能性を高めます。あなたは私たちが以前に特集した素晴らしい例を見つけることができます。しかし、私たち自身に先んじすぎないようにしましょう。複雑な設計には頭痛の種となるコードが必要になります。.
代わりに、私たちはあなたを助けるために簡単なものを作成しようとしています 最初にCSSで形と位置を理解する, より高度なデザインに挑戦する前に。バレンタインデーはもうすぐ出るので、HTMLとCSSを使ってハートの形を作りましょう。.
基礎
基本的には、長方形や円のような1つ以上の基本的な形状を結合することによって新しい形状を作成できます。ハートの形を調べると、それが構成されていることがわかります。 二つの円と四角形の組み合わせ. HTML要素は基本的に正方形または長方形です。 CSS3のボーダー半径のおかげで、長方形を円に簡単に変換できます。.
を追加することから始めます 次に、幅と高さを等しく指定して正方形にします。好きな背景色を選択してください. 次は、円を作ります. 新しい要素を追加するのではなく、擬似要素を利用します。, 正方形と一緒に我々はこのような結果を得るでしょう： その後、擬似要素を使って2番目の円を作成します。 結果は以下のとおりです。 擬似要素セレクタを次のようにグループ化することで、これら2つの同じスタイルを組み合わせることができます。 ただ！それはまだ正しい方向ではありませんが、私たちはハート型をしています。それをまっすぐにするために、私たちはCSS3変換を使います. 変形は形状の主な要素に与えることができます。ここで、それは正方形を意味します。変換されると、擬似要素は自動的に主要素に続いてその位置を変更します. それが見られるようにここで私たちは心を回転させます “立っている”. そしてこれが私たちの心が今のように見えるものです. 上記のハート形の完全なコードは、HTMLでは次のとおりです。 そして私たちのCSSでは、それは次のようになります。 これで、アルファチャンネルが これで私たちは完璧なハート型になりました。 背景を他の色に置き換える 簡単に（例えばピンクや赤）。ここでの唯一の欠点は、 枠を追加できませんでした 積み重ねられた要素による形状に。境界線を追加すると、ハートが変に見えます. CSS3では、ハートのような形を作成することが簡単にできるようになりました。 border-radiusプロパティによって、 要素、さらには擬似要素を円にする. CSS3変換では、 オブジェクトの座標を回転または移動する 簡単に. あなたはあなたの創造性と想像力によってのみ制限されています!
.ハート形位置：相対;幅：200ピクセル。高さ：200ピクセル。背景色：rgba（250、184、66、0.8）。
：前 そして ：後. 最初に設定します ：前 最初の円としての擬似要素divと同じように、幅と高さが同じ大きさの正方形にします。それから、それを50％のborder-radiusを与えることによってそれを円に変換し、それを正方形の左側に置く. .ハート型：の前：絶対位置;下：0px。左：-100ピクセル。幅：200ピクセル。高さ：200ピクセル。 content： "; -webkit-border-radius：50％; -moz-border-radius：50％; -o-border-radius：50％; border-radius：50％;背景色：rgba（250,184,66） 、0.8）;
：後 最初に作成した円と同じスタイルで。それから私達はまた正方形の上にそれを置きます. .ハート形：位置：絶対;上：-100ピクセル。右：0px。幅：200ピクセル。高さ：200ピクセル。 content： "; -webkit-border-radius：50％; -moz-border-radius：50％; -o-border-radius：50％; border-radius：50％;背景色：rgba（250,184,66） 、0.8）;
.ハート形：前、ハート形：後位置：絶対;幅：200ピクセル。高さ：200ピクセル。 content： "; -webkit-border-radius：50％; -moz-border-radius：50％; -o-border-radius：50％; border-radius：50％;背景色：rgba（250,184,66） 、0.8）; .heart-shape：before bottom：0px; left：-100px; .heart-shape：after top：-100px; right：0px;
.ハート形-webkit-transform：rotate（45deg）; -moz-transform：rotate（45deg）; -ms-transform：rotate（45deg）; -o-transform：rotate（45deg）;変換：回転（４５度）。
結果：
.ハート形位置：相対;幅：200ピクセル。高さ：200ピクセル。 -webkit-transform：rotate（45deg）; -moz-transform：rotate（45deg）; -ms-transform：rotate（45deg）; -o-transform：rotate（45deg）;変換：回転（４５度）。背景色：rgba（250、184、66、1）。 .heart-shape：before、.heart-shape：after position：absolute;の後に配置します。幅：200ピクセル。高さ：200ピクセル。 content： "; -webkit-border-radius：50％; -moz-border-radius：50％; -o-border-radius：50％; border-radius：50％;背景色：rgba（250,184,66） 、1）; .heart-shape：before bottom：0px; left：-100px; .heart-shape：after top：-100px; right：0px;
rgba（250、184、66、1） バックグラウンドで 1 透明度を削除します。今、これは私たちの心が見えるものです.
結論
