Pure CSSで実装するコーナーリボン - NxWorld
要素や画像の角などに配置するコーナーリボンを、画像は使用せずにCSSのみで実装してみたものです。 HTMLとCSSで実装する場合は幅や位置の指定が若干面倒に感じることはありますが、その分カラー変更等も容易で角度なども自由に変更できます。 イメージにあるように、作成するのは「左上」「右上」「左下」「右下」の4パターンのコーナーリボンとなります。 「左下」「右下」に表示しているものは意図的にテキストを逆さに表示させていますが、通常の見栄えで良いのであれば後述するコードのtransform: rotate();の値を変更してください。 ここでは実装のコードのみ紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 HTMLと共通CSS 紹介しているものは下記のようなHTMLを使用しており、共通のclassとして.ribbonを記述しています。 また、それに加えて例えば「左上」の場
CSSだけで三角形を作ろう！その2：吹き出しやリボンをデザインする | 株式会社グランフェアズ
Posted by NAGAYA on Sep 21st, 2017 こんにちは、めぐたんです。 前回は「CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター」と題して、なぜborderプロパティだけで三角形が作れるのか？どのような設定でどんな三角形ができるのか？を詳しく掘り下げてみました。 では、こうして作った三角形はWeb制作においてどんなときに活躍するのでしょうか？ よく見る利用例を挙げていきたいと思います。 はじめに：三角形を配置するポイント ご紹介するサンプルのラインナップは大きく分けて下記の3つです。 吹き出し ステップ表示 リボン風の装飾 上図のように、要素にくっつけて別の形を表現するという使い方が主だと思います。 この場合三角形自体にはコンテンツとして意味合いを持たないので、:beforeや:afterといった擬似要素として配置します。 また、位置調
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ
CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。 How to Use CSS Animations Like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. キーフレーム 2. アニメーションのタイミング 3. アニメーションのディレイ 4. アニメーションの再生状態 5. アニメーションの反復回数 6. アニメーションの方向 7. アニメーションの塗りつぶしモード 8. 「will-change」機能 9. CSSの4つの重要な値 1
[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し
Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。
![[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7ef0650ca2366040c7e9131e9a9453ac3ae7dcc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016120601.png)
::before,::after擬似要素を使って、よくあるパターンをつくってみよう。
2015年12月07日 ::before,::after擬似要素を使って、 よくあるパターンをつくってみよう。 コーダーのあーだこーだ こんにちは。 コーディングファクトリー部 コーダーの丸山です。 このコーナーでは、コーディングファクトリーの仕事のスタイルや、深堀りしたコーディング技術をメインにお伝えしていきたいと思っています。また、コーダーが各々のコーディング論を語る座談会なども企画してますのでお楽しみに！ 今回は私がこの要素を知ってから（コーディングの）世界観が変わった！というCSSの要素の一つである『::before,::after擬似要素』の特徴とコーディング例をご紹介します。 ::before,::after擬似要素とは 擬似要素（pseudo elements）は、W3Cによると"文書言語(HTML)に記された以上の抽象概念や情報を与えるもの"とされています。::before
カードローン審査甘いところはあるか？ – モアイ金融
貸金業法16条の解釈（どういう表現がアウトなのかは解釈による） 貸金業者は「貸金業法」「出資の受入れ、預り金及び金利等の取締りに関する法律（出資法）」「民法」などによって厳しく規制されています。 「カードローン審査甘い」というフレーズは貸金業法16条、16条の2で禁止されている表現に当たる可能性が高いため、大手カードローン会社は表現を控えています。 しかし、具体的に「カードローン審査甘いという表現を使ってはならない」とは条文には書かれていないため、どういう表現がアウトなのかは解釈によります。 「誰にでも貸します」「多重債務者でも積極融資」など、明らかにアウトな表現は論外ですが「カードローン審査甘い」という文言も、大手カードローン会社では軒並みアウトと解釈されています。 貸金業法 （誇大広告の禁止等） 第16条 貸金業者は、その貸金業の業務に関して広告又は勧誘をするときは、貸付けの利率その他
[CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ
Webはその進化が早いと言われ、中でもCSSは日々、新しいテクニックや驚くべき実装方法が発表されています。新しいものに目を向けることはもちろん大切です。しかし、すでに利用可能なもので見落としている有用なテクニックがあるかもしれません。 有用なのに、意外と見落とされがちなCSSのテクニックを紹介します。 9 Underutilized Features in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レスポンシブ対応に便利な「calc()」 2. 目からウロコの「@media」の使い方 3. カラー指定を変数でおこなえる「currentColor」 4. フォームにかなり便利「:valid, :invalid, :empty」 5. ナンバリングするためにol要素は必要ない「counter」 6. 中身が不明な
![[CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/11d487ffaa0d8f97196e7f7cedd83ea94e889a64/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016102601.png)
box-shadowのジェネレーターとプロパティについて | bad-company
要素に影を落とすためのbox-shadowを確認するためのジェネレーターです。 各種プロパティなどページ下部に詳しい説明を書いてあります。 filter関数のdrop-shadowやReact Nativeのshadowのジェネレーターは別ページになります。 /* preview */ width: 200px; height: 60px; background-color: #3cb371; /* border-radius */ border-radius: 30px; /* box-shadow */ box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
digitalskill.jp
Buy this domain. digitalskill.jp 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
inline-blockの均等配置 - Toro_Unit
inline-blockを均等配置するためのCSS。 現状firefox3.6,ie8で対応確認しました。たぶんその他モダンブラウザでも効く思われます。 ie7はimgかa要素以外inline-blockが効かないので、非対応。aとimgには効きそうだけれど、未確認です。。。 [css] ul { text-align: justify; text-justify: distribute-all-lines; } ul:after { content:""; display: inline-block; width: 100%; line-height:0; height: 0; } li { display: inline-block; } [/css] text-align:justifyは最終行の要素には適用されないため、ul:afterで一行分、inline-blockを追加してあ
voxel.css
var scene = new voxelcss.Scene(); scene.rotate(-Math.PI / 8, Math.PI / 4, 0); scene.attach(document.body); var world = new voxelcss.World(scene); var editor = new voxelcss.Editor(world); editor.enableAutoSave(); if (editor.isSaved()) { editor.load(); } else { editor.add(new voxelcss.Voxel(0, 0, 0, 100, { mesh: voxelcss.Meshes.grass })); } View in JSFiddle var voxel = new voxelcss.Voxel(0, 0, 0, 10
CSSのtext-shadowだけで、文字の枠線をゴリ押し気味に付けてしまう方法 | 9ineBB
背景に画像を使っていたりすると文字がはっきり見えなかったりしますよね そんな時には文字に枠線を付けてやれば視野性が良くなります そこで、文字の縁取り専用のCSSプロパティもあるのですが、text-shadowで文字に枠線を付ける方法を思いついた時にはまだ知らなかったです、text-shadowでも背景色と組み合わせると文字の縁取りっぽく出来ます 専用のCSSプロパティ-webkit-text-stroke を使えば縁取りができちゃいます でも、webkit系しかまだ使えないようです なので-webkit-text-strokeよりも範囲の広いtaxt-shadowを使うのも有効です CSSのtext-shadowだけで文字に枠線を付ける 原理は、テキストシャドウで8方向にぼかし無しの影を表現することで枠線にしています CSS コード div {margin: 100px auto;widt
IE9 + border-radius(CSS3) の落とし穴？
K-7 Ltd.S + smc PENTAX FA 31mm F1.8 Limited たまにはお仕事の話でも。 しばらく問題に突っかかってて、それが解決できてスッキリした記念とういことで。ｗ 只今、HTML5+CSS3を使って新しいサイトを構築作業中。 「プログレッシブ・エンハンスメント」という思想というか方針の下、鋭意製作中。 プログレッシブ・エンハンスメントとは簡単に言うとこんな感じ。 「古いブラウザ（IE6とかIE7とか）に足を引っ張られるのは、もうゴメンだ！ これからはHTML5とCSS3の時代だし、それに対応したブラウザで表示できればいいよね？ でも、内容だけは古いブラウザでも見られるように最低限の配慮はしておこう。」 ちょっと違うかもしれないけど、今回の作業に当たってはこんな感じで進めている。 （参考）クロスブラウザはもう古い！HTML5＋CSS3時代のプログレッシブ・エンハ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
http://webnonotes.com/css/header_footer/
CSS3のtext-strokeとtext-shadowで文字の縁取り（アウトライン）を表現した時の違い – hazumu.net/blog
CSSで背景画像を100％で表示する方法をまとめました
