SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
Compassの設定ファイル「config.rb」の編集方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 最近買った漫画は「ウメハラ – To live is to game -」です。 さて、王くんのおかげで Sass + Compass を使えるようになりました。わーい！ 王くんのブラボーな記事はこちら↓ CSSの常識が変わる！「Compass」、基礎から応用まで！ Sassファイルの吐き出したCSSファイルの出力スタイルの設定は「config.rb」を書き換えることで簡単に変更出来ました。 今回はconfig.rbの基本的な編集方法についてまとめてみました。 config.rb のデフォルトの記述 config.rbの中身は何もいじらないとこんな感じになっていると思います。 （Codekitなどで吐き出すとCodekitのデフォルトの設定が入るので、またちょっと違います） # Require any additional compass plugin
ズルいデザインテクニック2013 + セミフラット version
[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/kssdezuo-rupatanraiburari 【アイコンを200こ描いた振り返り！】アイコンから知るデザインのヒントby @awayuki http://www.slideshare.net/awayukin/awayuki-pmd01-share ビジュアルデザインまでのデザインワーク by @yokotak0527 http://www.slideshare.net/YokotaKenji/ss-26460108
楽して時間短縮！Compassで作ったスプライト画像でRetina対応を行う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。UFOキャッチャー運が急降下中、デザイナーのももこです。 輪っかがついたキーホルダー系をうまく取れるようになりたい…(´・ω・｀) 気を取り直して、今回はCompassを使って作ったCSSスプライト画像でRetina対応を行う方法をご紹介します。 Compassを使って書き出したスプライト画像を自動でRetina対応にさせる スプライト画像の生成 $sprites: sprite-map("sprites/*.png"); $sprites-img:sprite-url($sprites); まずはスプライト画像を生成します。 単一の画像をフォルダに入れると、見事に合体したスプライト画像がimagesフォルダに書き出されます。 sprite-mapにはconfig.rbで指定したimagesフォルダ以下のルートを入れて下さい。 Mixinを記述する @mixin sprite-
パフォーマンスから考えるSass/Compassの導入・運用
- The document discusses the introduction and use of Sass and Compass for a large-scale e-commerce site. - Key aspects covered include using Sass features like nesting, mixins, extends and @import to organize CSS, Compass features like sprite generation and creating a style guide. - The results of adopting Sass/Compass included improved development speed and a 40% increase in site traffic over 4 m
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
