タグ

CSSに関するchalcedony_htnのブックマーク (7)

  • CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS

    CSSによるインデックスされない謝罪文 CSS文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない 「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避 #s { p:first-child { font-weight: bold; font-size: 120%; } p:not(:first-child) { text-indent: 1em; } p:nth-child(1):before{ content: "お 詫"; } p:nth-child(1):after{ content: " び"; } p:nth-child(2):before{ content: "平素は弊社のサービスをご利用いただき、誠にありがとうございます。"; } p:nth-child(3):before{ c

    CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS
    chalcedony_htn
    chalcedony_htn 2014/02/04
    見た目だけ謝罪していくスタイル
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    chalcedony_htn
    chalcedony_htn 2014/01/24
    要素のdata-*属性にキーワードを入れておいて、JSで絞り込み。全文入れておくことも可能。文章系には使いづらそうだな
  • Webフォントをキレイに見せるテクニックを2つ紹介(Chrome編)

    概要 ▶ 様々なフォントがWebで利用できるモリサワのWebフォントサービス《TypeSquare》が話題になっていますね。TypeSquare [タイプスクウェア] 2012年12月末まで無料で利用できるので、Web業界の人や印刷業界の人が試しているようです。 しかし、この Webフォントサービス、試した方からは意外に不評の声もちらほら…。それは文組にWebフォントを使用して、Windowsのウェブブラ 様々なフォントがWebで利用できるモリサワのWebフォントサービス《TypeSquare》が話題になっていますね。 TypeSquare [タイプスクウェア] 2012年12月末まで無料で利用できるので、Web業界の人や印刷業界の人が試しているようです。 しかし、この Webフォントサービス、試した方からは意外に不評の声もちらほら…。 それは文組にWebフォントを使用して、Windo

    Webフォントをキレイに見せるテクニックを2つ紹介(Chrome編)
    chalcedony_htn
    chalcedony_htn 2012/02/24
    text-shadowを使う方法と、-webkit-text-strokeを使う方法。線幅なんてつけられたのかー。
  • CSSをシンプルに書くことができるLESS使ってみた

    Posted: 2011.12.13 / Category: HTML&CSS / Tag: LESS CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 ネスト(階層)化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a:hove

    CSSをシンプルに書くことができるLESS使ってみた
    chalcedony_htn
    chalcedony_htn 2012/01/18
    プログラマブルCSS
  • box-shadowとradial-gradientで画像をポラロイド写真風に

    CSS3のbox-shadowプロパティではinsetという値を取ることができ、その場合ブロックの内側に影が付く。これをある工夫と共に利用すると写真の端に影がつけられる。更にradial-gradientでセピア色のグラデーションを重ねてやれば、良い具合に古ぼけさせることもできるので、両方の効果を重ねてやればポラロイド写真風に見えないこともない? Demo: Polaroid effects using inset box-shadow and radial-gradient キモは以下のようにz-indexを使って画像を背面に回してやること。そうすれば親のブロック要素でのbox-shadowやbackground-imageを画像の上に重ねることができる。 .polaroid { float: left; width: 400px; height: 400px; background-i

    box-shadowとradial-gradientで画像をポラロイド写真風に
    chalcedony_htn
    chalcedony_htn 2011/01/27
    CSSだけで画像に古ぼけた写真のような効果をかけられる(CSS3のbox-shadowやradial-gradientを使用)。こういう見せ方をするのに画像加工が要らなくなったんだなあ……
  • CSS3とHTML5でどう違う?  WebKit最新開発版で試す「ルビ」 - builder by ZDNet Japan

    HTML5のルビとXHTML 1.1のルビ 連載のテーマであるEPUBは、規格の成立経緯と仕様の両面において、ウェブと切り離しては考えにくい性質を持っています。基的にはXHTMLCSSでコンテンツを記述するため、iOSに搭載のEPUBビューワ「iBooks」のように、エンジン部分をウェブブラウザと共有している例も少なくありません。ウェブの仕様およびその実装であるウェブブラウザとEPUBは不可分の関係、ということもできるでしょう。 そしてウェブの仕様は、現在「HTML5」へと歩を進めつつあります。正式な規格化(W3Cによる勧告)は2012年頃と先の話ではありますが、すでに最終草案(ラストコール)への工程表が提出されていますから、仕様としてはほぼ固まっていると見ることができます。その流れを見越し、主要なウェブブラウザがHTML5の実装を開始していることは、ご存じと思います。 振り仮名とし

    CSS3とHTML5でどう違う?  WebKit最新開発版で試す「ルビ」 - builder by ZDNet Japan
  • DTPのスタイル機能と、Web/ePubのCSSの違い(1)|DTP Transit

    同じスタイルシートですが、DTPのスタイル機能とWeb/ePubのCSSは、かなり異なります。Webでは「HTML+CSS(XHTML+CSS)」と記述するように、CSSだけでなく、その前提となるHTML(XHTML)をどう記述するかが肝心です。 見出し、文、キャプションにかかわらず、すべての段落は、同じ段落です。 これに段落スタイルを作成/適用することで、見かけ上、見出しらしく、文らしく、キャプションらしく見えます。 それぞれの段落には、段落スタイルを適用する必要があります。 文字レベルで書式を設定するには、文字スタイルを作成/適用します。文字スタイルは、段落スタイルよりも優先されます。 それぞれの段落には、h1(大見出し)、h2(中見出し)、p(単なる段落)のようにタグ付けされています。サイズや金額を示す洋服のタグと同じようなものです。タグが付けられた段落は、h1要素、h2要素、p

    DTPのスタイル機能と、Web/ePubのCSSの違い(1)|DTP Transit
    chalcedony_htn
    chalcedony_htn 2010/11/25
    DTPのスタイルにも「意味」を付加できたらなー / 追記:CSSそのものには「意味」は関係なかったか……
  • 1