web-dev-qa-db-ja.com

稲妻のデザインを作成します（Flashなど）

T-shirt with Flash symbol

CSSで、The Flash（DC Comics）（またはBig Bang TheoryのSheldon Cooperが着用しているTシャツ）から稲妻のシンボルを再作成しようとしています。

これは、星評価システムのように機能し、代わりに「稲妻評価システム」のみとなります。

ただし、HTMLを最小限に抑えようとしているので、これをCSSのみでスタイル設定したいと思います。

私は次の段階に達しました：

html,
body {
  margin: 0;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}
.wrap {
  height: 50vw;
  width: 50vw;
  position: relative;
  margin: 0 auto;
}
.circ:hover{
  background:gray;
  }
.circ:hover .bolt{
  background:gold;
  }
.circ {
  height: 50%;
  width: 50%;
  background: white;
  border: 5px solid black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:0 0 10px 2px black;
}
.bolt {
  position: absolute;
  top: 5%;
  left: 50%;
  height: 70%;
  width: 30%;
  background: yellow;
  border: 2px solid black;
  border-bottom: none;
  transform: perspective(200px) skewX(-10deg) rotateX(15deg);
}
.bolt:before {
  content: "";
  position: absolute;
  top: 90%;
  left: 20%;
  height: 50%;
  width: 100%;
  background: inherit;
  border: 2px solid black;
  transform:  ;
}
/*
.bolt:after{
  content:"";
  position:absolute;
  top:-40%;left:20%;
  height:50%;
  width:100%;
  background:inherit;
  transform:perspective(50px) skewX(-10deg) rotateX(45deg);
  }*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="wrap">

  <div class="circ">

    <div class="bolt"></div>
  </div>
</div>

しかし、ここから続行する方法がわかりません。

私はperspectiveプロパティを使用しようとしましたが、まだその時点ではまだ十分に理解していないと思います-主に:beforeおよび:afterプロパティが親に適用されるとき。

クリック時に白の背景とボルトの色が変化するため、CSSを使用する方法を知っているため、このためにCSSを選択しました。

（私はここでSVGがより良いオプションかもしれないことを知っていますが、時間制限のためにこれを学ぶことができませんでしたので、「使用方法を知っているもの」、つまりCSSを使用したいと思います）

htmlcsscss3svgcss-shapes
70
jbutler483

SVG

どうぞ @ Professor.CSS。しゅう
円
およびポリゴン

svg {
  background-color: red;
}
<svg width="100px" height="200px" viewBox="0 0 100 150">
  <circle fill="white" stroke="black" cx="50" cy="75" r="50"></circle>
  <polygon stroke="gray" fill="yellow" points="100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0" />
</svg>

またはcss

それはただ ::beforeおよび::after照明の要素。 drop-shadow照明コンテナ上。

body {
  background-color: red;
}
.container {
  -webkit-filter: drop-shadow(2px 2px 0px gray);
}
.circle {
  display: inline-block;
  border-radius: 50%;
  background-color: white;
  border: 5px solid black;
  border-color: black;
}
.lightning {
  position: relative;
  margin: 50px;
  width: 30px;
  height: 50px;
  transform-Origin: 50% 50%;
  transform: skewX(-30deg) skewY(-30deg) rotate(10deg);
  background-color: yellow;
}
.lightning:before {
  position: absolute;
  border-style: solid;
  border-width: 0 0 40px 30px;
  border-color: transparent transparent yellow transparent;
  top: -39px;
  left: -17px;
  content: "";
}
.lightning:after {
  position: absolute;
  border-style: solid;
  border-width: 0 0 40px 30px;
  border-color: transparent transparent transparent yellow;
  bottom: -39px;
  right: -17px;
  content: "";
}
<div class="circle">
  <div class="container">
    <div class="lightning"></div>
  </div>
</div>
97
Persijn

免責事項：複雑な画像にはSVGを使用してください。ただし、CSSをお楽しみいただけますが、実稼働環境の実装ではなく、学習に使用してください。

これは単一のHTML要素で可能ですか？

うん！ ...制限あり-主にボルトの境界線はありません...しかし、ちょっと、最小限のHTML！

非常に大まかな例

注：この例では、擬似要素の子が必要なため、<div>を使用しています。

body {
  background: #F00;
}
div {
  height: 300px;
  width: 300px;
  background: #FFF;
  border-radius: 50%;
  border: solid 5px #000;
  margin-top: 200px;
  position: relative;
}
div:before,
div:after {
  content: '';
  position: absolute;
  transform: skewY(-30deg) rotate(20deg);
}
div:before {
  border-right: solid 70px yellow;
  border-top: solid 160px transparent;
  box-shadow: 50px 100px yellow;
  left: 50%;
  margin-left: -50px;
  top: -70px;
}
div:after {
  border-right: solid 70px transparent;
  border-top: solid 160px yellow;
  bottom: -30px;
  left: 100px;
}
<div></div>
50
misterManSam

免責事項：これらにはSVGをお勧めしますが、だからといってCSSを楽しんではいけないという意味ではありません。これを学習に使用しますが、実稼働実装には使用しません。

これは、単一の要素（+いくつかの擬似）といくつかの背景linear-gradientsで形状を実現する方法です。形状は歪みなく拡大縮小できます。

形状がどのように達成されたかの説明：

  • 黒い境界線を持つ白い円は、疑似要素（border-radius）で:afterを使用して作成された通常のCSS円です。
  • 別の疑似要素（:before）が追加され、X軸とY軸の両方に沿って傾斜して、ボルトのパーツに傾斜した外観を与えます。
  • ボルトは、実際には複数のlinear-gradientsを積み重ねて作成されます。これには6つのグラデーション画像が含まれ、3つはボルトの内側の黄色の部分で、残りの3つは灰色の境界線です。
  • 背景画像（グラデーション）のサイズは、ボルトのサイズによって決まり、それぞれが、稲妻のような外観を生成するように配置されます。
  • ボルトの中央部分は実際には単色のみですが、単色の背景のサイズを制御できないため、グラデーションを使用して生成されます。

注：高さ/幅の変更+遷移の代わりにtransform: scale(...)が使用されている場合、スケーリングは非常にうまく機能します。

.lightning {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin: 50px auto;
}
.lightning:after,
.lightning:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
}
.lightning:after {
  background: white;
  border: 2px solid;
  border-radius: 50%;
  z-index: -1;
}
.lightning:before {
  background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 43%, gray 43%, gray 44%, transparent 44%), linear-gradient(to top left, transparent 56%, gray 56%, gray 57%, yellow 57%), linear-gradient(transparent 0%, gray 0%), linear-gradient(to top left, gray 51%, transparent 51%), linear-gradient(to top left, transparent 49%, gray 49%);
  background-size: 20% 40%, 22% 42%, 22% 42%, 23% 42%, 23% 42%, 23% 42%;
  background-position: 50% 50%, 32% 5%, 70% 100%, 50% 50%, 33% 7%, 69% 98%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform: skewY(-30deg) skewX(-30deg);
  z-index: 2;
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
  transition: all 1s;
}
.lightning:hover {
  transform: scale(1.5);
}
<!-- Script used only for avoidance of prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="lightning"></div>

ボルト用アニメーション付き：

.lightning {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin: 50px auto;
}
.lightning:after, .lightning:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
}
.lightning:after {
  background: white;
  border: 2px solid;
  border-radius: 50%;
  z-index: -1;
}
.lightning:before {
  background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 43%, gray 43%, gray 44%, transparent 44%), linear-gradient(to top left, transparent 56%, gray 56%, gray 57%, yellow 57%), linear-gradient(transparent 0%, gray 0%), linear-gradient(to top left, gray 51%, transparent 51%), linear-gradient(to top left, transparent 49%, gray 49%);
  background-size: 20% 40%, 22% 42%, 22% 42%, 23% 42%, 23% 42%, 23% 42%;
  background-position: 50% 50%, 32% 5%, 70% 100%, 50% 50%, 33% 7%, 69% 98%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform: skewY(-30deg) skewX(-30deg);
  z-index: 2;
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
  transition: all 1s;
}
.lightning:hover:before {
  animation: boltstrike 1s;
}
@-webkit-keyframes boltstrike {
  25% {
    transform: translateX(-5%) translateY(5%) skewY(-30deg) skewX(-30deg);
  }
  50% {
    transform: translateX(7.5%) translateY(-7.5%) skewY(-30deg) skewX(-30deg);
  }
  100% {
    transform: skewY(-30deg) skewX(-30deg);
  }
}
@keyframes boltstrike {
  25% {
    transform: translateX(-5%) translateY(5%) skewY(-30deg) skewX(-30deg);
  }
  50% {
    transform: translateX(5%) translateY(-5%) skewY(-30deg) skewX(-30deg);
  }
  100% {
    transform: skewY(-30deg) skewX(-30deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="lightning"></div>

ここをクリックしてください アニメーション、クリック時の色の変更などの完全なデモをご覧ください.

ボーダーなしの旧バージョン：

.lightning {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.lightning:after,
.lightning:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
}
.lightning:after {
  background: white;
  border: 2px solid;
  border-radius: 50%;
  z-index: -1;
}
.lightning:before {
  background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 50%, transparent 50%), linear-gradient(to top left, transparent 50%, yellow 50%);
  background-size: 20% 40%, 20% 40%, 20% 40%;
  background-position: 50% 50%, 30% 5%, 70% 100%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform: skewY(-30deg) skewX(-30deg);
  z-index: 2;
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
  transition: all 1s;
}
.lightning:hover {
  height: 250px;
  width: 250px;
}
<!-- Script used only for avoidance of prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="lightning"></div>
41
Harry

CSSを使用してこれを完了するために、なんらかのポジショニングでスキューと回転を管理しました。

それは最もきれいではなく、応答性やサイズの変更にも優れていませんが、動作し、短い時間で得ることができる限り近いものです。

コードは次のとおりです。

#lightning {
  position: relative;
  height: 1000px;
  width: 600px;
  background: red;
}
.above,
.below {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 100px;
}
.above .middle {
  background: yellow;
  position: absolute;
  top: 300px;
  left: 100px;
  height: 125px;
  width: 400px;
  -webkit-transform: rotate(111deg) skew(35deg);
  transform: rotate(111deg) skew(35deg);
}
.above .toptri {
  position: absolute;
  height: 200px;
  width: 0px;
  padding: 0px;
  top: -175px;
  left: 300px;
  -webkit-transform: rotate(0deg) skew(141deg);
  transform: rotate(0deg) skew(141deg);
  border-top: 0px transparent;
  border-left: 50px solid transparent;
  border-right: 128px solid transparent;
  border-bottom: 284px solid #FFFF00;
  -webkit-transform: rotate(350deg) skew(141deg);
  transform: rotate(350deg) skew(141deg);
}
.above .bottri {
  position: absolute;
  height: 200px;
  width: 0px;
  padding: 0px;
  top: 400px;
  left: 125px;
  -webkit-transform: rotate(0deg) skew(141deg);
  transform: rotate(0deg) skew(141deg);
  border-top: 0px transparent;
  border-left: 50px solid transparent;
  border-right: 128px solid transparent;
  border-bottom: 284px solid #FFFF00;
  -webkit-transform: rotate(170deg) skew(141deg);
  transform: rotate(170deg) skew(141deg);
}
.below .middle {
  background: grey;
  position: absolute;
  top: 280px;
  left: 80px;
  height: 165px;
  width: 440px;
  -webkit-transform: rotate(111deg) skew(35deg);
  transform: rotate(111deg) skew(35deg);
}
.below .toptri {
  position: absolute;
  height: 160px;
  width: 0px;
  padding: 0px;
  top: -200px;
  left: 265px;
  -webkit-transform: rotate(0deg) skew(141deg);
  transform: rotate(0deg) skew(141deg);
  border-top: 0px transparent;
  border-left: 80px solid transparent;
  border-right: 158px solid transparent;
  border-bottom: 370px solid grey;
  -webkit-transform: rotate(350deg) skew(141deg);
  transform: rotate(350deg) skew(141deg);
}
.below .bottri {
  position: absolute;
  height: 200px;
  width: 0px;
  padding: 0px;
  top: 400px;
  left: 125px;
  -webkit-transform: rotate(0deg) skew(141deg);
  transform: rotate(0deg) skew(141deg);
  border-top: 0px transparent;
  border-left: 50px solid transparent;
  border-right: 128px solid transparent;
  border-bottom: 284px solid #FFFF00;
  -webkit-transform: rotate(170deg) skew(141deg);
  transform: rotate(170deg) skew(141deg);
}
.below .bottri {
  position: absolute;
  height: 160px;
  width: 0px;
  padding: 0px;
  top: 380px;
  left: 100px;
  -webkit-transform: rotate(0deg) skew(141deg);
  transform: rotate(0deg) skew(141deg);
  border-top: 0px transparent;
  border-left: 80px solid transparent;
  border-right: 158px solid transparent;
  border-bottom: 370px solid grey;
  -webkit-transform: rotate(170deg) skew(141deg);
  transform: rotate(170deg) skew(141deg);
}
<div id="lightning">
  <div class="below">
    <div class="toptri"></div>
    <div class="middle"></div>
    <div class="bottri"></div>
  </div>
  <div class="above">
    <div class="toptri"></div>
    <div class="middle"></div>
    <div class="bottri"></div>
  </div>
</div>

CodePen

16
Stewartside

[〜＃〜] css [〜＃〜]

:beforeおよび:after疑似要素、CSS三角形、およびtransformのみを使用するCSS。 bordersはパーセンテージベースではないため、CSSの三角形を使用する場合、この特定のソリューションを応答性にすることは困難です。このソリューションでは、稲妻とそのアウトラインの基礎として2つのdivsを使用します。

ボルトは次の方法で作成されます。

  • ボルトの中央は.boltOuter/.boltInnerで指定されます。傾斜した菱形にするために、X軸とY軸で傾斜した長方形です。
  • 「プロング」は、コンテナに対して相対的に配置された:beforeおよび:after疑似要素です.boltOuter/.boltInner
  • 「プロング」は、CSSの三角形（ゼロのheightとwidthの要素で選択的なborders）を使用して作成されます。三角形は、目的の角度になるように回転します
  • .boltInnerのすべての要素を小さくし、.boltOuterからオフセットして、.boltOuterをシルバーのアウトラインとして機能させます
body {
    background-color: red;
}
.circle {
    background-color: white;
    border: 5px solid black;
    border-radius: 50%;
    height: 400px;
    left: 100px;
    position: relative;
    top: 200px;
    width: 400px;
}
.boltOuter, .boltInner {
    position: absolute;
}
.boltOuter:before, .boltOuter:after, .boltInner:before, .boltInner:after {
    content: "";
    display: block;
    height: 0;
    position: absolute;
    transform: rotateY(-60deg);
    width: 0;
}
.boltOuter {
    background-color: silver;
    height: 300px;
    left: 140px;
    top: 50px;
    transform: skewX(-10deg) skewY(-20deg);
    width: 110px;
    z-index: 2;
}
.boltOuter:before, .boltOuter:after {
    border: 150px solid transparent;
    z-index: 1;
}
.boltOuter:before {
    border-bottom-color: silver;
    border-right-color: silver;
    left: -150px;
    top: -200px;
}
.boltOuter:after {
    border-left-color: silver;
    border-top-color: silver;
    bottom: -200px;
    right: -150px;
}
.boltInner {
    background-color: gold;
    height: 290px;
    left: 5px;
    top: 5px;
    width: 100px;
    z-index: 4;
}
.boltInner:before, .boltInner:after {
    border: 140px solid transparent;
    z-index: 3;
}
.boltInner:before {
    border-bottom-color: gold;
    border-right-color: gold;
    left: -143px;
    top: -190px;
}
.boltInner:after {
    border-top-color: gold;
    border-left-color: gold;
    bottom: -190px;
    right: -143px;
}
<div class="circle">
    <div class="boltOuter">
        <div class="boltInner"></div>
    </div>
</div>

JSフィドル：https://jsfiddle.net/o7gm6dsb/

14
Hidden Hobbes

単一のdivで結果を取得できる別のCSSメソッド。

このメソッドは、 http://fontello.com/ を使用して生成されたカスタムアイコンフォントを使用します。これの利点は、ほとんど労力やコードを必要とせずにフォントがスケーラブルであることです。

  • フォントは、@font-faceを使用して含まれています。この例では、フォントはCSSファイルに直接埋め込まれています
  • .boltは、border-radius: 50%;を使用して、含まれている円を描画するために使用されます
  • :before疑似要素はボルトに使用され、.boltに対して相対的に配置され、円の境界の外側に移動できるように中央に配置されます。
  • 新しいWebkitブラウザーでは、-webkit-text-stroke: 3px silver;を使用してボルトにアウトラインを提供できます
  • -webkit-text-strokeがサポートされていない場合text-shadowを使用して、代わりに仮の境界線を提供できます
@font-face {
  font-family: 'fontello';
  src: url('data:application/octet-stream;base64,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') format('woff'),
url('data:application/octet-stream;base64,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') format('truetype');
}
body {
  background-color: red;
}
.bolt {
  background-color: white;
  border: 5px solid black;
  border-radius: 50%;
  height: 100px;
  margin: 50px;
  position: relative;
  text-align: center;
  width: 100px;
}
.bolt:before {
  -webkit-text-stroke: 3px silver;
  color: gold;
  content: '\e800';
  display: block;
  font-family: "fontello";
  font-size: 200px;
  line-height: 100px;
  position: absolute;
  text-shadow: 2px 0 0 silver, -2px 0 0 silver, 0 2px 0 silver, 0 -2px 0 silver, 1px 1px silver, -1px -1px 0 silver, 1px -1px 0 silver, -1px 1px 0 silver;
  width: 100%;
}
<div class="bolt"></div>
11
Hidden Hobbes

htmlシンボル を使用すると、わずかに異なる照明ボルトを実現できます。すべてのブラウザがすべてをサポートしているわけではないことに注意してください。

以下に、css/htmlだけでできることの簡単な例を示します。

.circle {
        border-radius: 50%;
    border: 4px solid black;
        width: 100px;
        height: 100px;
    font-size: 70px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    background: white;
}

.square{
    border: 4px solid red;
    width: 106px;
    height: 106px;
    background: red;
}
<div class="square">
    <div class="circle">⚡</div>
</div>

これの利点は、これが単純で、何も必要としないことです。欠点は、ボルトがわずかに異なることであり、すべてのブラウザーがシンボルをサポートするわけではないということです。

正確な画像が必要な場合は、SVGで生成し、svgまたはフォントとして追加します。

悲しいことに、サインはウィンドウに表示されていないように見えますが、macos（クロム）では次のように見えます：

enter image description here

Ubuntuでも表示されますが、外観が異なります。

6
Salvador Dali

私はあなたがSVGを望まないことを知っていますが、それは本当に簡単で、cssでそれを作るよりもずっと速いです：

  • 稲妻のスクリーンショットを作成します。
  • 移動先： http://www.base64-image.de/ image（jpg、png、gif）をアップロードします。
  • CSSの背景画像コードを取得
2
user3004798

マジカルDrawsvg前提条件なしで想像力を解放し、SVGオブジェクトを自由に描画できるWebサイトを使用することをお勧めします。スキル。

enter image description here

描画が完了したら、保存ボタンをクリックするだけで、SVGコードを取得できます。前の画像の例のコードは次のとおりです。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="200px" viewBox="0 0 100 200" preserveAspectRatio="xMidYMid meet" >
    <rect id="svgEditorBackground" x="0" y="0" width="100" height="200" style="stroke: none;" fill="red"/>
    <circle id="e1_circle" cx="50.9398" cy="93.985" stroke="black" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" r="48.5487" fill="white" transform="matrix(1 0 0 1 -1.12782 4.13534)"/><g id="e4_group" fill="yellow" style=""/>
    <polyline stroke="black" id="e5_polyline" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" points="67.1053 21.8045 33.6466 74.812 50.188 69.5489 25 114.286 45.6767 106.767 14.8496 158.271 70.8647 92.8571 45.3008 97.7444 69.3609 56.391 50.188 62.0301 66.7293 21.8045" fill="yellow"/>
</svg>

お役に立てれば。

0
Zakaria Acharki