CSSのfont-smoothingでフォントをキレイに見せる - ディレイマニア
フォントがやけにキレイに見えるなというサイトがあってどうやってるのか全然分からなかったんですが、最近になって「font-smoothing」というプロパティの存在を知りました。 スマホやモダンブラウザ向けのプロパティですが、1行足すだけでテキストがスタイリッシュになります。 font-smoothingで細めのフォントを実現 まず最初にfont-smoothingをかけたものとかけてないものでどう違うのか比較画像をお見せします。 ▼font-smoothing使ったときと使ってないときの比較用GIFアニメです。テキストの雰囲気が違うのが分かりますかね。 書き方は簡単で、下記の記述をフォントを変更したいところに書き加えるだけ。 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 例えばbodyに書い
CSSでボタンを押したときに沈むようなデザインにする方法 - ディレイマニア
近年、CSSでボタンをデザインすることが多くなりました。 ボタンのデザインが出来たら、次はマウスオーバーしたときのアニメーションもつけたくなりますよね。 今回はシンプルに「ボタンが沈み込む」ような動きの付け方をご紹介します。
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！
俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！ 指定方法は下にあるぞ！ 新規でサイトを制作するのに基本のフォント指定を持っていなかったので 色々調べたり、このブログのフォント指定を変更してみたりしたら 実は Arial より Verdana のほうが見やすいことがわかってしまった。 さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために 作ったフォントだ！Verdana - Wikipedia フォント周りのオススメの指定追記記事により良い指定を載せたのでこちらは掲載終了しました。 font-family めっちゃ長い！何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。 だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。 余談だけどfont-size(文字サイズ)とlin
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
16 Ridiculously Impressive CSS3 & HTML5 Experiments
Here we have presented some amazing and impressive CSS3 and HTML5 experiments for you. Though, they are amazing but unfortunately are still at the state of being called ‘Experiments’, mainly because most of them are not supported by all the browsers. Therefore, we will recommend you that you see these CSS3 and HTML5 experiments either in Safari or Chrome. However, few of them work well in Mozilla
CSSだけで作るamazon風な縦型メガメニュー
先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。 CSSだけですのでメニューの現れ方など若干違います。box-shadowとborder-radiusはIE8以下で、矢印を作るための擬似要素はIE7以下で非対応ですが、メニューとしての機能は果たせます。 では解説していきます。 HTML まずはHTMLから説明します。長いのでメニュー1つ分のみ載せます。コード全体はサンプルの下に載せていますのでご覧ください。 <div id="menu-tittle">メニュー</div> <ul id="sample"> <li> <a href="#">メインカテゴリー1</a> <ul> <h3>メインカテゴリー1</h3> <li><a href="#">サブ
【CSS】スタイルシートで画像を縦横比そのままにリサイズする方法。 – 和洋風KAI
スタイルシートを使って画像を縦横比そのままにリサイズする方法。 以下のスタイルシートを組み込むことで、縦横比をそのままに画像をリサイズすることが出来ます。 img{ max-width: 300px; height: auto; } もちろん縦幅でもできます。 img{ width: auto; max-height: 300px; } お手軽にリサイズ出来てしまうので、ぜひ使ってみて下さい！ するぷはこう思った。 @isloopをフォローする 僕はスマホ用のサイトをレイアウトするときにこの技を大変重宝しました！
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
webデザイン中の舌打ちを限りなく減らすCSSでの装飾 * prasm（プラズム）
ブログをデザインしていると、うわー、ココがもっとこうなってくれればなぁ！ と叫びながら頭をかきむしることがある。訳ですが。 実は知らないだけで、割と簡単にクリア出来るコトがいろいろとあります。知っておくとwebデザインが2秒くらい加速しそうなあれこれをお知らせします。 divの幅をwidthだけで制御したいんじゃ！divの装飾をしたことがある方なら、実は結構計算が面倒なことをご存じでしょう。 パディングやボーダーなんかを設定したい場合に、widthからボーダー分を2px引いて、パディングがえーっと、うわーーーーーカラム崩れた！死ね死ね！ってなったことがある方、多いんじゃないですかね。いいんです、僕もそうです。せめてpaddingに関しては内包されろや！後からpaddingだけ変えたら大変な目に遭ったわ！ゴルァ！を繰り返しながら大人になるんです。 後からやっぱボーダー6pxにしたい！って変更
透明度を少し駆使するだけで、CSSの装飾や変更が恐ろしく楽になる件 * prasm（プラズム）
CSSで定義済みの色「red」とか「blue」とかRBGの値（16進数）「#ffddcc」とか「#112233」とかRBGの値（10進数）「rgb(0 0 0)」とか「rgb(255 255 255 0.5)」とか初心者向けの本なんかでは例えば白を指定する場合は #ffffff、もしくは省略して#fff等で書いているコトがよくあると思います。 RGBの16進数で書けば rbg(255 255 255)と、表記することが出来ます。同じ意味です。 得られる結果は同じですが、知っておくべき概念として Webセーフカラーとは 【web safe colors】 – 意味/解説/説明/定義 ： IT用語辞典 webデザインをする場合、閲覧する環境が、閲覧する人によって変わるという考え方を常に持たないといけません。 webデザインにおける色の指定のおさらいをサラッと終わらせて、本題に入ります。 今回使
[CSS]デザインは美しく、かわいいアニメーションを備えたナビゲーションを実装するデモ
シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。 アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。 デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています。 <nav> <menu> <li><a href="#">☀</a></li> <li><a href="#">✈</a></li> <li><a href="#">❄</a></li> <li><a href="#">☎</a></li> </menu> </nav> <nav class="menu2"> <menu> <li><a href="#">home</a></li> <li><
[CSS]デスクトップ・スマフォ・タブレット向けの美しいUIエレメントを簡単に実装できるスタイルシート -TopCoat
クリーンなHTMLを使い、レスポンシブを念頭においたUIエレメントを簡単に実装できるオープンソースのライブラリを紹介します。 TopCoat TopCoat -GitHub TopCoatのセットアップ 当スタイルシートを外部ファイルとして配置するだけです。 <link rel="stylesheet" type="text/css" href="css/topcoat-desktop-min.css"> TopCoatのスタイルシートは2種類あり、デスクトップ用（24KB）、スマフォ用（20KB）となっています。 それぞれのデモを見てみましょう。 TopCoat for Desktop TopCoat for Mobile TopCoat for Desktop デスクトップ用のデモです。 デスクトップでご覧ください。 TopCoat for Desktop
CSSだけで作る動きのあるドロップダウンメニュー
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
[CSS]ふわりと浮かんだ感じの美しいシャドウを適用して画像を配置するギャラリー用のスタイルシート
inline-blockを使ってシンプルなグリッドで、ふわりと浮かんだ感じの美しいシャドウを適用して画像を配置するギャラリー用のスタイルシートを紹介します。 Gallery -Inline Block Grid 実装 Step 1: HTML HTMLはシンプルでimg要素をdiv要素で内包するだけです。 .galleryのdiv要素は、ギャラリーとして画像を配置するためのものです。 <div class="gallery"> <div class="panel"><img src="image.jpg" alt="" /></div> <div class="panel"><img src="image.jpg" alt="" /></div> </div> Step 2: CSS まずは、画像にシャドウを適用するスタイルシートです。 画像のimg要素と白いパネルの.panelにbox-
[CSS]パネルをくるっと気持ちよく回転させるスタイルシート6種 -Fun with CSS
デモはCSS3アニメーションを使用しているので、最新のモダンブラウザでご覧ください。 各パネルをマウスでホバーすると、くるっとします。 Fun with CSS 回転のアニメーションは、左上から順に。 垂直：下方向 垂直：上方向 水平：右方向 水平：左方向 垂直：下方向：半回転 斜め パネルはべた塗りだけでなく、写真画像でももちろん動作します。 Fun with CSS：ネコの画像でもくるっと回転 HTMLはシンプルで、各パネルはdiv要素です。 <div class="front"> <h2>Front</h2> This is on front. </div> スタイルシートはちょっと長いので、下記ページをご覧ください。 Fun with CSSのコード
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
quusookagaku.com - quusookagaku リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】CSSだけでフラットデザインのボタンを作る方法 - ディレイマニア
Loading...
https://ameblo.jp/ca-1pixel/entry-11497184837.html