レスポンシブ対応にメディアクエリなしで、CSSの関数で定義！border-radiusの値を変えるテクニック

2021/10/14 36 users ビューポート 矩形 マージン CSS 関数

border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸にな... 続きを読む

Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました | コリス

2021/07/15 25 users コリス clip-path Flexbox CSS シャドウ

CSS GridやFlexboxでレイアウトを確認しながらコードを生成、box-shadowによる繊細なシャドウを見ながらコードを生成、さまざまな区切り線、border-radiusやclip-pathによるさまざまな形...記事の続きを読む 続きを読む

blockquoteのcite属性を使って引用元をユーザーに明示する | かちびと.net

2019/08/23 12 users blockquote RGBa italic padding

Result blockquoteのcite属性に書いた引用元を表示する、というもの サービスの使用感とか製品の口コミとかビジネス案件でも使用頻度は割と高そうな印象です css blockquote { padding: 20px 20px 20px 40px; overflow: auto; background-color: rgba(180, 180, 180, 0.5); border-radius: 2px; font-style: italic; } b... 続きを読む

CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法 | コリス

2018/10/23 404 users コリス CSS 機能 方法

border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。 矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイルシートのテクニックを紹介します。 CSS border-radius can do that? 下記は各ポイントを意訳し... 続きを読む

今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！ | Webクリエイターボックス

2017/06/08 248 users プロパティー CSSプロパティー CSS 四隅 コーディング

要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ 無難で王道！正円の円弧を使った角丸 border-radius は... 続きを読む

CSSだけで作るamazon風な縦型メガメニュー｜Webpark

2013/09/02 78 users Webpark box-shadow CSS 矢印 擬似要素

先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。 CSSだけですのでメニューの現れ方など若干違います。box-shadowとborder-radiusはIE8以下で、矢印を作るための擬似要素はIE7以下で非対応ですが、メニューとしての機能は果たせます。 では... 続きを読む

[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック | コリス

2013/04/18 289 users コリス 絵筆 div ラッパー CSS

角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 HTMLはdiv要素が一つだけで、ボーダーも単にborderとborder-radiusを使用しているだけです。 デモページ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 [html] This is my para... 続きを読む

4辺が違う色のボーダーにborder-radius:50%を加えると…｜Webpark

2013/03/28 88 users Webpark Tra ボーダー サークル状 タイトル

タイトルのままですが、4辺が違う色のボーダーにborder-radius:50%を加えてサークル状にするとどうなるか知っていますか？私は先日知ったので紹介します。 border-radius:50%を加えてサークル状にするとこんな感じになります。border-radiusはIE8以下非対応ですので、下のは画像にしています。 かなり印象は変わります。当たり前といえば当たり前な気もしますが。で、tra... 続きを読む

Chromeで画像の角丸枠線がボケるのを回避する。（CSS おれおれ Advent Calendar 2012 – 20日目） | Ginpen.com

2012/12/20 12 users Ginpen.com border CSS オレオレ ボケ

CSS おれおれ Advent Calendar 2012 – 20日目 いわゆるBK (Bad Knowhow) というやつですな。（BKって和製英語の類？） 現象 画像にborderを付けてborder-radiusも付けると、なんかChromeでうまく表示されないんです。 Chrome 23で見た角丸枠線。欠けている。 Firefoxなんかだと正常でした。 回避策 回避策なのですが、bord... 続きを読む

使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」:phpspot開発日誌

2012/12/20 14 users phpspot開発日誌 CSS3ジェネレーター 実際

使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 2012年12月20日- Useless CSS3 Generator 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 Uselessということで使えない、ということらしいんですが、実際はなかなか使えそうなジェネレーター。 border-radius, box-shadow,... 続きを読む

CSS3の角丸表示を使おう。レガシーなWebブラウザにはこれで対応「Curved corner」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2011/10/12 31 users MOONGIFT ITエンジニア ソフトウェア CSS3 多数

Curved cornerはCSS3で実装されているborder-radiusをIE7などのレガシーなWebブラウザでも対応させるためのソフトウェアです。多数のWebブラウザにも対応すればborder-radiusが積極的に使えるようになりそうです。 0 続きを読む

[CSS]画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する方法と注意点 | コリス

2011/09/29 351 users コリス ドロップシャドウ Firef box-shadow

最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firef... 続きを読む

古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」:phpspot開発日誌

2011/08/02 52 users Demo div 連番 phpspot開発日誌 古いブラウザ

Demo | jQuery DivCorners | Product of roydukkey 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」 border-radiusで角丸は実装できるようになりましたが、古い非対応ブラウザだとうまく表示されないということで、やっぱりdivでやろうという方は必見のプラグイン。 連番の画像を用意しておくだけであとは簡単に初期化できます... 続きを読む

jQueryとCSS3でGoogle＋風のアニメーション実装チュートリアル:phpspot開発日誌

2011/07/14 32 users phpspot開発日誌 jQueryとCSS 一昔 CSS

Google Plus Style Animations with Jquery and CSS3 jQueryとCSS3でGoogle＋風のアニメーション実装チュートリアルが公開されています。 ブロック要素をborder-radiusによって丸くして回転させるというテクニックが使われており色々と応用できそうです。 webkitベースなのでChromeで閲覧するのがよさそうです。 一昔にこれをやろ... 続きを読む

[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法 | コリス

2011/02/02 322 users コリス text-shadow box-shadow CSS

ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。ホバー時のキャプチャ実装のポイントスケラｰビリティ文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小アジャスタビリティpadding, font-sizeを変更することでサイズ調整可能フレキシビリティあらゆるHTML要... 続きを読む

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス

2010/07/14 1404 users コリス padding Eee background 一行

上記デモのスタイルシート ※クリックで拡大 「CSS3 PIE」の使い方は簡単で、既存のCSS3に一行を追加するだけです。 適用前のCSS #myElement { background: #EEE; padding: 2em; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } 「CSS3 PIE」... 続きを読む

[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリス

2010/04/12 421 users コリス Oper スクリプト IE6 CSS3

IE6/7/8のブラウザでも角丸やボックスシャドウなどCSS3のプロパティのいくつかが使えるようになるbehaviorスクリプトを紹介します。 .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Oper... 続きを読む

CSS3でIEにも角丸を適用させるhtcファイル | CREAMU

2010/02/05 181 users CREAMU クロスブラウザ CSS 角丸 CSS3

CSS3で最も簡単にクロスブラウザの角丸を実装したい。 そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。 Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。 「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。 CSS3 -moz-b... 続きを読む