ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
[CSS]斜めのダイヤモンド状のグリッドを実装するスタイルシート
画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。 デモページ：480pxで表示 実装 実装の準備 CSS3をサポートしているか判別するためにModernizeを使用します。 実装にはSassを使用します。 ダイヤモンド一つ まずはダイヤモンドを一つ実装してみましょう。 HTMLはdiv要素をa要素で囲みます。 <a href="#" class="diamond"> <div class="content"> Diamonds Are Forever </div> </a> CSSは下記のようになります。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } $diamondSize: 190p
美しい…。フォトグラファーのポートフォリオサイト20選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ゴウです。 私、写真撮影なんぞが趣味なのですが、その道のプロ、フォトグラファーさんのサイトってカッコイイのが多いんですよね。写真素材が素晴らしいからっていうのもありますが、見せ方なんかも工夫されていて、独特の世界観に引きこまれてしまいます。 という訳で、今回はフォトグラファーのポートフォリオサイトをまとめてみました。 Eric Ryan Anderson https://www.ericryananderson.com/ Fashion Photographer Milan Paolo Boccardi – Fotografo Milano https://www.fashionphotographer.it/ Future home of something quite cool https://www.kiranowal.com/ Clayton Bozard Photog
静的HTMLで、インクルードを実現するためのJavaScript - on the center line.
ローカルディスク上に存在する静的HTMLで、外部ファイルをインクルードするためのスクリプト（つまり、XMLHttpRequestオブジェクトの代わり）。 以前にも同じようなエントリを書いたのですが（http://d.hatena.ne.jp/kenpoco/20080228/1204198090）、いくつか不具合があったので修正してます。 IE6,7に対応（前回はFirefox2のみ）。 インクルードするファイルの拡張子が.HTMLと.TXTで動作が異なっていたので、その対応。 インクルードした後で、その内容を変更するための仕組みを追加。 最近HTMLを作る機会が多いので自分で使ってみてるのですが、けっこう重宝してます。全ページに同じようなヘッダー部分がある場合なんかに、ヘッダー部分を１ファイルにまとめておけるので、その後の修正がかなり楽。 【使用例】 ------------------
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
