Google＋風のボタンをCSSで実装するサンプル:phpspot開発日誌
Google Buttons in CSS | Improve your UI | Pixify Google＋風のボタンをCSSで実装するサンプル素材です。 次のようなGoogle+風のボタンが実装できます。シンプルで非常に分かりやすく、他のデザインの邪魔をしないので使い勝手がよさそうです。 マークアップとしては次のような<a>タグベースのものになっています。 関連エントリ ボタンデザインにまよったら参考にできるPSDボタン素材まとめ コピペで使えるCSS3ボタン６つのレシピ Twitter・mixi・facebook・はてブ等のソーシャルボタンを瞬時に埋め込めるWordPressプラグイン「WP Social Bookmarking Light」
Photoshop VIP ☞ ボタンデザイン完全版、ダウンロードしておきたいPhotoshop無料PSD素材60個まとめ
Webデザインにおいてよく利用するデザインパーツのひとつ「ボタン」デザイン。 海外デザインブログWeb and Designersで、これまでに紹介したことのないPhotoshop用無料PSDボタン素材を60個まとめたエントリー「60 Outstanding Free PSD Buttons」が公開されていたので、今回はご紹介します。 多くの素材に色違いや大きさによって複数のボタン素材が収録されているので、ダウンロードしておくと便利かもしれません。 どれもPhotoshop用PSD素材を収録しているので、自由にボタンサイズ、テキストなどの変更も行うことができ便利ですよ。 詳細は以下から。 ダウンロードしておきたいPhotoshop用PSDボタン素材まとめ Follow Buttons 3色の異なる色でデザインされたボタンデザインセット、それぞれ通常時、ホバー時、アクティブ時の3種類ずつ用意
WEB制作に便利な60種類のアイコン、ボタンPSD素材まとめ「60 PSD Icon and Button Templates」
TOP > Design , Photoshop > WEB制作に便利な60種類のアイコン、ボタンPSD素材まとめ「60 PSD Icon and Button Templates」 媒体を選ばず、幅広く利用されているクリエイティブツールphotoshop。利用されているシーンも多く、そのため、photoshopのための素材は世界中で数多く公開されていますが、今日紹介するのはWEB制作に便利な60種類のアイコン、ボタンPSD素材をまとめた「60 PSD Icon and Button Templates」です。 The Button Project WEB制作では、ボタンやアイコン等、細かな素材のクオリティが全体のクオリティを決定づける要素の一つになりますが、細かな処理やデザインを加えるというのは小さな素材といえども時間がかかります。原文では、時間を短縮できる便利につかえるpsdが
10 Best Websites To Generate Buttons Online
Are you a developer looking for a great online tool to create buttons? If yes, then I have got a great list for you. Below you will find my collection of 10 best online button creators. Buttons are an important part of our website’s interface and these tools will help you create brilliant buttons. Give each entry a read and a thorough try. See which ones can make your job easier. You are welcome t
CSS3ボタンテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」
TOP > WebDesign > CSS3ボタンテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」 WEBデザインの次世代規格として注目を集めているCSS3。徐々に技術系のWEBサイトでも取り上げられて、WEBデザイン業界内では話がでる機会も増えてきたと思いますが、今日紹介するのはCSS3を使ってボタンを作るテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」を紹介したいと思います。 Pretty CSS3 Buttons グラーデーション、オーバラップ、ドロップシャドウなどなど、いままで画像でしか表現が困難だったボタン表現が多数集められています。今日はその中からいくつか気になったテクニックを紹介したいと思います。 詳しくは以下 ■Cool O
How To Design A Sexy Button Using CSS - Freelance Web Design Belfast Northern Ireland - Lee Munroe
Last week I launched a holding page for Ecliptic Labs, an iPhone development company based in Belfast (keep an eye on them, there’s going to be some great stuff from them this year). Here is the holding page in all it’s glory. One thing you’ll notice is the big ‘Notify me’ button. One of the great things about this button is that it isn’t a graphic. It’s simply styled using CSS. Advantages of usin
CSS3を使ったボタンデザイン | チバのブログ
CSS3の「これは！」という機能を紹介するエントリーの第2回。CSS3で作るボタンデザインを紹介します。 前回は画像を使わずに角丸を作るborder-radiusというプロパティの紹介だったのですが、ただの仕様書の写しのようになってしまいました...。 前回の反省も踏まえて、今回はサンプル付きで紹介したいと思います。 ボタンのデザインの参考にしたのはButton Design Showcaseというエントリー。 Button Design Showcaseの中から、CSS3で作れそうなものをいくつかピックアップしました。 ※サンプルはFirefox3.5～、Webkitでしか確認していません。 かっこいいボタンがいくつもあったのですが、CSS3の新機能を紹介できそうなボタンのデザインとして以下の3つを選びました。 アップル風のボタン 透過pngのグラデーションを使ったボタン RGBa
シルバーメタルやブラックメタルのフリーのボタン素材
メタルやグロッシーをテーマにしたボタン素材をpsdGraphicsから紹介します。 PSD silver metal buttons set ダウンロードできる素材のフォーマットはPSDで、背景やテキ
クオリティの高いボタンやバッジを作る為のphotoshopチュートリアル「30 Useful Photoshop Buttons and Badges Tutorials 」
クオリティの高いボタンやバッジを作る為のphotoshopチュートリアル「30 Useful Photoshop Buttons and Badges Tutorials 」 WEBページでもよく利用するボタンやバッジ。細かな所ですが、そういった所のレベルを上げる事でサイト全体のクオリティも上げる事ができます。今日紹介するのはクオリティの高いボタンやバッジを作る為のphotoshopチュートリアル「30 Useful Photoshop Buttons and Badges Tutorials 」です。 Slick and Clean Button in Photoshop 立体的なものから、クリアなものグラデーションで質感を表現したものまで様々なボタンが用意されています。今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■Glassy Button or En
40 Beautifully-Designed Navigation Menus | Vandelay Design Blog
These earth tone color palettes are perfect for a wide variety of nature-inspired designs. Use the provided hex codes to save time choosing colors.
35 Useful Photoshop Patterns | Web Design Blog, Web Designer Resources
About Contact Is A Dating App Designed to be Deleted the Answer to Modern Online Dating?Hinge, an app created for online dating which is designed to be deleted after meaningful connections are made, offers a fresh concept of digital courting. This distinct approach was engineered with the idea that once users build special bonds via this platform, they no longer need it in their lives and can dele
How to make really nice buttons
Introduction Creating buttons is something every web designer deals with, usually on a very regular basis. It can be one of those tasks that becomes tedious and repetitive but with a few tricks you can make pleasing looking buttons that also give the visitor useful feedback and navigational consistency. In this article I’ll be talking about buttons with 3 states - normal, hover, and pressed - and
アクアボタン～Web素材の作り方
AzPainter使い倒し HOME＞ 画像作成＞ アクアボタンと呼ばれている、光沢のあるガラス風ボタンの作り方です。 精密な作り方を説明するとけっこう面倒なのですが、ここではアバウトな方法を紹介します。 まず「アクア風」に見えるポイントは何か、考えてみましょう。 左にあげたのは、GIMPのアクアピルスクリプトで自動作成した画像です。 本体部分を良く見ると、上部がくっきり光っていて、下半分がボンヤリ明るくなっている・・・たったこれだけです。 単色で塗った形に、このような光り方を加えれば、アクア風に見えるというわけですね。 ではAzPainterでやってみましょう。 ここでは、ピル型ボタンの作り方で説明します。 最後に２分の１程度の大きさに縮小するので、周囲の余白や（もし付けるなら）影も考えた大きさで、「新規作成」します。 描画色を作りたいボタンの色にします。 鉛筆ツール（ブラシ形状は円）を
allef.com - クリスタルボタンの作り方 -
透明感のある、アクア風ボタンよりは、材質が固めの雰囲気が出ます。 完成予想図 白背景で使うことは、困難です。 ダメだと思ってましたが、背景を白にし、上ラインと下ラインを消して、白背景いけました。 そもそもアクア風がいけるのにこれがいけないっておかしいですね^^;。 訂正します。 ただ、背景に溶け込むような透明さは生まれません。 光である白が全体に塗りつぶされたところでは、不透明が生む透明さが実現できません。 なので白以外の背景を使うサイトにお奨めします。 出来る大きさは、指定したピクセルに影を2ピクセルか3ピクセルつけた大きさになります。 まず新規で、作りたいボタンの大きさを決めます。 今回使うのは、300 * 42、です。 1つのボタンの場合は120くらいかそれ以下でも良いですね。 チャンネルで角を丸めます。 新規チャンネル、CTRL + A 、背景色、白を確認して、D
CSSで実現するボタンテクニック集「22 CSS Button Styling Tutorials and Techniques」
TOP > WebDesign > CSSで実現するボタンテクニック集「22 CSS Button Styling Tutorials and Techniques」 Designdevelopでは今まで様々なCSSテクニックをお伝えしてきましたが、今日紹介する「22 CSS Button Styling Tutorials and Techniques」はボタンのデザインに特化したテクニック集です。 Beautiful CSS buttons with icon set 立体的なボタンから、角丸はもちろん影がついたものなどなどCSSで作る手のこんだボタンのテップスやチュートリアルが収録されています。今日はその中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■How to make sexy buttons with CSS 立体的で角丸のスタンダードなボタン。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
20 Free High Quality Web Button PSD for Download - designmodo.com
新着記事
Loading...
Make a Simple and Modern Web UI Button in Photoshop
502 Bad Gateway nginx openresty 52.68.0.227