[B! スニペット][css3] mypacecreatorのブックマーク

【Sass】Sassでレスポンシブ！メディアクエリを便利に書こう。 | バシャログ。

気が付いたら8月突入してて茫然としたhakoishiです。しかももう1/3過ぎてるとか冗談はおよし。さて、今回はSassでメディアクエリを便利に管理できる書き方の一例をば。まとめて書いて、コンパイルの際にブレイクポイント毎に分散させます。最近、レスポンシブ対応でコーディングをする機会があったのですが、ブレイクポイント毎にそれぞれセレクタを書いていったら管理しきれなくなってしまいました。まるで統一感のないソースに…！そこで考えたのが、同じセレクタはまとめて記述し、その内部でメディアクエリごとの分岐も書く方法です。更に、メディアクエリ毎にまとめて吐き出されるようにしました。一度に視界に入る範囲であれば、統一感を保った記述もしやすいかと。 scssファイルの構成と記述内容メディアクエリ分岐などの枠をstyles.scssに、スタイルは_media-query.scssに記述しま

mypacecreator 2012/12/10

リンク

CSS3を使ってできる画像まわりのエフェクトやスタイリング18

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレームまとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません

mypacecreator 2012/02/25

リンク

これは便利！コピペで使える実用的なCSSテクニックいろいろ

div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must

mypacecreator 2012/02/08

リンク

Useful CSS Snippets for Your Coding Arsenal

CSS is a beautiful language but it can also be frustrating at times. Certain CSS solutions don't work on certain browsers (cough Internet Explorer cough) and much of your time can be spent debugging code. Thankfully there are lots of great CSS snippets available online that fix common probl ems and design issues. In this article we have listed 30 CSS snippets that we think you will find very useful

mypacecreator 2012/01/29

リンク

「少しの手間で大きく変わる、細部にこだわったWebデザイン」をできるだけCSSでやってみた - 今日もスミマセン。

【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックスを読んで、「CSSだけである程度できそうだな」と思ったのでやってみた。デモページとりあえず完成品が見たい方は、ここまず基本となるHTMLを用意するとりあえず、角丸四角形でボタンらしきものを作る。 <html> <head> <style type="text/css"> .buttonBase { position: relative; width: 300px; background-color: #3699D0; text-align: center; border-radius: 10px; cursor: pointer; } .caption { color: #02659C; font-family: impact; font-size: 40pt; font-weig