タグ

CSSとJavaScriptに関するiR3のブックマーク (5)

  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す(文字色も変更)ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
    iR3
    iR3 2015/03/18
    ふむふむ
  • JavaScript/CSSを使ってスクロールによるアニメーションを実現·skrollr MOONGIFT

    skrollrはCSSを使ってスクロールによってアニメーションを実行するライブラリです。 最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。 デモです。スクロールを開始します! 回転しながら飛んでくる文字! 下から上がってくる文字! 横からスライドも。 色が変わりました。それに合わせてテキスト色も変わっています。 上下からボックスが迫ってきます。 終了です。逆に上に上がっていくとアニメーションが逆に展開されていきます。 デモ動画です。スクロールすると次々と内容が変わっていきます。 実用性という意味ではあまり大きくなさそうですが、インパクトは強烈です。サイト全体を作るというよりも、ランディングページや紹介ページで使うと効果的でしょう。 skrollrはJavaScript/CSS製のオープンソース・ソフトウェア(M

    JavaScript/CSSを使ってスクロールによるアニメーションを実現·skrollr MOONGIFT
  • JavaScriptによるスタイルシート(CSS)の操作

    スタイルシートには、CSSファイルに記述されたスタイルルールと、各タグに記述されたスタイル属性があります。スタイルルールは、タグ名やクラス属性やID属性などを使ったセレクタによって、適用されます。 そこで、JavaScriptを使って、スタイルシートに関する各種データを操作する方法を紹介します。 このプログラムは、IE8, IE7, IE6, Firefox3, Safari4, Opera10, Sleipnir2で動作することを確認済みです。 スタイルシートは、document.styleSheets で取得できます。 ファイル毎に、配列として格納されています。 各スタイルシートには、スタイルルールの配列として格納されています。 スタイルルールは、セレクタとプロパティ+値の形式に分かれて取得できます。

  • はてなブログ | 無料ブログを作成しよう

    トマト煮缶を使った簡単レシピ 鯖缶と言えば味噌煮が定番だ。ダイソーの鯖味噌煮缶は安くて美味しい動物性タンパク源なので良く買っていたのだが、試しに鯖トマト煮缶を買ってみた所、これが味噌煮よりさらに美味かった。トマトの旨みと鯖の旨みの相性が抜群でご飯が進む。 鯖トマト煮缶が気に入って…

    はてなブログ | 無料ブログを作成しよう
  • CSS のセレクタの名前の整理 - IT戦記

    はじめに 「CSS のセレクタ」っていうと以下のようなものを想像すると思うんですけど div.container ul > li じゃあ、 div はセレクタ? .container はセレクタ? div.container はセレクタ? > はセレクタ? などなど色々と疑問が出てくる訳で、どういう名前で呼べばいいか。自分のために書いておく。 これ系のエントリでは、以下のエントリが一番参考になります http://d.hatena.ne.jp/kiririmode/20080516/p1 Selectors group カンマで区切られたセレクタのリスト div.container ul > li, div#hoge.hoge ~ span#fuga.fuga Selector カンマで区切られてる一個一個のやつ div.container ul > li とか div#hoge.hoge

    CSS のセレクタの名前の整理 - IT戦記
  • 1