2010/11/29 by hayachi
以前紹介したドロップシャドウcssがありましたが、文字のドロップシャドウがあるのを知ったので
ちょっとメモ
text-shadow: 1px/*横方向*/ 1px/*下方向*/ 3px/*ぼかし方向*/ #000;
細かく指定する時はこんな感じ
text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #000;
これを指定したらどのようになるのかちょっとスクショとり忘れてしまったのでわかりうら
続きを読む
2010/11/17 by hayachi
iPhoneサイトを制作しているときに使用した「displey:table-cell」自分も若干理解していない部分があったため復習のためにまとめてみました。
Table-cellとは簡単にいうとcssだけでテーブルの構造ができるプロパティでTable-cellはhtmlタグでいうtd ,thタグの部類になります。
左のサイズが固定の３カラムレイアウトの場合
html
left
center
right
css
body{
続きを読む
2010/11/15 by hayachi
フォームのコーディングする時テキストバーとボタンの画像がなかなか揃わなくてパディングをいじったりマージンいじったりしていました。
そんなcssの微調整せずにできるフォームの作り方を紹介します。
まず全体の画像とボタンだけの画像２つを用意します。
form.jpg
form2.jpg
html
ボタンに画像をつけます。
css
#f
続きを読む
2010/10/31 by hayachi
css3でグラデーションや角丸の他になんかcss上でデザイン出来ちゃうものあいかなと思い探してみました。
ちょっとメモがてらに紹介したいと思います＾＾
css
#shadow {
width:300px;
height:300px;
background-color:#ffffff;
border:1px solid #ccc;
-webkit-box-shadow:3px 10px 3px #666666;
-moz-box-shadow:3p
続きを読む
2010/10/28 by hayachi
今まで１つのボタンにわざわざ２枚の画像を用意してロールオーバーさせていました；
どのボタンのロールオーバーの画像だかわからなくなっちゃったりしたので１枚の画像でできるロールオーバーを紹介したいと思います。
画像はロールオーバーしたものも一緒にして１枚で保存します。
html
まずはulとliにidを指定します。
button
button2
button3
button
続きを読む
2010/10/21 by hayachi
フォトショでグラデーション作るのまんどくせ(・8・)
まじまんどくせ(・8・)
切り出すのもまんどくせ(・8・)
と思い試しにcssだけで作ってみました。
上からのグラデーションの場合
html
大丈夫だ、問題ない。
css
#enoch{
color:#fff;
font-size:20px;
height:100px;
padding:10px;
/* For WebKit (Safa
続きを読む
iPhoneとiPhone4では解像度が違うらしい、iPhone4では画像を２倍の解像度で表示されてしまい折角のデザインが台無し(・ω・｀)
そんな時は画像をあらかじめ２倍の解像度で切り抜き今度はiPhoneでおっきく表示されないようにcssで大きさを指定してあげればできあがり＾＾
背景画像の場合は
.sumple{
background: url(./image/bg_image.png) repeat 0 0;
-webkit-backgro
続きを読む
2010/09/15 by hayachi
前回書きましたが、今回はロールオーバさせている画像を反映させる方法をメモしたいと思います。
html
htmlのhead部分
css
#rollover01 {width:40px;height:200px;}
a#rollover01:link {background:url(mouse_on.png);}
a#rollover01:visited {background:url(mouse_on.png);}
a#rollover01:h
続きを読む
2010/09/06 by hayachi
切りだしするのが面倒くさいので試しに使ってみました。
.kadomaru{
-moz-border-radius: 20px; /*Firefox*/
-webkit-border-radius: 20px; /*Safari*/
}
でできるみたいです。
ポイントごとは
Fire Fox
.kadomaru{
-moz-border-radius-topright: 0.65em; /*上右*/
-moz-border-radi
続きを読む
2010/03/08 by マッチー
ケータイ向けのページを作っていて、実機テストなんかをしてみると、何かドコモの端末だけスタイルが効いていない、みたいな事態に遭遇することがあるかもしれない。っていうか、あった。
まあ理由はよく分かんないんすけど、ドコモのケータイはＣＳＳを使うのにちょっち面倒な手続きが必要みたいです。
まずはＸＭＬ宣言やらＤＯＣＴＹＰＥの記述から。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
続きを読む
