Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
デザインをちょっと素敵にするサンプル 8
先日 HTML5 + CSS3 で書かれた、素敵な雑誌の表紙みたいな Webサイトを見つけました。それ以来、CSS3 だったらコレもできそう ... アレもできるかも ... なんてことを、雑誌のデザインなどを見ながらひとり盛り上がってます w まだまだ IE では CSS3 が使えないけれど、今回はいくつか CSS3 のサンプル作りに挑戦してみました。 まるで雑誌の表紙のようなデザインで、とっても感動してしまいました。HTML5 と CSS3 で書かれていて、ブロック要素、内包するテキストも斜めにレイアウトされています。細いテキストを斜めにすると、とても読みにくくなってしまうんですけどフォントも工夫されてて判読性も十分です。 もちろん IE では斜めではなくて水平に表示されてしまうんですけど、それでも閲覧するのに困らないようなハイブリットなデザインで、またまた感動！ これから近い将来、C
[css]マウスオーバー時に画像透過をさせロールオーバーを表現するcssテクニック – devolen
cssでロールオーバー(ホバー)時に画像透過をさせ簡単にロールオーバーを表現する方法。 非常に簡単に画像のロールオーバーを表現ができるので紹介します。 ※上の画像は記事内容と全く関係ありませんm(__)m このブログでもロールオーバー(ホバー)時の表現として画像透過をさせているます。 以下のサンプル画像に、ロールオーバーしてもらえれば少し薄くなっているのが分かるかと思います。 その透過処理の方法なんですが非常に簡単です。 ■以下CSSでの画像透過の方法。 ロールオーバー時に画像透過をしたい「img」に以下のCSSを記述してください。 div#hoge a:hover img { opacity:0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; background: #fff; } ■ポイント ■filte
[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート（SASSも有り）を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK! Step 2: HTML あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。 <a class="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
