背景・装飾 アニメーション スライドショー ナビゲーション オーバーレイナビのサンプル 下記のボタンをクリックすると各デモページにジャンプします。デモページ右上のメニューボタンをクリックすると動作確認できます。 動きのあるプルダウンメニュー
背景・装飾 アニメーション スライドショー ナビゲーション オーバーレイナビのサンプル 下記のボタンをクリックすると各デモページにジャンプします。デモページ右上のメニューボタンをクリックすると動作確認できます。 動きのあるプルダウンメニュー
サイトにスライダー入れたいなら、最も使いやすいスライダーjquery「slider-pro」がおすすめ! こんにちは。高校生時代に廊下でよくスライディングをしていたため、すねやおしりが常に破れていたナカノマサミツです。 さて、現存するWEBサイトの非常に多くで導入されているもの、それはスライダー。 スライダーさえいれておけば、なんとなくWEBサイトがいい感じに見えてしまうことから導入を希望されるクライアント様も非常に多いです。 さてそんな大人気のスライダーですが、今日では様々なスライダー系のライブラリがあります。有名なところでいうとおそらくスライダーを導入したことがある人なら一度は使ったことがあるであろう「bxSlider」。 他にも「slick」や「FlexSlider 2」なんかもよく使いました。 が! 今回紹介するslider proは正直めっちゃ使いやすいです。一瞬でさくっと導入で
サルワカでは「見出し」や「ボタン」などWebサイトのパーツごとに様々なデザインサンプルを作成しています。どれもHTMLとCSSのコピペだけで使えるものです(いわゆる「スニペット」というものですね)。 サンプルの数がかなり増えてきたので、このページでまとめておこうと思います。ブログのデザインカスタマイズの際に是非ご活用ください。 1. ボタンのCSSサンプル コピペで使えるボタンデザイン集です。シンプル、フラット、立体的、円形のものなど、かなりのバリエーション数を用意しました。気に入ったCSSを追加しておけば、記事内にHTMLテンプレを書くだけで好きなデザインのボタンが表示できるようになります。
TL;DR CSS だけで動く「ズームインとズームアウトをフェードしながら交互に繰り返す CSS スライダー」です。 slider デモ 作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示しています。CSS でみたい人は「VIEW COMPILED」を押してください。 2019/01/29 追記:IE でカクつく場合は、以下を li に追加するか、@keyframes に width 幅を px で指定してください。 参考にさせていただいたのは、css だけで作るスライダー – PeonyQueenで作成されているスライダー。 上記のスライダーがとてもよく出来ていて CSS のアニメーションで時間差をつけてスライドを切り替え、フェードインを繰り返すようになっています。CSS なので読み込みや動作も早く扱いやすいです。 こちらを参考に、html の img 記述をなくし、フェ
sassでベースカラーを元に色の変更を行う関数を忘れがちなのでメモ HSL[色相(Hue)、彩度(Saturation)、輝度(Lightness)]ベース Photoshop等で使用されるHSB(HSV)[色相(Hue)、彩度(Saturation)、明度(Brightness・Value)]ではない HSBで色を変換したいときは「Sassで色空間『HSB』を扱う関数を作った話」で関数を作成されています 色相の変更 adjust-hue($color, $degrees) 色相環の度数($degrees)を○○degで指定 // ベースとなる色 $base-color: #79a5e0; .adjust-hue { color: adjust-hue($base-color, 60deg); }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く