CSS Arrow Please - By Simon Hoejberg - @shojbergCreate and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like.
[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
CSSだけで簡単に吹き出しを作成する方法4つ！
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapper { padding: 30px; position: relative; } .box { position: relative; background: #ccc; height: 50px; width: 100px; margin-bottom: 20px; } .box:after { content: ''; position: absolute; border-top: 10px solid #ccc; border-right: 5px solid transparent; border-left: 5px solid tran
[CSS]動きがカワイイ！扇形にふわりと広がるツールチップ -Circular Tooltip
Creating a Radial Menu in CSS マウスのホバーで、「扇形のツールチップ」がアニメーションで表示されます。 続いて、二つ目のデモ。上記にインスパイアされたもので、動きが絶妙ですごいです！ Circular Tooltip こちらはクリックで、「扇形に広がるツールチップ」がアニメーションで表示されます。 実装はデモページにも掲載されていますが、下記のようになっています。 HTML !-- content to be placed inside <body>…</body> --> <a class='button ctrl' href='#' tabindex='1'>★</a> <ul class='tip ctrl'> <li class='slice'><a href='#'>✦</a></li> <li class='slice'><a href='#'>✿
ツールチップ｜jQuery plugin｜Ajax｜PHP & JavaScript Room
［CSS］jquery.cluetip.css ［JS］jquery.js v1.2.6、jquery.dimensions.js、jquery.hoverIntent.js、jquery.cluetip.js HEAD <!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.dimensions.js" type="text/javascript"></script> <script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional --> <script src="jquery.cluetip.js" type="t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
