“
Ultimate CSS Gradient Generator“ を使って、自分好みのボタンを作る。
いろいろなグラデーションをCSSに生成できる“Ultimate CSS Gradient Generator“
使い方は、見たまま直感で使える為、説明は省きます。
CSS自動生成ジェネレータで生成したデザインに、ちょっとプラスαでより自分好みに仕上げようという手抜き作業です。
海外には、こういう便利なサイトがたくさんあって楽しいですね！
ちなみに、このグラデーションは、IEで表示確認するとショボーンな結果が待っています。
“Ultimate CSS Gradient Generator“ も対応していないので使えません。
ブラウザに依存してしまうので、悲しいが仕方ない･･･。
別の対応策も時間があれば考えます。
自動生成ボタン
button
“Name:Shape 1 Style“ のグラデーションをそのままボタン風にしました。
CSS
.gradation_btn1 {
padding: 5px 0px;
width: 100px;
text-align: center;
background: #b7deed; /* Old browsers */
background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7deed), color-stop(50%,#71ceef), color-stop(51%,#21b4e2), color-stop(100%,#b7deed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* IE10+ */
background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */
}
5行目～12行目までが自動生成された内容です。
さて、上記のボタンに手を加えて、以下のようなグローバルメニューを作ります。
グローバルメニュー
HTML
<ul class="gradation_btn2">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
CSS
ul.gradation_btn2 {
margin: 0;
padding: 0;
width: 400px; /* 全体の幅 */
border-top: 1px solid #5CC8ED;
border-left: 1px solid #B9DDEA;
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.3); /* 影 Safari,Google Chrome用 */
-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.3) ; /* 影 Firefox用 */
box-shadow: 0 3px 5px rgba(0,0,0,0.3) ; /* 影 */
list-style-type: none;
}
ul.gradation_btn2 li {
position: relative;
display:table-cell;
padding: 5px 0px;
width: 100px; /* ボタン１つの幅 */
border-right: 1px solid #B9DDEA;
text-align: center;
background: #b7deed; /* Old browsers */ /* IE10+ */
background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 17%, #21b4e2 25%, #b7deed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7deed), color-stop(17%,#71ceef), color-stop(25%,#21b4e2), color-stop(100%,#b7deed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 17%,#21b4e2 25%,#b7deed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b7deed 0%,#71ceef 17%,#21b4e2 25%,#b7deed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b7deed 0%,#71ceef 17%,#21b4e2 25%,#b7deed 100%);
background: linear-gradient(to bottom, #b7deed 0%,#71ceef 17%,#21b4e2 25%,#b7deed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */
}
Comments (0)
ちょっと付箋が欲しかったので作ってみました。
よくある:beforeや:afterの擬似要素を利用して背景（影）にした作り方です。
z-indexプロパティで擬似要素の重なりを背景にするのがポイントです。
親要素がoverflow:hidden;になっているとz-indexプロパティは有効にならないので、気をつけてください。
付箋 見本１
HTML
<div class="husen1"><p>テキスト</p></div>
CSS
.husen1 p {
position: relative;
padding: 3px 0px;
width: 200px;
border: 1px solid #CCC;
background-color: #666;
color: #FFF;
text-align: center;
}
.husen1 p:before {
position: absolute;
top: 0px;
left: 3px;
z-index: -1; /* 擬似要素を背面へ */
padding: 1px 0px;
width: 195px;
background-color: transparent;
color: transparent;
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.5); /* 影 Safari,Google Chrome用 */
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.5) ; /* 影 Firefox用 */
box-shadow: 0 5px 5px rgba(0,0,0,0.5) ; /* 影 */
content: "a"; /* 表示されない文字 */
-webkit-transform: rotate(3deg); /* 3度の回転変形 Safari,Google Chrome用 */
-moz-transform: rotate(3deg); /* 3度の回転変形 Firefox用 */
-ms-transform: rotate(3deg); /* 3度の回転変形 IE用 */
transform: rotate(3deg); /* 3度の回転変形 */
}
付箋 見本２
マーカー付きの白付箋です。
HTML
<div class="husen2"><p>テキスト</p></div>
CSS
.husen2 p {
position: relative;
padding: 3px 0px;
width: 200px;
border: 1px solid #CCC;
background-color: #fff;
color: #666;
text-align: center;
}
.husen2 p:before {
position: absolute;
top: 0px;
left: 3px;
z-index: -1; /* 擬似要素を背面へ */
padding: 1px 0px;
width: 195px;
background-color: transparent;
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.5); /* 影 Safari,Google Chrome用 */
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.5) ; /* 影 Firefox用 */
box-shadow: 0 5px 5px rgba(0,0,0,0.5) ; /* 影 */
content: "a"; /* 表示されない文字 */
-webkit-transform: rotate(3deg); /* 3度の回転変形 Safari,Google Chrome用 */
-moz-transform: rotate(3deg); /* 3度の回転変形 Firefox用 */
-ms-transform: rotate(3deg); /* 3度の回転変形 IE用 */
transform: rotate(3deg); /* 3度の回転変形 */
}
.husen2 p:after {
position: absolute;
top: 0px;
right: 0px;
padding: 3px 0px;
width: 10px;
background-color: #6BBDE3; /* マーカーの色 */
color: transparent;
content: "a"; /* 表示されない文字 */
}
付箋 応用
重なって透けて見える付箋。
使いドコロが難しいかな。
HTML
<div class="husen3"><p>テキスト</p></div>
CSS
.husen3 p {
position: relative;
padding: 3px 0px;
width: 200px;
border: 1px solid #FFF;
background-color: rgba(255,255,255,0.7);
color: #666;
text-align: center;
}
.husen3 p:before {
position: absolute;
top: 0px;
left: 8px;
z-index: -1; /* 擬似要素を背面へ */
padding: 3px 0px;
width: 200px;
border: 1px solid #6BBDE3;
background-color: #6BBDE3;
color: transparent;
content: "a"; /* 表示されない文字 */
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5sdeg);
}
.husen3 p:after {
position: absolute;
top: 0px;
left: 10px;
z-index: -2; /* 擬似要素を背面へ */
padding: 1px 0px;
width: 198px;
background-color: transparent;
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.5);
box-shadow: 0 5px 5px rgba(0,0,0,0.5);
content: "a"; /* 表示されない文字 */
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
}
Comments (0)
テーブルの角を丸くしたいが為に画像編集ソフトを立ち上げて･･･４辺の角の画像を作り･･･。
あれって、結構手間がかかるんですよね。
しかし、CSS3からはビジュアル的な要素が増えたおかげでCSSだけで対応できてしまうよ！画期的！
そんな、俺得覚え書き。
まずは、border-radiusプロパティを使って、簡単な説明フロー図を作ってみます。
そうそう、三角もCSSで作れます。
完成見本
step1 タイトル
説明文など
step2 タイトル
説明文など
step3 タイトル
説明文など
HTML
<div class="box_title"><span>step1</span> タイトル</div>
<div class="box_description">説明文など</div>
<div class="box_arrow"></div>
<div class="box_title"><span>step2</span> タイトル</div>
<div class="box_description">説明文など</div>
<div class="box_arrow"></div>
<div class="box_title"><span>step3</span> タイトル</div>
<div class="box_description">説明文など</div>
CSS
.box_title {
margin: 0 auto;
padding: 5px 20px;
width: 400px;
border: 1px solid #CCC;
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
background: #EEE;
color: #111;
font-weight: bold;
}
.box_title span {
color: #6BBDE3;
}
.box_description {
margin: 0 auto;
padding: 5px 20px;
width: 400px;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
background: #fff;
color: #111;
}
.box_arrow {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
width: 0px;
height: 0px;
border-top: 20px solid #6BBDE3;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
}
Comments (0)
プロフィール
PR:無料HP
ドライビング・スクールかいなん
売掛金買取 おすすめ
アルバイト 添い寝
スタッドレスタイヤ
スタッドレスタイヤ はきかえ
タイヤ イブサム 激安
バイオ技術者認定資格
バイクパーツ 激安
民泊 副収入
幼稚園 短大
トリプルエー投資顧問
フィット ホンダ 中古
名簿業者