はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

keyframe を使ってCSSだけで背景画像を作成しました animation と keyframe を使用するとCSSで簡単にアニメーションが実装できます。 このサイトを作成する際に animation と keyframe を使用したのでその使い方を紹介します。 Elastic | A collection of background image created by CSS only コードはこちらに上がっています。 https://github.com/sottar/elastic keyframeとは 詳しくはこちら (@keyframes - CSS | MDN) に書かれていますが、簡単に説明すると CSS animation の流れの中間地点を制御することができます。 10%ではこの状態、50%ではこの状態、80％では、、、のような感じです。 モダンブラウザには全て対応し

サイドバーを固定化してメインカラムを可変にしようと思い、cssでのやり方がわからなかったのでjavascriptで実装していました。 画面幅を取得して、そこから固定divの幅と間に取りたいマージンを引いて、メインカラムの幅にする。みたいな処理をしていたのですが、 cssで実装できるようなのでまとめてみました。 javascriptでも数行で実装できますが、ブラウザ上で画面幅を変えたときにリロードしないとカラムが落ちてしまうということと、 cssでの実装が思ったよりも簡単だったのでcssで実装する事をお勧めします。 文章でまとめると 固定する方のdivはwidthをpxで指定する (width: 300px) 可変する方のdivはwidthを100%にして固定するdivの幅のネガティブマージンを指定（margin-right: -300px） 可変する方のdivの内側にdivを作り、固定する

CSSで作成した背景 これらのパターン模様をCSSのみで作成しました linear-gradient と radial-gradient と repeating-linear-gradient CSS3で追加された線形グラデーション linear-gradient と円形グラデーション radial-gradient を使用すれば、さまざまなパターンを表現することが可能です。 これに background-size プロパティを組み合わせれば、CSSだけで背景画像を作成することができます。 CSS3をサポートするブラウザが増えてきている現在では、ほとんどのパターンがCSSだけで作成可能になっています。 また、 repeating-linear-gradient を使用すれば複雑なストライプ模様を簡単に作成できます。 作成方法の例についてはこちらに書きました。 CSSだけで複雑な背景画像を作

実装方法3パターン 横スクロールを実装する方法は以下の3パターンが主流だと思う。 1, 親要素をdisplay: flexにする 2, 子要素をdisplay: table-cellにする 3, 子要素をdisplay: inline-blockにする それぞれの実装方法と気をつけるところを書いていく。 HTMLはこういったものを想定 <ul class="gnav"> <li class="item">gnav1</li> <li class="item">gnav2</li> <li class="item">gnav3</li> <li class="item">gnav4</li> <li class="item">gnav5</li> </ul> ちなみにどのパターンも親要素(ul)に overflow-x: auto; または overflow-x: scroll; をつける必

webpackとは webpackは依存関係のあるJSやCSSなどを、まとめてくれるビルドツールです。 webpackにはLoaderという仕組みがあり、ソースコードに適用する処理を柔軟に設定することができ、 そのLoaderを使うことで、scssやJSXなどで書かれたファイルを変換することができます。 ここでは、React (jsx) , scss のコンパイルと、JavaScriptの構文をチェックしてくれるツールの ESLint をwebpackで行えるように設定します。 構成 今回は、以下のようなディレクトリ構成を想定し、 src の中の React と scss ファイルをdestディレクトリ内に配置することを考えます。 src ├─ react └─ scss dest ├─ js └─ css package.json node_modules webpack.config.

filterとmix−blend−mode instagram風の画像編集ができる、CSSgramというcssフレームワークが話題になっています。 css3のfilterとmix-blend-modeというプロパティを使うとCSSのみで画像を編集することができ、雰囲気や仕上がりをガラリと変えることができます。 結構細かい機能が実装されていて、簡単な加工のみならphotoshopなど使わずに簡単に出来てしまいます。 自分の勉強も兼ねて画像ジェネレーターサイトを作成しました。 CSS filter and mix-blend-mode Generator コード(github) こんな加工がCSSのみで出来てしまいます。 元画像 加工1 #image_after { filter: grayscale(100%) sepia(30%) brightness(110%) contrast(110

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?