Crafting link underlines on Medium などで紹介されている、リンクの下線をグラデーションの背景とテキスト・シャドウで表現する手法をこのサイトでも試してみました。やろうとしているのは、下線の色、位置、サイズのコントロールと、ディセンダーと直接まじわらずグリフをまたぎ越すような表現。 a { background: linear-gradient(#e00000 50%, transparent 50%) 0 1.25em repeat-x; background-size: 1px 2px; text-shadow: 0 1px white, 0 -1px white, 1px 0 white, 1px 1px white, 1px -1px white, -1px 0 white, -1px 1px white, -1px -1px white; } @me
This is cross-posted from the CSSWG Blog. At the CSSWG F2F last week, I raised the issue that the radial gradients we were discussing were unreadable to me, and probably therefore to much of the intended audience. It was not at all obvious by looking at the gradient syntax what the various numbers and lengths might be. radial-gradient(60% 43%, 25px 25px, #b03 99%, transparent) So Tab Atkins, David
Desktop, Privacy Opera is the first browser to natively protect you from clipboard attacks – Introducing Paste... July 2nd, 2026 We’re introducing "Paste Protect:" a feature that protects you from code injection attacks such as ClickFix. Gaming, Opera GX Step into Summer with a Massive Update from GX June 25th, 2026 It’s been a minute! And while you’ve been out there being awesome, we’ve been wor
Stable Opera 133 Stable June 29th, 2026 Dear Opera Users! Opera has released a new initial update, it is based on Chromium version: 149.0.7827.197. Known issues: You... Stable Opera 132 Stable May 28th, 2026 Dear Opera Users! Opera has released a new initial update, it is based on Chromium version: 148.0.7778.97 Here’s what changed... Stable Opera 128 Stable February 26th, 2026 Hello! We’re happy
CSS WG BlogのNew CSS3 Publications: Backgrounds and Borders CR, Text WD, Image Values and Replaced Content WDという記事でも紹介されていますが、CSS3の仕様が3つ更新されました。今回はそのうちの2つ、Backgrounds & BordersとImage Values & Replaced Contentについて紹介します。 2月15日付で、CSS Backgrounds and Borders Module Level 3が再び勧告候補になりました。 CSS Backgrounds and Borders Module Level 3 昨年より翻訳を進めていましたが、ひと通り終わりましたので公開します。 CSS 背景 & ボーダー モジュール Level 3 勧告候補から先に進むた
Introduction WebKit paved the way for gradients in CSS by adding support for -webkit-gradient back in early 2008, and they’ve become widely used since their introduction. Over the past several months, the CSS Working Group has had extended discussions about making the gradient syntax easier to use, and recently Tab Atkins included a proposal in the latest draft of the Image Values and Replaced Con
Button Search Stars Home Play Share Love Quit Upload RSS There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store. Markup I get a real kick out of trying to keep the markup minimal, so I'm really
sakurachiro.com 2024 著作権. 不許複製 プライバシーポリシー
There are 16,777,216 color hex codes. With so many options, how do you choose the right color? The latest research on color perception tells us that somewhere between 40% to 99% of these colors are indistinguishable to the human eye.* Which begs the question: if we can't see the difference between two colors, why should we waste time deciding between them? What if you could easily narrow down the
�t窪 Learn Learn web development Frontend developer course Getting started modules Core modules MDN Curriculum Check out the video course from Scrimba, our partner Learn HTML Structuring content with HTML module Learn CSS CSS styling basics module CSS layout module Learn JavaScript Dynamic scripting with JavaScript module
Guides and Sample Code Get details on implementing web technologies with guides, reference, and sample code. What’s New in Safari Safari App Extensions Apple Pay on the Web More Safari Documentation Discussion Forums Ask questions and discuss a variety of web development topics with Apple engineers and other developers. Apple Developer Forums Videos Watch and learn from our engineers as they show
Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as
グラデーション範囲をIE用に微調整 前回のエントリで画像ファイルなしでグラデーションを可能にするCSS生成ツールを紹介しましたが、グラデーションを適用する要素の条件によりIEとその他のブラウザで、グラデーションのかかり方に差異が生じます。具体的には以下のような感じです。 原因はCSSの定義をみると分かりますが、IE用に適用されるfilter属性ではグラデーションを適用する大きさ（範囲）が指定できません。そのためグラデーションを適用する要素全体に対しグラデーションがかかるので、ページの背景などのように縦方向に大きくサイズが伸びる要素に適用すると、グラデーション範囲も伸びてしまいます。 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#5588ff,EndColorStr=#fffff
A couple of days ago, Mozilla released their newest version of their ever popular browser: Firefox. It was in beta before, but now version 3.6 can be officially downloaded. This version of the browser brings us a couple of improvements on several aspects, like using Personas (themes), improved (JavaScript) performance and an extended version of the CSS engine compared to the 3.5 release. Today, we
See related blog post on hacks.mozilla.org. This demo is interactive. Just check/uncheck the boxes with the style settings to see them in action. Gradients In this div, we use CSS Gradient as background. There are two kinds of gradients: Linear Gradients and Radial Gradients. A linear gradient: background-image: -moz-linear-gradient(bottom, black, rgba(0, 47, 94, 0.2), white); A radial gradient: b
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
