CSS3を使ってできる画像まわりのエフェクトやスタイリング18 | Webロケッツマガジン

2014/06/26 79 users エフェクト シャドウ CSS スタイリング 目次

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ   2. めくれた風   3. トイカメラ風トンネル効果   4. カラー調整   5. 回転   6. 角丸 ... 続きを読む

CSS3を使ってできる画像まわりのエフェクトやスタイリング17 | Webロケッツマガジン

2012/02/24 933 users エフェクト シャドウ CSS スタイリング 目次

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 目次 1. シャドウ   2. トイカメラ風トンネル効果   3. カラー調整   4. 回転   5. 角丸   6. 楕円のフレーム   7. 円のフレーム   8. 三角形フレーム   9. 重な... 続きを読む

提案や設計資料に使える！かわいめアイコン素材を60種類作ってみました（ビジネス編） | Webロケッツマガジン

2012/02/20 164 users アイコン素材 設計資料 提案 アイコンセット ビジネス編

提案資料や設計資料をアイコンや図入りでわかりやすくしたいけれど、寄せ集めたアイコンは図柄がばらばら…足りないものがある･･･など思ったことはありませんか？ そんなご要望に答えて、資料に使えそうなアイコンセットをぷちぷち自作してみました。 今回は需要の多いビジネス系アイコン60種類(png形式)です。 顔あり顔なしバージョンがありますので用途に合わせて。 ↓アイコン見本↓ ↓使用例↓ 個人使用も商用... 続きを読む

CSS3を極めたいなら知っておきたい三角形を作る3つの方法 | Webロケッツマガジン

2012/02/13 238 users 鋭角 CSS 三角形 CSS3 装飾

CSS3を使い始めるとぶち当たる壁に「三角形みたいに尖った角」をどう表現するかという問題にぶち当たります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い... 続きを読む

“ＭＳ Ｐゴシック” をメイリオみたいにアンチエイリアスさせるCSS3ハック | Webロケッツマガジン

2012/02/06 96 users メイリオ transform Chrome Windows

CSS3 を使って Windows から見るブラウザ上の "MS Pゴシック" をメイリオみたいに、アンチエイリアスさせて表示する方法を発見してしまったので紹介します。 さて、↓の２つのの文字を見比べてください。 実はどちらも同じ "MS Pゴシック"なんです（Chromeで画像化しています）。 CSS3 の transform を使う さて、これをどうやって実現しているかと言うと、CSS3 の ... 続きを読む

CSS3でPhotoshopで作ったようなキレイなガラス風ボタンを作るチュートリアル | Webロケッツマガジン

2012/01/31 203 users チュートリアル

CSS3 の新しいプロパティーを総動員したら、Photoshopとかで作ったきれいなアクア風（ガラス風）ボタンにどこまで近づけるか？ というのを実際にやってみました。 チュートリアル風に、ステップごとに分けて説明していますので、CSS3を使ったリアルな表現のためのテクニックとして、ポイントだけでも覚えておくと、いろんなところで応用できると思います！ こんな感じになりました　 何はともあれ↓が出来上... 続きを読む

uu59のメモ | vimのマクロ機能を使ってCSVを数秒でHTMLにする

2011/12/21 13 users vim CSV ペースト Excel マクロ

めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成 | Webロケッツマガジン Big Sky :: めんどうな作業がわずか数十秒に！新人プログラマが知らないと一生後悔するVimを使ったHTML生成 マクロを多用する派なのでマクロを使った編集を紹介します。 名前 値 Foo foo Bar bar Baz baz まずこの元データをvimにペースト... 続きを読む

WEBデザインとは何か？迷った人に読んでほしい言葉 80+ | Webロケッツマガジン

2011/12/20 630 users webデザイン ほしい言葉

WEBデザインしていて、ちょっとモチベーションが上がらないときなんかに、先人たちのデザインについての洞察を読むと、「デザインってそういうことだったのか」とか、「初心だけど忘れてるねー」とか、小さいですが、そんなところからモチベーション、インスピレーションを分けてもらえることがあります。 この記事では、そんな名言を Web Design Mash, Design Was Here とその他のサイトか... 続きを読む

Big Sky :: めんどうな作業がわずか数十秒に！新人プログラマが知らないと一生後悔するVimを使ったHTML生成

2011/12/14 122 users 日常茶飯事 プログラマ Excel vim HTML

こういう作業ってプログラマなら日常茶飯事で、やり方しらない新人プログラマはいつまでたっても新人なのだけど... めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成 | Webロケッツマガジン お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、... 続きを読む

めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成 | Webロケッツマガジン

2011/12/09 2101 users Excel HTML生成 新人デザイナー 一生後悔 作業

お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！  Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCS... 続きを読む

Webサービス開発で知らないと損する！登録フォームでユーザーを逃さないのために必要な5つの手法 | Webロケッツマガジン

2011/12/06 75 users 手法 ユーザー Webサービス開発 モーダルダイアログ 5つ

Webデザイナーや開発者さんは、いかにして多くのユーザーに途中で断念することなく、登録を完了させてログインしてもらうかということに、日々頭を悩ませている人もいらっしゃると思います。 この記事では、最近のWebサイトやサービスに見られる、ユーザー登録のための導線手法を紹介します。ぜひ、新しいサービスを考える際に参考にしてください！ Don't miss it!。 手法1. モーダルダイアログを使う ... 続きを読む

流行のjQueryでスクロールするサイトを集めてみました | Webロケッツマガジン

2011/11/02 116 users jQuery スクロールバー 流行 ブラウザ コンテンツ

jQueryでコンテンツをスクロールさせる海外サイトを最近見るのですが、あれはかっこいいですね。そこで、今回の記事では、jQueryでコンテンツをスクロールさせているサイトをいくつか紹介しつつ、このタイプのサイトに特有の問題についても触れてみたいと思います。 はじめに コンテンツをスクロールバーではなく、JavaScriptでスクロールさせる場合、ブラウザのスクロールバーが出ないため、「ブラウザか... 続きを読む