:root { --hdr-gradient: linear-gradient( to right in oklab, oklch(70% 0.5 340) 0%, oklch(90% 0.5 200) 100% ); --sdr-gradient: linear-gradient(to right, #ff00fa 0%, #0ff 100%); background: var(--hdr-gradient); } Copy
更新履歴 追加 2024/10/23 「ShadeStudio」を掲載しました 2024/07/22 「CSS Grid Generator」を掲載しました 2024/07/02 「Proportio.app」を掲載しました 「CSS Filter Generator」を掲載しました 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 202
新しいプロジェクトですぐに利用できるようシンプルなHTMLとCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。 ヘッダはロゴ、ナビゲーション、検索フォームのシンプルな構成ながら、バリエーションは豊富で、実装コードだけでなく、デザインのアイデアとしても便利です。 headers.css headers.css -GitHub テンプレートは、以下に基づいて実装されています。 シンプルな実装 レスポンシブに完全対応 簡単に編集できるようにSassを使用 アクセシブル オープンソースのプロジェクトで、商用でも無料で利用できます。 2020年9月現在、17種類のヘッダがあり、今後さらに増やす予定とのことです。
<style type="text/css"> /* --- ドット（水玉）背景のBOX定義 ---------------------------- */ .box { margin : auto; max-width : 500px; height : 200px; /* ドット（水玉）模様のCSS */ background-color : #ffffff; background-image : radial-gradient(#ff7f7f 30%, transparent 33%), radial-gradient(#ff7f7f 30%, transparent 33%); background-position: 0 0, 30px 30px; background-size : 60px 60px; } </style>
CSS section divider descriptionWith this CSS Section Separator Generator, you can choose between 6 different dividers. Each of them can be customized by using the controls in the preview field. The tool includes a skewed divider, a semi-circle divider, a wave divider, a spikes divider, a triangle divider and a curved divider. Most of these dividers are pure CSS and using the ::before and ::after p
Done designing? Click the buttons to get your custom code.
CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。 超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度 CSSの作業をもっと楽に！無料で使えるオンライン便利ツール40選 Flexbox Parent Attribute Visualizer CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。 Keyframes.app CSSアニ
この季節になると必ず1度は利用するデザイン素材、雪の結晶。素材を探したり、自分で創ったりとありふれた素材なので、それほど難しいものではありませんが、思い通りのものを見つけようとすると時間がかかります。今日紹介するのはWEB上で雪の結晶を生成できるスノーフレークジェネレータ「Snowflaker」です。 このスノーフレークジェネレータ「Snowflaker」では、雪の結晶の線幅や結晶の複雑さを任意で設定し、svgフォーマットで生成・ダウンロードができるというものです。 詳しくは以下 一つの結晶を作り込むこともできますし、Gridモードを選択すれば、一気に様々なタイプの雪の結晶を生成・ダウンロードが可能です。雪の結晶は一つでは無く、様々な形を組み合わせて利用するためこの機能は便利ですね。 雪の結晶を利用しそうだと言う方は是非チェックしてみてください。 Snowflaker – Generate
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
「Generator for Startup Framework」はドラッグ＆ドロップでスタートアップ用のWebサイトが作れるサイトです。1枚ページのウェブサイトを作るときに非常に便利です。ヘッダーやコンテンツなど、要素ごとにデザインが分離されており、そこから好きな要素をドラッグ＆ドロップで配置して完成です。以下に使ってみた様子を載せておきます。まずGenerator for Startup Frameworkへアクセスしましょう。まずProject Name部分を修正してタイトルをつけましょう。 左側にメニューがあり、そこから利用したい要素をドラッグ＆ドロップで配置させます。コンテンツは豊富にあるのできっと求めているものがありますよ。HTML/CSSを出力させることができます（有料）。簡単にペライチのページが作れるサイトはこれからもどんどん増えてきそうです。ぜひご活用ください。 Gene
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
