タグ

scssとcss3に関するlordkfのブックマーク (2)

  • 【SCSS対応】CSS3PsプラグインでCSS3によるWebデザインの再現度を上げ効率化する | DevelopersIO

    PhotoshopのデザインをCSS3に落とし込む際、Photoshopのレイヤースタイルの数値を細かくチェックしてCSSを組んでいくのは手間でこんなもんだろうっていう感覚でやってしまうことも多いと思います。 ちょっと前に話題になっていたフリーのプラグインなので今更ですが、「CSS3Ps」を試してみて、注意点などをまとめてみました。 インストール CSS3Ps 上のリンクからCSS3Psのサイトに移動します。 まずは右上の「Free Download」を押して、プラグインファイルをダウンロードしましょう。 ダウンロードファイルは以下の2つに別れています。 Download for Adobe Photoshop CS5 and CS6 Download for Adobe Photoshop CS3 and CS4 Mac OS X Lionの場合はAdobeから提供されているパッチのイン

    【SCSS対応】CSS3PsプラグインでCSS3によるWebデザインの再現度を上げ効率化する | DevelopersIO
  • 【Webデザイナ-・コーダー向け】すぐに使えるSCSS入門|Compass基礎編 | DevelopersIO

    はじめに 季節の変わりめで風邪をひいていませんか?僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ-・コーダー向け】すぐに使えるSCSS入門|基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins(関数)」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動

  • 1