ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ 基本的な記述方法は動画でも紹介しています。初めて CSS グリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出すグリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるまではレイアウトを頭の中だけではなく、紙など
CSS 設計の長い夢 - ペパボのフロントエンドスタンダード
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ
CSS Values and Units Module Level 3
CSS Values and Units Module Level 3 W3C Candidate Recommendation Draft, 22 March 2024 More details about this document This version: https://www.w3.org/TR/2024/CRD-css-values-3-20240322/ Latest published version: https://www.w3.org/TR/css-values-3/ Editor's Draft: https://drafts.csswg.org/css-values-3/ History: https://www.w3.org/standards/history/css-values-3/ Implementation Report: https://draft
CSSを使ってアルファベットを“描く” Webの進化も見える「CSS SANS」 - はてなニュース
AからZまでのフォントを、「CSS」だけを使って制作したプロジェクト「CSS SANS」を見つけました。その意外性から、はてなブックマークでも話題を集めています。企画・制作は巣籠悠輔さんと各務将成さんです。 ▽ CSS SANS 本来CSSは、Webページのレイアウトや文字間の調整に使われるもので、文字のデザインはできませんでした。そこで、CSSで使えるさまざまな要素を組み合わせることで、文字のデザインを試みたそうです。 ブラウザのバージョンによってCSSのバージョンが違うので、表示されるWebページの見た目が異なります。古いバージョンのCSSでフォントを描こうとしても、繊細な表現ができずに文字がつぶれます。新しいバージョンになるにつれて複雑な表現ができるようになり、文字をきれいに表示できます。その新旧の差をフォントとして見せることで、Webの歴史を視覚化しているそうです。 さまざまなブラ
CSShake
Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Install Get started... $ git clone https://github.com/elrumordelaluz/csshake.git or $ bower install csshake or $ npm
Google Web Designer - Home
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
[CSS]スタイルシートのすご技、ページをめくるリアルなアニメーション
FlashもJavaScriptも使用せずに、スタイルシートでページをめくるアニメーションを実装した「Pure CSS3 Page Flip Effect」を紹介します。 Pure CSS3 Page Flip Effect デモページ 対応ブラウザはChrome, Safariと限定されたものですが、CSS3グラデーションやクリッピングを使用してリアルなアニメーションが実現されています。 Román Cortésでは他にもスタイルシートのすご技が掲載されているので、まだの方はぜひご覧ください。 CSSで実装した、ものすごいパララックス（視差）効果 スタイルシートのすご技、スムーズに回転するコーラの空き缶
Román Cortés » CSS 3D Meninas
Último proyecto completado: Chimeneas Rofer & Rodi Proyecto actual en curso: Arteforo (versión en castellano abajo) I’ve took the classic paint The Maids of Honour (Las Meninas) and made this CSS pseudo-3D/parallax effect. It is pure CSS, so no javascript or flash involved: only CSS and HTML code. It has been tested and it is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 a
【2013年注目必至！なCSS仕様】CSSフィルタ、これはすごい！（デモ付き） | OpenWeb
以前から気になっていたCSSフィルタについて、ちょっと調べてみました。 結果、あまりにお手軽に、効果絶大なエフェクトをかけられることが判明して、ちょっと興奮しています。これはすごい！ CSSフィルタは、SVGで従来から規定されていたFilter Effectsを、CSSの世界に持ち込んだものです。 CSSとSVGのワーキンググループが共同して立ち上げたCSS-SVG Effects Task Force (FX TF)により、「Filter Effects 1.0」という仕様として策定が進められています。 この仕様によって新しく導入されるCSSプロパティはいくつかありますが、主なものはfilterプロパティです。 filterが素晴らしいのは、ぼかしやドロップシャドウといったエフェクトを、CSSのみで簡単に指定することができるからです。 例えば、要素にぼかしをかけたい場合は、以下のようなプ
PNG画像でもコマ送りのアニメーションさせてしまう、ナイスアイデアのスタイルシート -Sprite sheet
デモページ 仕組みは、横に各コマを並べたPNG画像をCSSスプライトで順に表示させて、コマ送りのアニメーションのようにしています。 「show sprite」をチェックするとその仕組みがよくわかります。 「animation-duration」の数字を変更すると、アニメーションの速度が変わります。 デモページ：スプライトを表示 スタイルシートはコマ送りのステップを定義し、背景にしたPNG画像を少しずつずらして表示します。 デモは1秒間に10ステップ、500pxの画像を50pxずつ動かしています。 CSS div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
Pure CSS Accordion
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Android 2.x系でのCss3アニメーション - console.lealog();
なんか動いたり動かなかったり動かなかったり・・・。 動いたかと思えば一見まったく関係なさそうなとこがご乱心なさったり・・。 コレがWeb業界に生きるということか！ というわけで、keyframeアニメーションの指定の際に、気をつけたい点と、アンチパターンのメモ。 動いた @-webkit-keyframes 'hop' { 0% { -webkit-transform: translate3d(0,0,0);opacity: 0; } 5% { -webkit-transform: translate3d(0,0,0);opacity: 1; } 90% { -webkit-transform: translate3d(30px,- 150px,0);opacity: 0; } 99.9%,to { -webkit-transform: translate3d(0,0,0);opacity
素敵なposition: sticky
誰かがこのタイトルで書くだろうと思っていたけど誰も書かないのでセルフ実行。 Webkitにposition: stickyが実装されましたね。 というわけで試してみましょう。 現在、Chrome 23.0.1247.0以降（今はCanaryのみ）とWebkit Nightlyで見ることができます。 Sticky Positioning サンプルをダウンロード HTMLとCSS は次のようになっています。 <div class="container"> <div class="column-left"> <section> <h2>Lorem Ipsum</h2> <p> Lorem ipsum dolor sit amet... </p> </section> <section> <h2>Cupcake Ipsum</h2> <p> Cupcake ipsum dolor sit amet
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirect
CSSだけでアスペクト比を固定するテク - Qiita
CSS Arrow Please - By Simon Hoejberg - @shojberg
Media Queries: Target retina macbook pro only
gcss.info
NameBright - Coming Soon