Opera News
Gaming, Opera GX Opera GX now lets you control every detail of your browser, with more customization options... November 20th, 2024 With the latest update, Opera GX now expands its modding features, giving you even more ways to completely transform your... Desktop Get Spotify Premium with Opera One R2’s new Music Player November 19th, 2024 Spotify becomes the default music player in Opera One R2.
Dropdown Menus With More Forgiving Mouse Movement Paths | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. This is a fairly old UX concept that I haven’t heard talked about in a while, but is still relevant in the case of multi-level dropdown menus. A fine-grained pointer like a mouse sometimes has to travel through pretty narrow corridors to accurately get where it needs to
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
CSSできれいな斜め線
CSSで斜めに線を引くようなことをするには多少なりとも工夫が必要だった。つまりCSSで作る吹き出し(もう5年前の記事だ)のようにborderプロパティーを使って頑張るしかなかったわけだ。今はlinear-gradient()があるので直観的に作ることができるようになった。しかしきれいに引くとなるとまだ工夫が必要そうだ。 Demo: CSS Diagonal Line borderプロパティーを使ったもの、linear-gradient()を背景で使ったもの、Data URI化したSVGを背景に使ったもの、以上の計3つのデモを作った。 .lg { background-image: linear-gradient( to right bottom, transparent 50%, #f0f 50% ); background-repeat: no-repeat; background-si
汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点 - Qiita
#あらまし 別の業者が構築したという客先のホームページのcssが非常に読みづらく、 誰も手が付けられてない状態でヤバい（compactの状態で約350行）。 そこでリファクタリングをしようと思った際に、考えた。 「どうせならsass/scss対応にした方が可読性も可用性も上がる！ヤバい！」 sass/scss → css は当たり前として、 css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。 そのうちの１つ、今回ご紹介する「css2scss」が非常にエレガントだった。 実際に使用して感激して落胆したポイントを、それぞれ３つに絞ってご紹介。 css2scss sass/scssについては、まずはアレなcssを突っ込んでみて挙動を確認して頂ければ幸い。 また、下記のリファレンスが総括的で解りやすい。ご一読あれ。 Sass 3.2 オレオレリファレンス ヤバいを
CSSで作ったドロップダウンメニューのドロップの動きいろいろ
CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu
Subtle Click Feedback Effects | Codrops
A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements. Recently, many cool interaction effects have been created that follow Google Material Design principles somehow. One of the great little effects seen around is the ripple click effect, also called click wav
Visibilityプロパティのアニメーション時の振る舞い - Qiita
visibilityプロパティはdisplayプロパティと違い、指定する値が数値などではないにもかかわらずアニメーション可能なプロパティとして扱われます。 実際にはプロパティの「アニメーション」というよりは、プロパティの「切り替え」といった挙動ですが以下のルールに基づいて、アニメーションを行っています。 プロパティの置き換えルール CSS Transitions visibility: if one of the values is ‘visible’, interpolated as a discrete step where values of the timing function between 0 and 1 map to ‘visible’ and other values of the timing function (which occur only at the star
CSS3 transitions using visibility and delay
Apr 21, 2011One of the most common CSS3 transition animations used by developers in the coming years will undoubtedly be making elements appear and disappear via the opacity property. What previously was only possible using JavaScript can now be easily described in significantly less bulky CSS code: div { opacity:0; transition:opacity 1s linear;* } div:hover { opacity:1; } * Note: Because the spec
CSS Reference | Codrops
Turn your one-off creations into a steady income stream by featuring your templates on the Wix Studio Marketplace. Cash in on your creativity—over and over again. Got plugin skills? Enter Penpot’s Plugin Contest Nov 15-Dec 15 to showcase your work and win cash prizes! Transform Your Coding Future with GSAP! This course makes complex animations easy to master with a blend of theory and practice. Us
Simple CSS-Only Row And Column Highlighting | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. Highlighting rows of a table is pretty darn easy in CSS. tr:hover { background: yellow; } does well there. But highlighting columns has always been a little trickier, because there is no single HTML element that is parent to table cells in a column. A dash of JavaScript
クリティカル・パスのCSSなるシロモノ
クリティカル・パスのCSSをインライン化して、描画の開始を早めるテクニックが広まり始めている。数字上は確かに効果的だが、ソーシャル・ボタンの非同期化によるスクロールのつっかかりと似たような問題を孕んでいるのではないかという思いが強い。 世の中にはスクロールをまったくしない人とすぐにする人がいる。しない人はまったくしないので、クリティカル・パスのCSSのインライン化は意味があるような無いようなところだ。効果的になるはずのスクロールする人は、ページが表示され次第とりあえずスクロールするという行動を取ることが多いように思う。その時、非同期で読み込まれたCSSが間に合っていないとかなりひどいことになるだろう。 こういったページ閲覧中のちょっとしたパフォーマンスの低下を避けるためにも、CSSは一気に読ませた方が良いと考えている。非同期化されたJavaScriptによりコンテンツの追加や削除が頻繁に行
Center and crop images with a single line of CSS
It’s simple. Set your image crop dimensions and use this line in your CSS: img { object-fit: cover; }That’s it. No need for unsemantic, wrapping divs or any other nonsense. This technique works great for cropping awkwardly-sized avatar pictures down to squares or circles. Take this wide photo of a bear below for example. Once object-fit: cover is applied to the image and a width and height are set
CSS Flexbox Please!
CSS Flexbox Please! The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does
解決してしまったTap delay問題 #html5j
それぞれの対応方法 Chrome、Firefox meta[name="viewport"][content="width=device-width"] IE touch-action: none iOS8 touch time(150ms)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transformicons - Your Go-To for Auto, Bike, and Truck Care Blog
BEMが失敗しているパターンとその問題点
How do I simulate placeholder functionality on input date field?
Not showing placeholder for input type="date" field
CSS Toggle Switch: Accessible CSS toggle switch using standard form controls