SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
Compass 1.0リリースノート 和訳 - Qiita
※こちらの記事は、Compass 1.0リリースノートの意訳です。詳しくは原文を参照してください。 ※また、「日本語おかしいよ」「訳へんじゃない？」の場合、ヘコまない程度にやさしくコメントいただけるととても嬉しいです。 Compass 1.0 is now available! まずは前置きから：このリリースはとても長い道のりだった。その理由と言い訳をリストにしてみんなに渡すこともできるのだが、それっていうのは本当の問題じゃない。もしあなたがcompassのように１年以上メンテナンスされていないオープンソースに再度関わることになるオーナーだったとしたら、最も慎重な判断をする場合、その結果としての行動はそれを打ち切ることだったと思う。だが、私はそれを打ち切ることができないほどには頑固だったのだ。 今後の課題・・・どうやって発展させていくかということ。 定期的なのバグフィックスのリリース。Co
Spriting with Sass and Compass – TheSassWay.com
As web developers have become more concerned about browser performance a technique called “image spriting” has emerged that is designed to reduce the number of requests made to the server. As it turns out, fewer requests made the server (when there is no significant difference in the combined size of the files delivered) can make a big difference in how fast a page appears to download. Image sprit
Middlemanユーザーもこれを入れればすぐにズルいデザインをはじめられます！ | mah365
意外と好評いただいているzurui-sass-railsをMiddlemanに対応させたGem、zurui-sass-middlemanを作りました。これでいちいちsassファイルを引っこ抜いて来なくてもzurui-sassを使えます！ 使い方 1. Middlemanプロジェクト内のGemfileに追加 gem 'zurui-sass-middleman', '~> 0.0.2' 2. Sassファイルからimport @import "compass" @import "zurui-sass" ※ compass前提なので、zurui-sassを読み込む前にcompassを読み込んで下さい。 3. あとはMixinを使うだけ .box +zurui-box-outer みたいな感じでMixinを使えるようになります。 Mixin自体の効果や使い方についてはこちらのページをご覧ください。
CompassでCSS Sprite生成（手動生成、Retina対応） - 一から勉強させてください
今回は、前回やったCompassでCSS Sprite生成〜導入、自動生成〜の続きとして、CSS Spriteの手動生成とRetina対応について書きたいと思います。 ちなみに前回と今回のサンプルをまとめてこちらに公開しております。 https://github.com/danimal141/create_css_sprite それではまずCSS Spriteの手動生成についてです。 前回は @import "compass"; $sprite_images-sprite-dimensions:true; @import "sprite_images/*.png"; @include all-sprite_images-sprites;という記述だけであっという間にスプライト用のCSSができちゃいましたが、これ以外にも同様のスタイルを生成する方法があるみたいなので試してみました。 これ。
Sache: Find Sass and Compass Extensions for your next project
Discover Sass & Compass Extensions Find the perfect tool for your next Sass or Compass project. Add Your Own
Compassチートシートを作りました - マザーシップウェブ制作事務所
Compassチートシートを作りました 記事公開日：2014/01/25 最終更新日：2023/10/19 こんにちは。新潟ホームページ制作【マザーシップ】です。 Sassチートシートに引き続き、Compassのチートシートを公開します。 そんなに使用する機会が無いコード（Resetなど）や 対応ブラウザが少ないコード（Columnsなど）、 および、皆さんがそれぞれのスニペットを持っていると思われるSprite関連のコード等は省略しています。 なので、覚えておきたいコードが厳選されているはず、です。 Compassを使うみなさんのお役に立てたら嬉しいです。 Compassチートシートのダウンロード 画像（クリックで拡大） PDF Compass_CheetSheet_1.0.pdf をダウンロード Compassチートシート更新履歴 バージョン更新日更新内容
今日から使える！ Sass/compass ゆるめ勉強会
Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
DropCatch.com