CSS3を使用したツールの作成

みなさんこんにちは！

すでに何度か、私は通常のツールチップを作るように頼まれました。 すべてがうまくいくだろう：ラウンドでブロックを作り上げ、 ここから三角形を取り、出来上がり。 ただし、すべてがそれほど単純ではありません。 結局のところ、デザイナーの想像力の飛行は素晴らしいです。 傾斜のある矢印があり、次にフレームがあり、次に影があります。 もちろん、写真のすべてを切り裂くことができますが、これは昔ながらの非現実的です。 少なくともたくさんのラッパーがあるため、すべてがすべての方向に伸びます。

想像力を少し加えると、これはすべてCSSで完全に解決できることが判明しました。

言葉から行為へ。



私はすぐに、すべての例が記事の下部にあるリンクにあると言わなければなりません。 しかし、ここには超自然的なものは何もないため、「高次の問題」を反映した投稿を読むことはできません。



だから、私たちはワークを行います。

1つのdivと1つまたは2つの擬似要素が必要です。

div{ position:relative; display:inline-block; padding:10px; min-height:30px; min-width:100px; font-family:'Trebuchet MS'; margin-right:30px; text-align:left; } div:before, div:after{ content:''; position:absolute; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フレーム付きのツールチップ

ツールチップ自体を丸めてフレームを作成します。 次に、矢印を使用して擬似要素を一時停止し、変換の助けを借りて、最初にそれを回転させてから傾けます。 その結果、傾斜した平行四辺形が得られます。 それにフレームを与え、z-index：-1を通してメインブロックの「下」に隠します。 しかし、矢印の上にツールチップフレームがあります。 これを行うには、別の擬似要素を取得し、このフレームの上に正確に配置し、背景色をツールチップと同じに設定します。 以上です。 コードは次のとおりです。

 .t1{ border-radius:10px; background:#efefef; border:1px solid #777; } .t1:before{ bottom:-5px; left:10px; width:20px; height:10px; -webkit-transform:rotate(-30deg) skewX(-45deg); -moz-transform:rotate(-30deg) skewX(-45deg); -o-transform:rotate(-30deg) skewX(-45deg); -ms-transform:rotate(-30deg) skewX(-45deg); background:#efefef; z-index:-1; border:1px solid #777; } .t1:after{ left:13px; bottom:-1px; width:15px; height:1px; background:#efefef; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

矢印付きのシンプルなツールチップ

ここではすべてが簡単です。 はじめに書いたように、ブロックを取り、疑似要素を通して三角形をそれに掛けます。

 .t2{ background:#333; border-radius:5px; color:#ccc; } .t2:before{ left:10px; bottom:-10px; width:0px; height:0px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #333; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

影付きのツールチップ

ここでは、ほとんどすべてが最初のバージョンと同じで、シャドウを追加するだけです。

そして、z-indexを正にします（またはまったくしません）。 シャドウはシャドウであり、補助的な擬似要素によって非表示にすることはできません。 すぐに、このデザインは、下の場所のツールチップでの予約を意味することに注意してください。

 .t3:before{ bottom:-4px; right:10px; width:20px; height:10px; -webkit-transform:rotate(30deg) skewX(45deg); -moz-transform:rotate(30deg) skewX(45deg); -ms-transform:rotate(30deg) skewX(45deg); -o-transform:rotate(30deg) skewX(45deg); background:#efefef; z-index:1; box-shadow:4px 5px 5px 0px #777; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、グラデーション付きのツールチップがありますが、説明しません。 そこからすべてが類推されます。 「可愛さ」だけが追加されますが、これは私の物語の主題ではありません。

半透明のツールチップ

同様に、矢印付きの「通常のツールチップ」と違いはありません。 rgbaを介して背景を設定してください。 注文のために、私もそれをひっくり返しました。

 .t5:before{ left:15px; top:-10px; width:0px; height:0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgba(51,51,51,0.5); -webkit-transform:skewX(45deg); -moz-transform:skewX(45deg); -ms-transform:skewX(45deg); -o-transform:skewX(45deg); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それがすべてのトリックです。

例はこちらです。



この投稿は、その斬新さとユニークさで目立ったものではなく、「ある」または「何かをスパイする」というカテゴリからの可能性が高いと言えます。 多くの人が尋ねるので、それは役に立ちます。

ご清聴ありがとうございました。