2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数を使用すると、複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。 Chrome Platform Status CSS Trigonometric functions（三角関数）はCSS Values and Units Module Level 4ですでに定義されています。 sin() 引数として与えた数のサイン ボックスのサイズ
なんで PC 画面がワイド化してんのに、ブコメ表示部がこんなに幅狭いんだよ……。というわけで、お気に入りページのサイドバーとサムネイル消して表示幅を広げるユーザースタイルシート。 .wrapper-container-inner { width: 90%; } #center-container { width: 100%; } #left-container, #right-container, .entry-image-block { display: none; } .wrapper-container-inner.left-column-line { background-image: none; } .entry-title, .entry-block blockquote, .entry-data, .user-comment-meta, .starContainer { di
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 ※10秒後にBIGLOBEのおすすめページに遷移します
※2018/03のはてブの大リニューアル対応 ◆Git Source:https://github.com/ovoncovon/hatena-user-css/ ◆ https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css.css ◆Firefox用 https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css_ffx.css TOPページ ENTRYページ 履歴 2018/11/06 フォントなど微調整 2018/05/19 2018/03のリニューアル対応 2017/08/30 エントリーページの微調整 2017/08/23 エントリーページのリニューアル対応 2015/10/21 「
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
このエントリーはHatena::Staff Advent Calendar 2011のために書かれたものです はじめまして。最近は映画けいおんが生き甲斐のuedayです。 11月8日にクローズドベータリリースした「はてなブログ」のデザイン全般を担当しました。裏側というほどの話ができるか微妙ですが書いてみます。 開発チーム 開発チームは、エンジニアid:cho45／デザイナーid:ueday／ディレクションid:onishiです。デザインはクオリティチェックをid:tikedaに依頼して、適宜フィードバックを貰いながら進めていきました。このほかに制作スタッフが数名います。プロジェクトが立ち上がったのが8月1日だったので、開発期間は約3ヶ月です。アルファ版完成が異常に速く、開発2日目か3日目で記事投稿ができるようになり、5日目でアルファ版を社内リリース。choさんほんとすごいなって思いました
@-moz-document 書式 例 利用可能なブラウザ 参照 Mozilla / Firefoxでサイト別にCSSスタイルを適用することを可能とする@-moz-documentルールについて。 書式 W3CのMLに投稿された、per-site user stylesheet rulesより。 docrule ::= "@-moz-document" S+ url-list "{" S* ruleset* "}" url-list ::= url-item ( "," S* url-item )* url-item ::= ( "url(" | "url-prefix(" | "domain(" ) URL ")" S* S は空白類。( [ \t\r\n\f]+ ) domain() の場合、括弧内に入るのは、正確にはURLでなくホスト名(ドメイン名)になるようです。 例 以下のような
はてなブックマークのエントリーページを改良しました - はてなブックマーク日記 - 機能変更、お知らせなど 一覧性云々はともかく、エントリページがとにかく見難いので。 @charset "utf-8"; /* Name: はてブ*/ div#container {min-width:0px!important;} .curvebox-body {padding-right:20px!important;} div#sidebar,div#ad {display:none!important;} min-widthを止めて いらん物を消して div#mainがちゃんと横幅広がるように すっきり。 ついでにいろいろ消す div#add-bookmark-container {display:none!important;} /*あなたのブックマーク*/ div#favorite-bookmar
はてなブログ「見たままモード」は書式付きでコピペできるので、文字や画像、はてなスターなど様々な要素から構成される「はてなハイク」をブログにコピペして引用する時に楽ちん。 はてなブログ 28 by かねさだ 2011/11/08 2:29:23 from Hatena::Haiku::Beta::Web 返信 http://h.hatena.ne.jp/kane/189911492677162316 もちろん、コピペされた「はてなスター」は静的なコピペであって動的に連携したものではない。したがって、はてなブログ上に貼り付けて引用したハイクにスターを付けることは出来ない。ハイク上で新たにスターが付いてもそれが引用先のはてなブログに反映されることもない。それでも、引用時点で付いていた「はてなスター」ごと「はてなハイク」を引用できると、ハイク上での雰囲気をほぼそのまま引用できる気がする。 それにし
Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
第16回（最終回） 最新のデザイン表現を適用する ここまで紹介してきたCSSのレイアウトや装飾テクニックは、現在利用者の多いInternet Explorer 7や8、Safari、FirefoxなどのWebブラウザでほぼ問題なく動作するものでした。本連載の最終回は、未来に向けた準備として現在策定中の「CSS 3」の中からモダンブラウザで既に適用可能なスタイルをいくつか紹介します。 （公開日：2010年4月16日 解説：こもりまさあき） 現在策定中のCSS 3について CSSで指定したスタイル指示は、WebブラウザのCSSサポートの度合いによって適用できるかどうかが異なります。例えば、今現在の主流であるブラウザの多くではCSSレベル2（CSS 2）をサポートしているものがほとんどです（特定のプロパティだけ未サポートも含め）。その一方、現在CSSの次のバージョンにあたるCSSレベル3（CSS
CSS MENUS › Float drop menu system - multi level Date : 22nd December 2009 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information Carrying on with this series I have now produced this version which caters for links that span more than one line and has a better indication of the path taken through the menu. As previous menus in this series t
CSS MENUS › An unordered list with link images Date : Pre 2006 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. C S S P L A Y Information Based on my recent image map demonstration this menu has pop-up images to give an exampe of the destination pages. The images appear around the central links and are joined to their repective link by a thin bla
CSS DEMOS › Film strip gallery with information text Date : 29th July 2009 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Hover over the filmstrip to turn the negative images into the positive versions and display the full size image above. Hover over the full size image to see the descriptive text. We are a fairly small, flexible design studio
CSS DEMOS › A definition list bar chart Date : Pre 2006 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Chart #1 Browser usage (%) - July 2005 IE.6 = 67% IE.5 = 6.7% Opera = 1.2% Firefox = 19.7% Mozilla = 2.6% NN7 = 0.8% Chart #2 Browser usage (%) - July 2005 IE.6 = 67% IE.5 = 6.7% Opera = 1.4% Firefox = 19.7% Mozilla = 2.6% NN7 = 1.1% Informati
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 これ凄いです。僕が知らなかった だけかも知れませんが、この動き でjs等も使用していないのは驚き でした。cssとHTMLのみでマウス オーバーした際の画像に3D効果 を出しています。 動作はIE8、Firefox3、Opera9、Safari 3、Chrome4などで動作するそうです。 マウスオーバーし、左右に動かすと画像も動きます。 複数の透過レイヤーを重ねてhoverで動きを出しているみたい。何枚かの画像と下記のような画像を使ったｃｓｓスプライトを使って実現しているようです。 この効果はmootoolsやjQueryのプラグイン(mParallaxやjParallax)を使えば同じ表現を実現出来ます。 実用性は期待できませんが、cssとHTMLだけっていうのが
ul, ol, dl要素を使用したスタイルシートの5つのトリックをPieter Beulqueから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ol> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> </ol> </
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
