[B! web__cording] lupinus725のブックマーク

CSSのみでお洒落なアニメーション付きのモーダルウィンドウを作ってみた

前々から「CSSだけでお洒落なモーダルウィンドウ作れないかな～」と思って色々と試していたんですが、ようやく納得のいく出来の物が完成したので載せておきます。 PureCSS ModalWindow 仕組みは後で解説するとして、とりあえず作ったサンプルを5つ紹介します。一応、画面外をクリックしてウィンドウを閉じる機能にも対応していますし、ピュアCSSのモーダルウィンドウにしては珍しい閉じる際のアニメーションも実現できました。通常パターン See the Pen PureCSS ModalWindow (Normal) by Kuzlog (@Kuzlog) on CodePen. 上から See the Pen PureCSS ModalWindow (Top) by Kuzlog (@Kuzlog) on CodePen. 拡大 See the Pen PureCSS ModalWind

lupinus725 2018/11/19

オシャレだ。

web__cording

リンク

一番詳しいCSS設計規則BEMのマニュアル - Qiita

一番詳しい(当社比) この記事は大体1年くらいBEMを実践した中で溜まった知見的なものをルール･規則･注意点をまとめたマニュアルというかたちにしたもの. BEM初心者でもすぐ実践してもらえそうな感じに詳しくしたつもり. ちなみにBEMの実践というのはRails製Webアプリでの実践. ※注多分に我流な部分も含まれている. この記事の全てを真似しようとせずに一部のエッセンスのみ取り入れるのもいいかもしれない. BEMとは Block Element Modifierの略で, Block => でかい括り Element => でかい括りの中にいる要素 Modifier => 上記2つの変化球の3つに分けて考えていくことでCSSを設計･命名していく手法. 基本的な考えとか前提とか BEMの中でも特にMindB EMdingと呼ばれている命名法をベースとしている SCSSを使用する基本的に

lupinus725 2018/11/17

リンク

head内に記述するソーシャルメディア・検索エンジン用のmetaタグを簡単に生成できる無料ツール -Meta Tags | コリス

head内のmetaに記述するTwitterカードやFacebookのOGPなどのソーシャルメディア用のコード、Googleなどの検索エンジン用のコードを簡単に作成できる無料のオンラインツールを紹介します。公式のデバッガーですぐに確認もできるので、非常に便利です。 Meta Tags Meta Tagsでは、下記のソーシャルメディア・検索エンジン用のmetaタグがサポートされています。 Google Facebook Twitter Linkedin Pinterest Slack 使い方は簡単で、登録など面倒なことは一切不要、無料で利用できます。まずは、サイトにアクセスします。