Home

Web入門初心者のための、使えるツール集

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

Web2.0風のツルツル感のある画像・ボタンにするAjaxライブラリ~Glossy.js

Web2.0風のツルツル感のある画像・ボタンにするAjaxライブラリ

glossy001.jpg

なんでもかんでも、画像をGlossyにツルツルにしてしまうJSライブラリです。

glossy002.jpg

こんな↑のもツルツル加工にしあげちゃいます。

作り方は至って簡単で、

glossy003.jpg

�このサイトからGlossy.jsをダウンロードします。
�使いたいページに<script type ・・・・>(上画像を参照)を記入します。

あとは適用したい画像タグにclass属性をつけて終了。下画像を参考。

glossy004.jpg


6個のボタンみたいにするなら、class ="glossy iradius50"に、
長いグラデーションがかった横棒画像なら、class = "glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow"に、
一番下の画像みたいにするなら、class = "glossy"でOK。

このサイトは他にも色々なJSライブラリがありますよ~。

Glossy.js
スポンサーサイト

Continue reading

CSSでおしゃれな角丸タブを簡単に作るサイト

CSSでおしゃれな角丸タブを簡単に作るサイト


タブといえば最近はAjaxが流行ですが、その勢いに押されがちなCSSをもう一度見直してみました。
こういうタブって結構重宝しますよねぇ。私の場合は使用頻度が高いのでお気に入りになっています。

このサイトでは角丸画像を二つ(glowtab-left.gifとglowtab.gif)を使って、ahover時にそれぞれのgif画像下の段の画像に移動させるように仕掛けています。このテクニックはCSSタブナビゲーションを作る際の常套手段で、覚えてしまえばなんてことはないのですが、何も知らなかったときはチンプンカンプンでしたねぇ~f^^;

知らなかった方はAjax(JavaScript)を使うのもいいのですが、CSSでも作れるようになっていても損はないテクニックだと思いますので是非お試し下さいな。

dynamicdrive.com

Continue reading

Home

ぜんそく気味な人には良い感じらしい。
携帯を木目調にして、モダンな感じにしてみるには、↓をクリック。
グッドデザイン賞の折りたたみ式デザイン電卓
あなたのiPhoneを白にする方法↓
TagCloud
Recent Comments
Recent Trackback
Meta
About

プロフィール画像

Author: asamix204

今年になってWebを始めた、まだまだ入門初心者のasamix204です。
サイトを制作する上でお世話になったサイトを順番に紹介していこうと思います。こんなサイトを探してた!というサイトを紹介できれば嬉しいです。

Links
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。