タグ

2014年2月13日のブックマーク (3件)

  • BEMを使ったSassファイルの整理

    このウェブサイトのSassファイル群はずっとフラットなファイル構成でやっていた。主にSassが相対パスの修正を行うことができないことが理由だったけど、最近はポストプロセスすればどうにでも出来そうな感じなので、あまり気にせず整理することにした。単純にカテゴリ分けするだけでも良いのだけど、BEMを応用してやってみている。 CSSのクラス名及び変数やプレースホルダー・クラスにはまだ手を付けず、まずはBEMツリーとルールセットの配置の対応を作るところから始めた。 ファイル名でブロック ディレクトリでブロックのネスト セレクターの1段階のネストでエレメント &を使ったセレクターのネストでモディファイア 以上のようなルール付けの元にやってる(未完成)。 ブロック scss/ ├ _header.scss └ header/ ├ _logo.scss └ _site-navigation.scss ファ

    BEMを使ったSassファイルの整理
  • 今どきのCSS3グラデーションの指定方法

    意外とAndroid以外は最新ブラウザが正式な記述に対応しております。 正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。 IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。 上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #b6e2fd), co

    今どきのCSS3グラデーションの指定方法
  • iOS 7のブラー(磨りガラス風)について考えてみる | DevelopersIO

    iOS 7のブラー効果をどう実現する? コントロールセンターや音量調節の背景など、iOS 7でよく見かける磨りガラス風のあれです。ブラーをかけるとなんとなくiOS 7っぽくなるので、「コントロールセンターみたいにブラーかけてよ!」って言われることが増えそうですね。 「磨りガラス風の画像を上にかぶせりゃいいんじゃないの?」と誤解されている方も多いかもしれませんが、そういうわけにはいきません!それっぽく見せるにはプログラムでそこそこのコードを書いてあげなければなりません。 UIViewとかにブラーをかけるメソッドがあるといいのですが、今のところないです。したがって、自前で作成したビューにブラーをかけるには、その処理を自分で実装する必要があります。ようするに時間がかかります。 そこで、ブラーをかけるのにどういった実装方法があるのかを調べてみたところ、以下の2つの方法がみつかりました。 標準コント

    iOS 7のブラー(磨りガラス風)について考えてみる | DevelopersIO
    ysk_lucky-star
    ysk_lucky-star 2014/02/13
    たぶん社内で「できるでしょ?」って言われて「簡単にできるわけねーだろks」をオブラートに包んだような記事w