HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
CSSの進化により、様々な表現がCSSだけで完結できるようになったこの頃ですが、その中でもCSSを使ったアニメーションが色々と目を引くものがあり、今回はそれについて様々な場面で使えるCSSアニメーションをまとめてみました。ソースコードもあるので、カスタマイズすればすぐに使えますので、ぜひともチェックしてみてください。 関連：コピペで絶対使いたくなるCSSボタン 25選 目次 クネクネ動く CSS loading カラフルな CSS preloader! まるで折り紙のような Cube Fold ユーザーを引きつける Animated SVG Spinner バルスじゃないよ、パルスな Smooth Pulse スマホで見かけるあのメニュー Gooey Menu 一味違う確認モーダル Flipside 円形のプログレス SVG circular progress 流れる星 Parallax
WebPro KUSANAGI Security Editionが進化！ 新機能「SafeUpgrade」でダウンタイムゼロのnginxアップデートを実現 KUSANAGI Security Editionが新機能「KUSANAGI SafeUpgrade」を導入し、nginxのメジャーバージョンアップを無停⽌で実施可能にする。 0 0 WebPro 高速CMS基盤「KUSANAGI Security Edition」がMicrosoft Azureに登場｜自動アップデートで安全性を確保 プライム・ストラテジーが、新しいセキュリティ基盤「KUSANAGI Security Edition」をMicrosoft Azureで提供開始。セキュリティ向上と運用効率... 0 0 WebPro KUSANAGI 9、新たにOracle CloudにAlmaLinux OS 9を採用し、2032年ま
今回はWebページ用のおしゃれなボックスデザイン例を30個紹介します。どれもレスポンシブ対応で、HTMLとCSSのコピペで使うことができます。 CSSがうまく反映されないときはこちらの記事を参考にしてみてください。 使い方 HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。 スキップ 手順1：CSSをコピペ のちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。これをブログやWebサイトのCSSファイルに貼り付けます。貼付け先はブログサービス別に以下のようになります。 link rel〜を貼る場所 WordPress[ダッシュボード][外観][テーマエディター]右側のバーの[style.css]※もちろんFTPソフトを使ってもOK はてなブログ[デザイン][][デザインCSS]スマホ用はの[フッタ]に<style></style>と入力、この中
HTMLやCSS、JSのコードとその実行結果を共有できるサービスのCodePenは、いわばフロントエンドエンジニアの遊び場です。中にはどういったコードで動いているか見当もつかないようなものもあります。 今回はCodePenで公開されているアニメーションの中でも、思わず見入ってしまうような美しいアニメーションを10点ピックアップしてご紹介します。画像の下のCodePen埋め込み部分で「Run Pen」で実際に動かして見て下さい。 [under construction] See the Pen [under construction] by Lucas Bebber (@lbebber) on CodePen. Cloudy Spiral CSS animation See the Pen Cloudy Spiral CSS animation by Hakim El Hattab (@ha
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
