[B! CSS][css] mathemathikoのブックマーク

オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ

タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon

mathemathiko 2013/06/25

リンク

Social Buttons for Twitter Bootstrap 2

mathemathiko 2013/05/21

CSS

リンク

1216彩票-官网平台

您不具备使用所提供的凭据查看该目录或页的权限。请尝试以下操作：如果您认为自己应该能够查看该目录或页面，请与网站管理员联系。单击刷新按钮，并使用其他凭据重试。 HTTP 错误 401.1 - 未经授权：访问由于凭据无效被拒绝。 Internet 信息服务 (IIS) 技术信息（为技术支持人员提供）转到 Microsoft 产品支持服务并搜索包括“HTTP ”和“401 ”的标题。打开“IIS 帮助”（可在 IIS 管理器 (inetmgr) 中访问），然后搜索标题为“身份验证”、“访问控制”和“关于自定义错误消息”的主题。

mathemathiko 2013/05/13

いずれ必要になったら使ってみる。

css

リンク

【CSS初心者向け】ブログで良く見かけるシンプルな見出しの作り方 - ディレイマニア

テキストの左側と下側だけをボーダーで囲ったデザインの見出しって、いろんなブログで良く見かけますよね。 CSSだけで作る見出しとしてシンプルで使い勝手がいいので僕も多用してます。「どうやって作ってるんですか？」という質問をいただいたので、CSS初心者向けに見出しのデザインの一例としてご紹介します。

mathemathiko 2013/03/23

シンプルで見やすくていい。

CSS

リンク

WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）

これがずっとやりたかったんだよ！すべてのソリューションはかちびとで問題ない。@shintarowfreshです。もうとにかくWordPressでアイキャッチ画像を用意するのが面倒極まりない。とはいえ設定しないとみっともない。という2重苦を抱えていたのですが、これからは開放されます、気持ちいい！！ WordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法 – かちびと.net WordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法 – かちびと.net 設定に必要なIDの調べ方はコチラに。 Quick Tip: Saving a Default Post Thumbnail | Wptuts+ 後はもう書いているコードをコピペして終わり、イッツダン！するとこんなかんじで、新規投稿の際、指定のデフォルトの画像がハマっているわけで。上書きしたかったら、新し

mathemathiko 2013/03/07

CSS

リンク

「Compass」、基礎から応用まで！ | 株式会社LIG

こんにちは、デザイナーの王です。今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。全くの初心者でも問題ありません！はじめに結論を言うと、CompassでCSSを書くと早い！見やすい！メンテしやすい！コード量がぐっと減る！一度使い出したら最後、もう元には戻れない！一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとはでは「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

mathemathiko 2013/02/08

Compass使ってるけど使いこなせてないのであとで見てみよう。よさそうなまとめ。

CSS

リンク

Twitter Bootstrapで固定ナビゲーションを使う - CMS専門 Web開発者ブログ

Twitter謹製CSSフレームワーク『Bootstrap』を使って固定ナビゲーションを作ってみます。簡単なカスタマイズのメモです。 Bootstrap, from Twitterとは？ Twitter（ツイッター）社が提供しているBootstrap（ブートストラップ）はCSSのフレームワークです。 CSSを読み込むだけで簡単に使えます。使い方はdiv要素などにclassを指定するだけです。 Bootstrap, from Twitter グローバルナビゲーションを固定にするページの上部にあるナビゲーションを固定ナビゲーションにします。スクロールしても同じ場所にあり続けます。常にページ内の同じ位置にあり続けますのですぐにアクセスできます。１．基本 body 要素のすぐ下に次のようにコードを書きます。 <body> <div class="navber navbar-fixed-

mathemathiko 2013/01/26

css

リンク

Bs3 Document | Greenapple-room

CSSフレームワークの一つであるBootstrapの解説ページです。機能説明や使い方をサンプルもつけながら説明していきます。当ページの説明以外にも機能はありますので、詳しく知りたい方は本家ページを参照して下さい。

mathemathiko 2013/01/26

リンク

Sass Invalid CSS Error: "expected expression"

mathemathiko 2013/01/26

sassとscssで微妙に書き方が違うらしい。面倒。

CSS

リンク

howtohp.com - howtohp リソースおよび情報

This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. 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

mathemathiko 2013/01/26

CSS

リンク

Css preprocessorの始めかた

6. #main { #main { float: right; float: right; } p { #main p { margin-bottom: 1em; margin-bottom: 1em; } } }

mathemathiko 2013/01/19

CSSの未来について。

CSS

リンク

GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド | コリス

GitHubのCSSのパフォーマンス改善について、2012年ホノルルで行われた「CSS Dev Conference」のスライドが公開されていたので、紹介します。

mathemathiko 2012/12/10

CSS

リンク

CSS3でここまで出来るの？！真似してみたいと思える物からそうじゃない物まで様々なCSS3チュートリアル達！ | バンクーバーのうぇぶ屋

mathemathiko 2012/11/28

リンク

[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント

ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセットどのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセットベスト5！ CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ

mathemathiko 2012/11/27

CSS

リンク

Sassy Buttons, Awesome CSS3 Buttons With Compass and Sass - Jared Hardy

Want that fancy CSS3 button look with none of the work? Then Sassy Buttons are for you! Easily create great looking, cross-browser compatible buttons with just a few lines of Sass and you’ll be in button heaven in no time. Getting Started Sassy buttons is a compass extension so, naturally, you must have compass installed to use it. To install compass and the sassy buttons extension, simply open yo

mathemathiko 2012/10/28

sassのための(？)gem.

ruby
css

リンク

Ultimate CSS Gradient Generator from ColorZilla

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

mathemathiko 2012/10/28

グラデーションのCSSを簡単につくれる。

リンク

デバイスに合わせてCSSを振り分ける「Media Queries」 | DevelopersIO

Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。 Media Queries Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができ