このテーマの特徴
- 柔らかなパステルカラー: メインの背景色は淡いクリーム色 (#f5f5f5) で、ヘッダーとフッターはパステルのグラデーション (#e0c3fc と #8ec5fc) を使用しています。
- 流麗なフォント: フォントサイズは 24pt で、行間は 1.5 とゆったりしています。
- 水平方向のセクション: セクションは水平方向に並べられ、それぞれが 48pt の余白を持っています。
- 夢のようなヘッダーとフッター: ヘッダーとフッターにはグラデーションが使用されており、夢のような境界を作成しています。
- タイトルセクションの強調: タイトルセクションでは、背景にグラデーションを使用して強調しています。また、円形の枠線とハローアニメーションで、タイトルがより際立ちます。
- アニメーションのハローエフェクト: タイトルセクションの枠線には、ハローエフェクトがアニメーション化されており、幻想的な雰囲気を醸し出しています。
このテーマを利用する
CSS
/* @theme ethereal_dream */ @import default; section { padding: 48pt; background: #f5f5f5; color: #3f51b5; font-size: 24pt; line-height: 1.5; } header { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to right, #e0c3fc, #8ec5fc); color: #ffffff; padding: 10px 20px; } footer { display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, #e0c3fc, #8ec5fc); color: #ffffff; padding: 10px; position: fixed; bottom: 0; left: 0; width: 100%; } section.title { background: linear-gradient(45deg, #e0c3fc, #8ec5fc); color: #ffffff; padding: 48pt; text-align: center; font-size: 36pt; display: flex; flex-direction: column; justify-content: center; gap: 20px; } section.title::before { content: ""; display: block; width: 100px; height: 100px; border: 6px solid #ffffff; border-radius: 50%; margin: 0 auto 20px; animation: halo 2s infinite alternate; } @keyframes halo { 0% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
Marpのサンプル
--- marp: true theme: custom_theme header: " " footer: " " --- <!-- _class: title --> # 夢幻の夢 --- <!-- _class: section --> # エーテルの夢 - 抽象的な形で想像力をかき立てます - 夢のような非現実的な感覚を引き起こします --- ## 色 - パステル、ニュートラル、落ち着いたトーン - 粒子やグラデーションによる微妙な色調変化 --- ## 形 - 流動的な有機的な形 - 非対称的なレイアウトと非対称性 - 幾何学的な要素の先鋭化と抽象化 --- ## テクスチャ - マーブリングや水彩画などの流れるテクスチャ - 微妙な粒子やグラデーションによる陰影 - 艶のある表面やマットな表面の対比 --- ## タイポグラフィー - エレガントでミニマリストなフォント - 曲線や傾斜による動的なレイアウト - ネガティブスペースを活用したメリハリのあるテキスト --- ## イメージ - 抽象的な写真、グラフィック、イラスト - ぼやけた背景や二重露光を使用した夢のような効果 - 自然のエレメントからインスパイアされた有機的なテクスチャ --- # まとめ エーテルの夢のテーマは、抽象的な形、落ち着いた色調、夢のような効果を組み合わせ、想像力とインスピレーションを刺激する、ユニークで魅惑的な体験を作り出します。
