FREE-QUENCY BLOG

有限会社フリークエンシーのブログです。
渋谷区代々木にあるWEB/アプリ開発会社です。技術ネタなど更新中。

2014年07月

システムエンジニアなのに、何故かCSSネタを連投。
CSSのみで良い感じにドロップシャドウもつけることができる。
出来上がりとしてはこんな感じ。


コードはこんな感じ。四隅の角丸が要らないなら、最初の3行の指定は要らない。
.baseShadow{
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;

	box-shadow:rgba(113, 135, 164, 0.65098) 3px 3px 4px 2px;
	-webkit-box-shadow:rgba(113, 135, 164, 0.65098) 3px 3px 4px 2px;
	-moz-box-shadow:rgba(113, 135, 164, 0.65098) 3px 3px 4px 2px;
}

そういえば社内でチラッと話が出ていたけれど、最近のモダンブラウザではCSSだけで円くらいは簡単に描けたりする。なぜか個人的に描く必要性に迫られたので調べて見た。
コードとしてはこんな感じ。

.base_circle a{
  width: 200px;
  height: 200px;
  -webkit-border-radius: 50%;/* width,heightの大きさの50%で角丸 */
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #E6E6FA;/* 背景色を指定 */
  opacity: 0.9;
  text-align: center;
position:absolute;
top:185px;
left:80px;
}
意外と単純。こんな感じにリンクボタンとして使えたりする。


まあ業務では使いどころが難しそうだけど…。
IE8が切れるようになったら、ちょっとしたパーツは大体CSSで表現できるようになりそう。

↑このページのトップヘ