takjitanのブックマーク / 2019年2月6日

takjitan id:takjitan

2019年2月6日のブックマーク (5件)

CSSでスマホ画面で横スクロールするレスポンシブ対応のメニューを作るカスタマイズ - Yukihy Life
最近よく見る、スマホのときに横スクロールをするメニュー。作り方をメモしたいと思います！実装図・メリットカスタマイズレスポンシブ（PC+スマホ）スマホその他のカスタマイズ色の変更メニューの横幅・縦幅の変更最後に実装図・メリットイメージとしては、PCでは一般的なメニューになり、画面の横幅が狭くなると、こんな感じで横スクロールをするようになるメニューです。ちなみに、同じコードをはてなブログのスマホの方に入れると、こんな感じになります（動きは上と同じです）。このメニューのメリットとしては、トグルメニューのようにタップしなくても、はじめから数個のカテゴリが見えている Javascriptを使っていないので、回線が不安定なところでも比較的表示が崩れにくいはてなブログ以外でも使える逆にデメリットは、スクロールできるのか気付かれないかもしれない狭い範囲での操作となるの
takjitan 2019/02/06
リンク
[ jQuery ] select要素（プルダウン・セレクトボックス）を装飾する easyselectboxの使い方 | 東京のホームページ制作 / WEB制作会社 BRISK
[ jQuery ] select要素（プルダウン・セレクトボックス）を装飾する　easyselectboxの使い方更新日：2013/11/28 デザインされたフォームを設置したいとき、select要素（プルダウン・セレクトボックス）の装飾はcssだけではなかなかうまくいきません。背景や枠線をいじってみても、ボタンのところを装飾するのは普通の方法ではうまくいかないようです。 select要素の装飾用に作成されたjQueryのプラグインはいくつかありますが、その中で使いやすかった「easyselectbox」を紹介します。例えば、次のようなデザインのプルダウンを作りたいと思います。まず、通常のプルダウンです。これをcssで装飾してみましょう。例えばこんな感じです。 .select-box { background: #FFFDF4; border: 2px solid #D2B
takjitan 2019/02/06
リンク
CSS3でテキストにグラデーションをかける方法 | mariweb
最近のWebデザインではグラデーションを取り入れたデザインが多くなっているように感じます。今回は、CSS3で文字にグラデーションをかけたり、おまけとして、文字の塗りを画像にする方法を説明していきます。テキストにグラデーションをかける背景色にグラデーションを指定し、テキストでくり抜くという方法です。現状は対応ブラウザーはGoogle Chrome、Safari、Operaです。 HTML <h1>Hello, World!</h1> HTMLはグラデーションにしたいテキストをそのまま記載します。 CSS h1{ color: #ACB6E5;//非対応のブラウザでの文字色を設定 background: -webkit-linear-gradient(0deg, #ACB6E5, #86FDE8);//背景色にグラデーションを指定 -webkit-background-clip: text
takjitan 2019/02/06
あとで読む
リンク
CSSグラデーションを使ったデザインパーツサンプル - NxWorld
わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSのlinear-gradient。未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。よくある使用方法としては例えばセクションの背景だったりボタンなどのパーツの背景にグラデーションカラーを適用するというのが一般的ですが、他にもいろいろ使用用途があるのでいくつか紹介します。以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。また、ベンダープレフィックスなどは必要に応じて追記・変更してください。ここでは全て見た目を画像で紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。テキストが徐々に見えなくなる #1 イメージ（右）のようにテキストの上にグラデーションを重ねることで徐々にテキス
takjitan 2019/02/06
あとで読む
リンク
ハンバーガーメニューを簡単に実装できる、プレーンなHTML/CSSとReactコンポーネント -Animated Burgers
プレーンなHTMLとCSS、またはReactコンポーネントとして利用可能なハンバーガーメニューを紹介します。コピペで簡単に利用でき、サイズやカラーのカスタマイズも簡単です。ハンバーガーメニューのアニメーションもさまざまなものが揃っています。
takjitan 2019/02/06
あとで読む
リンク
- 2019年2月7日
- 2019年2月6日
- 2019年2月4日