タグ

webデザインとCSSに関するhourousutenekoのブックマーク (3)

  • CSS3のブレンドモードが素敵! 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA

    mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは? ブレンドモードはクリエイティブな表現を作る上での基機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。記事ではCS

    CSS3のブレンドモードが素敵! 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
  • CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい - Qiita

    新規JekyllプロジェクトにBourbon, Neat, Bittersをインストールして作業したら、とても快適だった。 Bitters helps designers start projects faster by defining a basic set of Sass variables, default element style and project structure. – Bitters という説明の通り、新規プロジェクトがスタートダッシュできる感覚。最初からやりたいことに集中できる。 Bootstrapではスタートダッシュできるけど使い捨てのコードになりがち。ところが、Bittersのコードは長期的なメンテナンスにも耐えうる(はずだと筆者は判断している)。 コンテンツファースト アクセシビリティファースト モバイルファースト インブラウザーデザイン といった考え方や手

    CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい - Qiita
  • CSS勉強するだるさ - mizchi's blog

    そろそろ勉強しないトナーと思いつつもだるくなる原因列挙する 前提 お前はJS書いてればいいよと甘やかされてきたので仕事で書いた量は少ない リフロー、ペイント等の表示制御系とパフォーマンス周りだけはそれなりに知ってる position: absolute や visibility: hidden とか 簡単な装飾はできる 段組とかの知識があんまりない わからないこと 解法が一つではなく、最適解がわからない 数こなせばわかる気がするが時間かかってだるい すでにあるサイトを参考にするもそれが正しいのかよくわからない 正解が(プログラマ的感覚だと)醜くみえる たとえば中央寄せ たとえば段組 このrelative指定は当に必要なのか…みたいな ググって引っかかる資料のレベルが低い 古のspacer.gifとか未だに引っ掛かる これはJSと同じ問題なので2010~の資料しかみないようにする 楽できそ

    CSS勉強するだるさ - mizchi's blog
  • 1