Bulmaのカスタマイズ方法 with Rails Webpacker - rochefort's blog
昨日作った Twitter Video Downloader で利用したBulmaについてです。 Bulma: a modern CSS framework based on Flexbox いいですよね。 bootstrapにしろCSSのFrameworkはゴリゴリCSS書くのがつらいエンジニアとしては、とても有り難いです。 Customize方法 デフォルトの色を変えたりする方法がしばし分からずに、小一時間ぐらい悩みました。 通常はyarn add bulma した後に app/javascript/stylesheets/application.scss などでimportすれば使えます。 @import '~bulma/bulma'; カスタマイズするには、 Customize Bulma | Bulma: a modern CSS framework based on Flexb
box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company
CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果（影をつける）を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad
2018年大本命！HTML/CSSコピペできる、参考にしたいスニペット78個まとめ - PhotoshopVIP
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットを、定期的にまとめてご紹介しています。SVGを使ったアッと驚くアニメーションから、普段使いがしやすくなる小技テクニック、現在利用するデザイナーが増えているCSS Gridの可能性を探る実践向けスニペットまで、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 ウェブサイトをもっと面白く！コピペ可能
マテリアルデザインをWEBで再現できるコンポーネント「Material Design Lite」を試してみる
数日前にGoogleがマテリアルデザインをWEBで再現できるHTML/CSS/Javascriptコンポーネント「Material Design Lite」を公開しました。テンプレートやサンプルコードを利用してガイドラインに沿ったWEBサイトが作成できるようになります。 マテリアルデザインの作成キットをGoogle公式が発表 マテリアルデザインとはGoogleが2014年6月に発表した、Android5.0から使用されているデザインガイドライン。要素の重なりや階層を影や滑らかな動きで再現します。ユーザーが要素を選択した時に波打つ表現など、心地良いアニメーションがあらゆるところに実装されています。 このマテリアルデザインに惚れ込み、当サイトも俺流にパクってきた「待てリアルデザイン」ですが、これを利用すれば本物のマテリアルデザインに近づけます。 要素の形が境目なく変化していくアニメーションなど
CSSだけで吹き出しの会話形式を取り入れる方法 - 人生RPG
こんにちは！冒険者Lv.1（@boukenshaLv1)です！！ ブログを始めてから色んな方のブログを拝見して楽しんでいます。 拝見したブログの中には「吹き出し」を使った会話をしているような表現を使っている方も度々みます。 ブログや記事のジャンルによっては見やすかったり、共感できたりするので一つの武器としてすごい役に立ちそう！！ そう思った私は色々吹き出しの取り入れ方について調べました。 正直に言うとやり方はすぐ理解しました。 しかし！実践しようにも会話相手がいないことに気づきました。 自分の吹き出しはアイコンのキャラを使えますが、相手は？ フリー素材でテキトーに相手を探すのが簡単ですが、どうせ今後使っていくなら親しみやすいオリジナルキャラを使いたい！ 変なところで無駄にこだわり屋さんな私は、相手をちゃんと準備してから実践しようと今日までコツコツとキャラ作成に励んでいました。 イラストに関
続・今更聞けない Bootstrap 4 のレイアウトシステム with Flexbox - Speee DEVELOPER BLOG
プロジェクト推進室の服部 (@yhatt) です。現在は社内の福利厚生制度である Speee Library を筆頭とした社内システムを中心に担当しています。 今回は、遡ること 2 年前に公開した、今更聞けない Bootstrap のレスポンシブ の続編として、Bootstrap 4 正式対応版 に内容をアップデートしてお届けします。 『Bootstrap 4 を使って、"柔軟な" レスポンシブ Web を構築したい』という方は、是非この記事を読んで、Bootstrap 4 のレイアウトシステムの基本をおさえていただけると幸いです。また、『Bootstrap 3 から 4 に移行したい(移行した)』という方のために、v3 と v4 の違いを交えながら解説していきたいと思います。 前回の記事については、以下をご覧ください。 tech.speee.jp 以前公開していた記事は、Bootstra
CSS3 背景画像だけにガウスぼかしをかける方法
モダンなシングルページレイアウトのウェブサイトで、背景画像をすりガラスのようにぼかしてタイトルを強調させるデザインをよく見る。多くの場合は画像自体にあらかじめフィルタをかけているのだが、CSS3を使うとfilterプロパティを使うだけでblur効果をかけられる。 ただ、ちょっと面倒だったので方法をまとめておく。 backgroundプロパティについて 最初に背景画像を指定するため、backgroundプロパティについて学んだ。 backgroundプロパティは、背景関連の値を一度に指定できるショートハンドプロパティだ。（marginやborderなんかと同じ） 基本的にはショートハンドプロパティを使うのだが、せっかくなのでbackgroundプロパティについて掘り下げる。 background-color 背景色のプロパティ ex. background-color: #123456; b
フロントエンド全然わからないマンが、ちょっとでも見た目のいいWebサービスを作ろうとしてやったこと - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに サーバーサイドプログラミングを勉強していると、自分でWebサービスを作りたいという気持ちがわいてくるものです（私はそうでした）。しかし、ここで大きな問題が立ちはだかります。どんなにすごい機能をつけても、いい感じのデザインのWebサービスでないとそもそも使ってもらえないのです。 試しに、QiitaのトップページのCSSを無効にしてみました。使える機能は変わらないはずなのに、全く使う気が起きなくなりますね。 しかしそうは言っても、フロントエンドの経験がほとんどないとどうすれば見た目をいい感じにできるかがわかりません。今回は、ちょっ
最高のモックアップツールかもしれないBootstrap Studio - Qiita
1. モックアップツールって何使ってる？？ 2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました （色々あってリリースはまだしていません...）。Webアプリケーションを作り始めるときに、はじめに「設計」と「モック」を作りました。 世の中に出ているモックツールのまとめ https://navi.dropbox.jp/mockup-tool https://www.mockplus.com/blog/post/webux-10 色々と調べた結果「Bootstrap Studio」が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。 2. Bootstrap Studioについて Bootstrap Studio https://bootstra
新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ
2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった、そして改訂された、Bootstrap 4の基本テンプレート、ナビゲーション、コンポーネントを紹介します。 Bootstrap Bootstrap 4の基本テンプレート Bootstrap 4のナビゲーションバーのテンプレート Bootstrap 4のコンポーネントのテンプレート Bootstrap 4の実験的なテンプレート Bootstrap 4の基本テンプレート まずは、Bootstrap 4
CSS書きたくなさすぎ問題2017 - DRYな備忘録
css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui （追記）UIkit （追記）Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで簡単！サイト制作のアクセントになるパーティクル(粒子・分子)エフェクト・アニメーション14選！【CSS/JS】
[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック![[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/86d2bb41707585bf01592235c9d747aa9374b088/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018032701.jpg)