タグ

cssとtipsに関するmachikomaのブックマーク (5)

  • CSSのopacityで透明度/透過度を指定する方法|BLACKFLAG

    今さらながら、Webページ内の要素に対して、要素の透明度/透過度をCSSのみで指定する方法について。 久々にCSSのみで透明度の指定が必要になる場面があったのですが、記述方法をすっかり忘れていたのでここにメモとして残しておきます。 CSSで透明度を指定するには「opacity」というプロパティを使用しますが、ブラウザによって記述が変わるので下記の様な形になります。 ◆CSS div { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } 『filter:alpha(opacity=50);』 これはIE向けの指定。 “50”というのは透明度が“50%”ということ。 透過無しの状態“100%”を指定する際は「filter:alpha(opacity=100);」。 『-moz-opacity: 0.5;』 これはFiref

    CSSのopacityで透明度/透過度を指定する方法|BLACKFLAG
    machikoma
    machikoma 2016/12/08
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 a {     margin: 0 auto;     width: 200px;     height: 200px;     background: #000;     display: block;     filter:alpha(opacity=50);     -moz-opacity: 0.5;     opacity: 0.5; } a:hover {     filter:alpha(opacity=100);     -mo
  • CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css

    Normalize.cssって何? CSSリセットとは違うの? どうやって使うの? といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssサイト Normalize.cssのソース Normalize.cssのドキュメント Normal

    machikoma
    machikoma 2016/04/14
    Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 まじかよ知らなかったよ
  • CSSスプライトについてあれこれ。

    CSS Sprites(CSSスプライト)」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね(2012.8現在)。 具体的には「サイト内で使用するたくさんの画像(パーツ)をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

    CSSスプライトについてあれこれ。
  • JavaScriptを使わずにページのCSSを切り替える:phpspot開発日誌

    ページのデザインを利用者好みにカスタマイズできるように、javascript を使い、CSSを切り替えることでデザイン変更できるサイトがありますが、 JavaScriptオフでも同様のことを実装したい場合のサンプル。 JavaScriptを使わずに、PHP+クッキーを使ってページのCSSを切り替えてみましょう。 PHPの知識がなくても、次のサンプルを使えば簡単に誰でもCSSを切り替えることが出来ます。 次のサンプルは、main.css , blue.css , red.css , pink.css というCSSを切り替えたい場合のサンプルです。 (1) まずは、レイアウトを保存するクッキー設定用のPHPスクリプト( index.phpとして保存 ) <?php $valids = array( "main", "blue", "red", "pink" ); $layout = (isse

  • 1