ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
多様な記法からHTML/JavaScript/CSSを生成·Prepros MOONGIFT
PreprosはWindows用のオープンソース・ソフトウェア（MIT License）です。 今はHTMLやJavaScript、スタイルシートを素のまま書くのではなく、別な記法を使ってそれぞれファイルを生成するタイプが人気です。しかし更新するたびに生成し直すのは非常に手間です。そこで使ってみたいのがPreprosです。 メイン画面です。ここにフォルダをドロップします。 フォルダをドロップすると、その中にあるファイルがコンパイル対象として認識されます。扱えるのはLess/Sass/Scss/Stylus/Jade/Coffeescript/Haml/Markdownと数多いです。 拡張子は自動認識されます。後はファイルを更新すれば自動的にファイルを生成してくれます。 設定です。自動生成を止めることもできます。 オプションです。拡張子を変更することもできます。 Preprosにはビルドイン
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
Jungle Java - CSS拡張メタ言語についてのメモ
CSS拡張メタ言語についてのメモ Posted in HTML5 & CSS3 (RSS) CSS を拡張するためのメタ言語 「Sass」 や 「LESS」 についての情報をメモ。φ(..) 関連情報 ・SassやLESSを導入するメリット | Good thinking ・CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞ ・レスポンシブ対応に使えそうなLESS/Sassの書き方 | Good thinking ・Sass と LESS 以外の選択肢 Stylus ・はじめてのCSSメタ言語はLessがおすすめ！ « NAVER Engineers' Blog ・ASCII.jp：CSSの記述が3倍速くなる「LESS」の使い方 ・「LESS＆専用エディター」でCSSをシンプルに書こう - ＠IT ・【Sassを覚えよう！】もくじ的なのと参考リンク - CSS
ブログのデザインを新しくしてみた - てっく煮ブログ
css最近、高解像度のノート PC（15.6インチ 1920×1080）に乗り換えたら、自分のブログが見にくくてしかたなかった。こんな風に見える。高解像度時代の Web デザインについて思いを巡らせていたら、いつの間にか新しい CSS を書いていた。結果、こうなった。新しいデザインで重視したこと1. デフォルトのフォントを使う本文のフォントはデフォルトのままにした。いままでは見栄えを気にして、13px にしていたが、高解像度端末では見にくい。変な小細工はせずに「デフォルトのフォントサイズで表示しておけば、そのデバイスで一番適切なサイズで表示される」と信じることにした。リンクの色もデフォルトのままにした。無駄に凝るのはやめた。サイズ指定の単位は px ではなく em を使うようにしてみた（画像を除く）。たとえば、本文の横幅は 45em に設定している。2. シングルカラム化いままでは右側のカ
Sass記法を用いたCSSフレームワーク·Compass MOONGIFT
CSSはプログラマ向けの言語ではないため、最初は理解しやすいが、複雑な記述が入り交じっていくとメンテナンスが困難になる。Webブラウザはよく出来ていて、何となく書いたものでも動作してしまうからさらにややこしい。 コマンドラインオプション そうした問題に対処するメタ言語として注目を集めているのがSassだ。そしてSassを実用的にプロジェクトに組み込めるのがCompassだ。 今回紹介するフリーウェアはCompass、SassをサポートしたCSSフレームワークライブラリだ。ソースコードは開示されているがライセンスは明記されていなかったのでご注意いただきたい。 Compassは単体でCSSフレームワークをなすわけではない。実際にはBlueprintやYUI、960といった有名なCSSフレームワークを利用している。そしてRailsやMerb、StaticMaticといったアプリケーションサーバと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
