タグ

2015年4月6日のブックマーク (4件)

  • CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld

    自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTMLCSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。

    CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
  • いまさら聞けないSVG——Web制作に便利な3つの理由 (1/2)

    スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 連載では、SVGの概要から基的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。(編集部) Webの表現を広げるSVGの魅力 SVGと聞くと、「単なるベクターの画像でしょ」と思う方も多いでしょう。確かにSVGは「Scalable Vector Graphics」の略なので、ベクター形式の画像フォーマットであることには間違いありません。 一方で、SVGには、PNGやJPEGといった、他の画像フォーマットとは異なる魅力があります。SVGをWebページに使うことで、これまでのHTMLCSSだけ

    いまさら聞けないSVG——Web制作に便利な3つの理由 (1/2)
  • 紙の資料をデジタル化できる「スマホ用スキャナ」アプリ5選 | ライフハッカー・ジャパン

    旅行中にもらった領収証や、ホワイトボードの板書の内容、封筒に描いたスケッチなどを保存したい時は、スマートフォンのスキャナアプリを使えば簡単です。記事でご紹介するオススメのアプリなら、紙資料のスナップショットを撮って、クラウド上に保存できるので、スキャンしたデータを後で別のデバイスからも参照できます(文字認識も可能です)。 それでは、領収証や板書、手書きのメモなどの記録に役立つ選りすぐりのスマートフォン用スキャナアプリを5つご紹介しましょう。 重要な情報が書かれた紙切れをポケットにくしゃくしゃに丸めて入れておくのはイヤだし、黒板をノートに書き写す前に消されてしまったら困りますよね。そこで米Lifehackerは先ごろ、どのスキャナアプリを使用して書類をスマートフォンに保存しているかをテーマにした読者対象のアンケートを実施しました。 その結果、あらゆるモバイルプラットフォームを網羅した膨大な

    紙の資料をデジタル化できる「スマホ用スキャナ」アプリ5選 | ライフハッカー・ジャパン
    a-shibata
    a-shibata 2015/04/06
  • 最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ

    最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ:Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。

    最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ