Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
Color Palettes for Designers and Artists - Color Hunt
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
Bootswatch: Sketchy
Primary Secondary Success Info Warning Danger Light Dark Link Primary Secondary Success Info Warning Danger Light Dark Link Primary Secondary Success Info Warning Danger Light Dark
びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
今回はCSSのdisplayプロパティをマスターしましょう。少し分かりづらい内容ではありますが、Webサイトを作るためには必ず理解しておく必要があります。
CSSによって、ボックス内で左寄せや右寄せをする5つの方法
CSSによって、要素を左右に並べる方法について考えます。並べたときの幅まで考慮する方法については、多段レイアウトで解説します。 パターン1 <div> 左 <span style="float: right">右</span> </div> <div style="clear: right">後続する要素</div> 右寄せする要素にのみ、float:rightを適用する。 後続する要素がfloatの影響を受けないように、clearを指定する。
Webフロントエンドハイパフォーマンスチューニングを読んだ - hitode909の日記
Webフロントエンドハイパフォーマンスチューニングを読んだ．最近フロントエンドでがんばるアプリケーションを作ってるので参考になった．ネットワークまわりからブラウザの細かい実装の話まで書かれていて良かった． link rel=prerenderで次のページをプリレンダリングできる 次のエピソードに飛ぶとか，コメントページからメインページに飛ぶとか，次に遷移するページが明確なときは有効そう あとからJSで足してもよい CSSのマッチ方法，div>div>span とか書くと右から左に順にマッチしていく なので入れ子をやめると速くなる．BEMでCSSを書くとネストせず書くので速い デベロッパツールでレンダリングの様子をこまごま見れる ペイントが発生した様子 レイヤの様子 ためしに，このブログのaboutページをプリレンダリングしておいたので，下のリンクから遷移するとすばやく遷移できるはず． <l
Documentation - Materialize
flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an
CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス
2021年12月6日 CSS フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ ↑私が10年以上利用している会計ソフト！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサイトではJavaScriptにより色の移り変わりを実装しているようですが、CSS3のキーフレームアニメーションだけでも表現できます！ CSS3 キーフレームアニメーションの基本 まずは要素を徐々に変化させるアニメーションについて覚えていきましょう！CSS3の animation プロパティでは、キーフレームを設定して細かい動き
Text Input Effects | Set 2
Text Input Effects Simple ideas for enhancing text input interactions Manami Username Website Invitation Code Nariko First Name Middle Name Last Name Nao Street City Region Yoshiko Bird's Color Wing Span Beak Length Shoko Player Name Village World Chisato First Name Middle Name Last Name Makiko Search Sae Email Address Invitation Code Full Name Kozakura Name Email Website Fumi Course Name Degree W
斜めのラインを使うスタイルシートのチュートリアル | コリス
コンテンツ間の区切りやエレメントに斜めのラインを使ったスタイルを与えるスタイルシートのチュートリアルを紹介します。 Slopy Elements with CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ 斜めのラインはCSS3で実装されているので、Chrome, Safari, Firefox, IE9でご覧ください。 demo 1 実装のポイント コンテンツ自身は回転させず、コンテンツのラッパーを回転させます。 回転させたコンテンツは表示領域からはみ出す部分もあるので、余剰分の処理も忘れずに。 HTML 見出しとテキストを含む個々のコンテンツはarticle要素で実装し、そのラッパーとしてdiv要素を設置しclassに「se-slope」を与えます。 <section class="se-container"> <div class="se-slop
CSSできれいな斜め線
CSSで斜めに線を引くようなことをするには多少なりとも工夫が必要だった。つまりCSSで作る吹き出し(もう5年前の記事だ)のようにborderプロパティーを使って頑張るしかなかったわけだ。今はlinear-gradient()があるので直観的に作ることができるようになった。しかしきれいに引くとなるとまだ工夫が必要そうだ。 Demo: CSS Diagonal Line borderプロパティーを使ったもの、linear-gradient()を背景で使ったもの、Data URI化したSVGを背景に使ったもの、以上の計3つのデモを作った。 .lg { background-image: linear-gradient( to right bottom, transparent 50%, #f0f 50% ); background-repeat: no-repeat; background-si
Cascading SVG Fill Color | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. One time someone told me their biggest problem with SVG icons is that they didn’t match the color of text they were by. In fact it was such a big problem for them, that despite seeing the advantages of SVG icons they were sticking with icon fonts. I didn’t think of it at the
ついつい押したくなる、CSS3を使ったラジオボタンのデザイン
フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル１からコードを紹介していきます。 サンプル１ 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題
CSS の pointer-events プロパティでマウスイベントを制御する - Qiita
Twitter Bootstrap の .btn に .disabled をつけると、click イベントが発生してないことに今さら気がついて、なんでだろうと思ってコードをみてみたら、こういう指定があった。 .btn.disabled, .btn[disabled], fieldset[disabled] .btn { pointer-events: none; /* これなに */ cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } pointer-events はデフォルト値 auto 、 これを none とすると、マウスイベントを拾わなくなるらしいです。 モダンブラウザではサポートされてるけど、IE は11から。 SVG
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
『Webフロントエンドハイパフォーマンスチューニングを読んだ - hitode909の日記』へのコメント
Design Patterns on CodePen
How do I wrap text in a pre tag?
bootstrap で背景や文字の色を変えたい
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
