【CSS】hrをCSSでオシャレにスタイリングする方法 ｜ KLUTCHE
仕切り線を入れたいけど無粋な線は嫌なものです。 CSSでちょこっと飾り付けをしてデザインのアクセントを付けてみます。 hr要素はセマンティックなサイト構築の観点からも有用ですので、オシャレさせて送り込んであげましょう。 デモ こんなのを作ります。半分くらいCSS3を使っているので、デモページはモダーンなブラウザでご覧ください。 デモページ 二重線 hr { border:0; border-bottom:medium double #999; } 立体的な線 hr { height:0; border:0; border-top:1px solid #ccc; border-bottom:1px solid #fff; } 点線 hr { border:0; border-bottom:1px dashed #999; } グラデーション hr { height:3px; border:0
画像不要CSSだけで作るテキストロゴデザインのTips
WebサイトのロゴタイプといえばPhotoShopを初めとした画像ソフトを用いて作るのが一般的な気もしますが、シンプルなものならCSSのプロパティを指定するだけでも作れたりします。今回はそのサンプルとフォント関係で使うCSSプロパティいくつかのおさらいなどを。 行間・字間で印象はぐっと変わる サイトトップのタイトルを画像ではなくh1タグなどで表示して文字として扱うのはSEO的効果がある！…とは限りませんが、ユニークな人名や店名、フレーズなどをサイトのタイトルとしたときには競合少ないんでタイトル+他のワードなどで検索されたときに多少の効果はあるんじゃないでしょうか。 Web fontもいちいちロードするのに時間がかかるというデメリットもありますが、日本語使わない英数字だけなら比較的ストレスなく使いやすいと思います。というわけで今回のサンプルに使うフォントは過去記事に書いたGoogle web
ウィンドウ、モーダル｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3〔CSS3を使用した角丸レイアウトのダイアログボックス〕 jGrowl〔Mac OS XのGrowl風にメッセージ表示〕 jQDialog plugin for jQuery〔軽量のダイアログプラグイン〕 jqModal〔通知ウィンドウ、ダイアログ、モーダルウィンドウを表示〕 jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) 〔アラート、確認ダイアログ、入力プロンプトの作成〕 jQuery BlockUI Plugin〔ページや要素のブロック、モーダルダイアログ表示〕 jQuery Tools〔HTMLをオーバーレイ〕 LeaveNotice jQuery Plugin〔リンク先遷移時に通知
フロントエンドがやっておかなきゃいけない、iPhone(スマホ)向けサイトを軽量化･高速化するための必須項目をメモ。 | Mnemoniqs Web Designer Blog
Webサイトの待ち時間の80％はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
[CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css
フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.css - a bunch of plug-and-play CSS animations [ad#ad-2] Animate.cssの使い方 「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet" href="animate.css" /> エレメントにclassを付与 <p class="flash">Live long and prosper.</p> Animate.cssの実装 デモでは、classを付与するだけで、多彩なアニメーションが簡単に利用できま
[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
CSS3で画像のドロップシャドウを簡単に作成できる「CSS3 Drop Shadow Generator」
画像にドロップシャドウを付けるには、Photoshopなどの画像編集ソフトで画像にエフェクトをかける必要がありますが、そのようなことをしなくても、CSSを使ってドロップシャドウの効果をつけることもできるようになりました。 ただ、できるとは言っても、自分のやりたいように０からその効果をつけるのは、なかなか至難の業。そこで今回は、ドロップシャドウを付けるCSSを簡単に生成してくれるサービスをご紹介します。 CSS3のドロップシャドウをカンタンに作れるジェネレータ 「Css3 drop shadow generator」は、スライダでドロップシャドウの効果を調整するだけで、HTMLタグとCSSを生成してくれるサービス。 影の付け方も全部で８種類と豊富で、この記事の冒頭にある画像のようなエフェクトを簡単にかけられるようになっています。 ドロップシャドウを簡単に設定
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Button Maker