oreskboysのブックマーク / 2013年8月19日

oreskboys id:oreskboys

2013年8月19日のブックマーク (2件)

[CSS] 画像を用いずにCSSとHTMLで吹き出しを作成する - YoheiM .NET
こんにちは、@yoheiMuneです。以前にHTMLとCSSを使って三角形を作成する方法を書いた内容の続きで、今回はHTMLとCSSだけで吹き出しを作成する方法をブログに書きたいと思います。画像を用いずにHTMLとCSSだけで吹き出しを作成する三角形を作る実装を、:before疑似要素と:after疑似要素に用いることで、吹き出しを作成したいと思います。今回以下のようなものを作成します。（ソースコード） <style type="text/css"> /* 吹き出し本体部分のスタイル */ .baloon { width: 200px; height: 100px; background-color: #fffaee; border: 2px solid #66ff66; border-radius: 10px; -webkit-border-radius: 10px; mar
oreskboys 2013/08/19
リンク
[CSS] HTMLとCSSを使って三角形を作成する方法 - YoheiM .NET
こんにちは、@yoheiMuneです。今日は、HTMLとCSSを使って三角形を作成する方法をブログに書きたいと思います。マークアップを仕事にしている人には当たり前と思うかもしれませんが、自分はこの実装を知ってびっくりだったのでブログに残したいと思います。 HTMLとCSSで三角形を作成する三角形の作成方法はいろいろとあるかと思いますが、今回はBorderを使った三角形を作成します。（作成例）具体的な実装内容は以下となります。 <style type="text/css"> .triangle { /* 要素自体の大きさは不要のため、0に設定する */ width: 0px; height: 0px; /* border-topとborder-bottomの太さを同一にすると、三角形の頂点が真ん中になる */ border-top: 30px solid transparent;
oreskboys 2013/08/19
リンク
- 2013年8月22日
- 2013年8月19日
- 2013年8月14日