HTMLとCSSによるAndroidロゴの実装

16473 ワード
android html css テキストリンク
この記事では、HTMLとCSSでAndroidロゴを実装します.これは仕事のトンのように見えるかもしれないが、我々は一歩一歩それを通過します.できるだけ説明しようと思います.
この記事の終わりにGithubのコードベースへのリンクを共有します.

簡単なHTMLファイルを作成することから始めましょうindex.html , このコードが含まれます.
<!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Android Logo</title>
  </head>

  <body>
    <div class="android">
        <div class="head">
          <div class="left_antenna"></div>
          <div class="right_antenna"></div>
          <div class="left_eye"></div>
          <div class="right_eye"></div>
        </div>
        <div class="body">
          <div class="left_arm"></div>
          <div class="right_arm"></div>
          <div class="left_leg"></div>
          <div class="right_leg"></div>
        </div>
    </div>
  </body>

</html>
このマークアップはかなり自明です.それは、脚が体のセクションにある奇妙なようですが、私たちは進行中の概念を理解する心配しないでください.
次の作成index.css ファイルとリンクをあなたにindex.html ファイル.
<link rel="stylesheet" href="index.css">
この時点でマークアップ要素にコンテンツがないので、ユーザーインターフェイスに表示されません.
我々は垂直方向と水平方向にAndroidの整列センターで起動しましょう.我々は、flexボックスを使用してこれを達成します.
です
  • 文書の本文を与えるheight of 100vh . これにより、本体の高さを現在のデバイスの高さに設定します.高さプロパティは、垂直にロゴを整列するためにも必要です.
  • セットdisplay ドキュメントの本文のプロパティflex . このプロパティは、柔軟な項目に柔軟性の長さを設定します.これにより、他のflexプロパティを設定することができます.
  • セットjustify-content 体の性質center . デフォルトでは、いくつかのHTML要素は親要素の幅の100 %を占めます.このプロパティは、その水平軸に沿って要素の位置を設定します.
  • セットalign-items 体の性質center . 高さを設定すると、すべての子要素がビューの中央に垂直に配置されます.
  • divのすべてのdivの位置をrelative に設定し、#A4CA39
    • この時点でindex.css ファイルは次のようになります
    body {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
}

div div {
    background: #a4ca39;
    position: relative;
}
    私たちはあなたのブラウザでこれをアクセスしようとすると、私たちのレイアウトをすべて設定している場合は、何も白いスペースを参照してくださいされません.更なるADOなしで、我々はAndroidスタイリングに飛び込みましょう
    我々は、Android自体をスタイリングすることから始めます
    です
  • Androidクラスの幅と高さを設定する.android ) to 340px and 400px それぞれ.
    • それから、我々はスタイルを我々のAndroidロゴの先頭にします
    です
  • ヘッドクラスの幅と高さを設定する.head ) to 200px and 100px それぞれ.
  • トッププロパティを32px アンテナのスペースを作る.
  • Androidの頭の半円形を実現するために、境界半径プロパティを0に設定します220px 220px 0 0 . これは、先頭の左上、右上、右下、下のそれぞれの境界半径を設定します.我々はここで短い手のプロパティを使用して、我々はよく使用できるborder-top-left-radius, border-top-right-radius など.
    • この時点で我々は、このように飛び出る私たちの人造人間のロゴの幾分半円頭を持っている必要があります

    Waiting for the css code? No sorry I won't give it to you just yet. Try to follow along and see how much of this you can get correctly, it will make your learning experience better.


    進みましょう

    次はAndroidの目とアンテナです


    目


    類似性については、次のようにします.
  • 両方の目の背景色を白に設定します.
  • 幅と高さを20px .
  • 位置プロパティを絶対値に設定します.これにより、必要な位置に移動できます.
  • トッププロパティを42px .
  • に対する境界線半径100% .
    • 相違点は次のようにします.
  • 左の左のプロパティを設定する50px .
  • 右の目の右のプロパティを設定します50px .

    • アンテナ


    類似性については、次のようにします.
  • 幅と高さを6px and 50px .
  • 位置プロパティを絶対値に設定します.これにより、必要な位置に移動できます.
  • トッププロパティを-34px .
  • に対する境界線半径3px .
    • 相違点は次のようにします.
  • 左アンテナの左のプロパティを設定します50px そして、- 30度のためにそれを回転させてください
  • 右側のアンテナの右側のプロパティを50px そして、それを30度程度回転させる
    • この時点で我々は、このように見える私たちの人造人間のロゴの頭を持っている必要があります

    次は体


    これは実際には単純な部分であり、単なる矩形であり、私たちが頭のためにしたのと同じように境界半径プロパティを操作するようになります.
    Androidロゴの本体には、次のようにします.
  • 幅と高さを200px and 184px それぞれ.
  • トッププロパティを42 pxに設定します.
  • 境界線半径を0 0 25px 25px .
    • この時点で我々は、このように見える私たちの人造人間のロゴの頭を持っている必要があります

    はいはい、その広い笑顔を放つ.

    次は腕と脚


    腕と脚には類似点があります.
  • 両方の腕と足に幅を設定します50px .
  • 絶対位置に位置を設定します.
    • 腕の類似点については、次のようにします.
  • 高さを設定する150px .
  • 境界線半径を25px .
    • 両腕の違いは、彼らが体から引き離されるべきであるということです58px 両側に.
    足の類似点については、次のようにします.
  • 高さを設定する100px , ロゴの脚が腕より短いので.
  • 境界線半径を0 0 25px 25px .
  • トッププロパティを192px . これは、体の下に足をプルし、またそれらの間に少しのスペースを追加します.
    • つの足の間の違いは、彼らが40px 両側に.

    我々のアンドロイドロゴを見てください



    この時点でindex.css 次のようになります.
    body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div div {
  background: #A4CA39;
  position: relative;
}

.android {
  height: 400px;
  width: 340px;
}

.head {
  width: 200px;
  height: 100px;
  top: 32px;
  border-radius: 220px 220px 0 0;
}

.left_eye,
.right_eye {
  background: #fff;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 42px;
  border-radius: 100%;
}

.left_eye {
  left: 50px;
}

.right_eye {
  right: 50px;
}

.left_antenna,
.right_antenna {
  width: 6px;
  height: 50px;
  position: absolute;
  top: -34px;
  border-radius: 3px;
}

.left_antenna {
  left: 50px;
  transform: rotate(-30deg);
}

.right_antenna {
  right: 50px;
  transform: rotate(30deg);
}

.body {
  width: 200px;
  height: 184px;
  top: 42px;
  border-radius: 0 0 25px 25px;
}


.left_arm,
.right_arm,
.left_leg,
.right_leg {
  width: 50px;
  position: absolute;
}

.left_arm,
.right_arm {
  height: 150px;
  border-radius: 25px;
}

.left_leg,
.right_leg {
  height: 100px;
  top: 192px;
  border-radius: 0 0 25px 25px;
}

.left_arm {
  left: -58px;
}

.right_arm {
  right: -58px;
}

.left_leg {
  left: 40px;
}

.right_leg {
  right: 40px;
}
    githubの上の倉庫へのリンクは、ここにあります

    ネドゥユドバット / アンドロイド


    純粋なCSSとHTMLで作られるアンドロイドロゴ


    アンドロイド


    これは、HTMLとCSSで構築されたAndroidのロゴです
    リンクInterface
    View on GitHub
    満員preview
    どうぞお気軽に.コメントと訂正は歓迎されます.
    Laravelフレームワーク実装のアップロード画像から七牛機能の詳細
    HTTPとは?