CSSグラデーションを使ったデザインパーツサンプル - NxWorld
わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSのlinear-gradient。 未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。 よくある使用方法としては例えばセクションの背景だったりボタンなどのパーツの背景にグラデーションカラーを適用するというのが一般的ですが、他にもいろいろ使用用途があるのでいくつか紹介します。 以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスなどは必要に応じて追記・変更してください。 ここでは全て見た目を画像で紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 テキストが徐々に見えなくなる #1 イメージ（右）のようにテキストの上にグラデーションを重ねることで徐々にテキス
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
画像にビフォーアフターを実装できるjQueryプラグイン - NxWorld
使う機会がありそうなので調べたら、いくつか良さそうなものがあったので備忘録兼ねて紹介します。 商品の使用前後・家などのリフォーム前後・美容室のカット前後といったように、ビフォーアフターを見せたいときに便利なjQueryプラグインです。 全部で3つのプラグインを紹介していますが、どのプラグインも簡単に設置できてほとんどのブラウザで問題なく動作する感じです。 TwentyTwenty 使用方法 「TwentyTwenty」からファイルをダウンロードし、jQueryと併せて必要なファイルを下記のように記述します。 パスなどは自身の環境に合わせて変更してください。 <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
