deconcepter.jpThis domain may be for sale!
もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭
CSSだけで作るtableデザインテクニックVer.02(おまけ付き)
今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます！ こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです！！予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました！ 気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ！ CSSテーブルデザインテクニック01 HTML テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル
CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 Styling Button Links With CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを使用します。 HTML テキストリンクにclassを付与します。 <p><a class="button-link" href="#">Button Link</a></p> テキストリンクをボタンに見えるようスタイルしていきます。 ボタンがクリックしやすいように、paddingの値を充分に設定します。 .butto
有料から無料になったCSS3による42種のウェブアプリボタンセット「Zocial」
もともとは24ドル(約1800円)の有料セットだったのですが、今は無料でダウンロード可能なのが「Zocial」です。42種類のCSS3によるフォントフェイス(font-face)と、ベクター形式によって自由なサイズでキレイに描画できるアイコンボタンの組み合わせとなっています。 Zocial ~ CSS3 Buttons, Sass Framework. http://zocialbuttons.com/ Zocial | CSS3 Button Set http://zocial.smcllns.com/ ダウンロードは下記サイトの「ZIP」ボタンをクリックすれば可能です。 samcollins/css-social-buttons - GitHub https://github.com/samcollins/css-social-buttons/ サンプルは以下から閲覧可能。 Zocia
Zocial – CSS3で作られたソーシャルボタン・アイコンセット – creamu
Zocialは、CSS3で作られたソーシャルボタン・アイコンセットです。 Githubからソースをダウンロードできます。 /* Code written by Sam Collins (@smcllns) of www.eventasaur.us */ /* You are free to use this work commercially */ /* You are free to extend this work without permissions from the author (just do so tastefully eh?) */ とのことで、商用利用もカスタマイズも可能です。 Zocial | CSS3 Button Set
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル
IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。 デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、tableタグにのみ使用します。 <table class="bordered"> <thead> <tr> <th>#</th> <th>IMDB Top 10 Movies</th> <th>Year</th> </tr> </thead> <tr
[CSS] 美しいパンくずを実装する4つのスタイルシート | コリス
画像を使用せずに、シンプルなHTMLで美しいパンくずを実装するスタイルシートのチュートリアルを紹介します。 CSS3 breadcrumbs [ad#ad-2] デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE9+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ：ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li>
[CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ（当方日本語化） 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
StyleBootstrap.info: Twitter Bootstrap Theme Generator
新着記事
Creating a Fancy menu using CSS3 and jQuery | INSIC DESIGNS
http://insicdesigns.com/demo/css3/exp1/index.html
Site Under Maintenance
Welcome - Csscorners
BOS138 - Bandar Game Gacor Asia Mode Spin BarBar Ala Big BOS
BOS138 - Bandar Game Gacor Asia Mode Spin BarBar Ala Big BOS