CSS3で実現するアローアイコン
CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a
[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス
ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲む（スクロール非対応） まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。 基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。 角丸用の画像 コードを見てみましょう。 HTML HTMLは、bodyだけで構いません。 <body> <h1>Rounded inside body border</h1>
WebKitに縦書きパッチを提供するか、W3Cにテストスイートを提供することでお金が貰えるぞ！ - Nothing ventured, nothing gained.
「次世代Webブラウザのテキストレイアウトに関する検討会」*1の「電子書籍関連分科会」が「次世代Webブラウザを利用した縦書きテキストレイアウトに関する表現の標準化のため、課題抽出のための調査支援者」を募集している。 次世代Webブラウザを利用した縦書きテキストレイアウトに関する表現の標準化について、課題抽出のための調査支援者の公募 | NTTソフトウェア 「課題抽出のための調査」という言い方をしているが、具体的にはブラウザでの縦書きの実装を進め、その実装の確認を行うためのテストスイートの開発である。ブラウザとしてはChromeやSafariなどのレンダリングエンジン*2であるオープンソースのWebKitを対象としている。そして、この開発を完了させた人にはきちんと報酬が支払われる。内容によって額は異なるが、10万円か20万円のいずれかだ。 自分で「縦書き不要論」という物騒なタイトルのブログ
[CSS]対応ブラウザはWebkit系だけだけど、美しいエフェクトを備えたラジオボタン
見た目だけでもCSS3で美しくスタイルされたラジオボタン、クリックすると更に美しいアニメーションのエフェクトが仕込まれています。 光点がアニメーションで移動 ラジオボタンの選択が移動するのは、分かりやすいですね。 実装は下記のようになっています。 HTML <input type="radio" name="name" checked /> <input type="radio" name="name" /> <input type="radio" name="name" /> <input type="radio" name="name" /> <input type="radio" name="name" /> CSS body { padding: 50px; background-color: hsl(0,0%,20%); } input { -webkit-appearance:
Accelerated CSS Filters Landed in Chromium
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法
HTML5のウェブフォームの機能「プレースホルダーテキスト」をHTML5に対応していないブラウザにも実装する旧式の方法、ModernizrとjQueryを使った今時の方法、の二つを紹介します。 HTML5対応ブラウザでは、「placeholder」の値がテキストフィールドに表示されます。 <form class="form"> <p><input type="text" placeholder="Your name please"></p> <p><input type="text" placeholder="Enter your email"></p> <p><input type="search" placeholder="Search"></p> <p><textarea placeholder="Write your comments here"></textarea></p> <
Google Forces Web Standards Issue Using Sexy Buttons | TechCrunch
Google made a very minor but significant change to their search homepage earlier this week. While everybody else was distracted by the barcode logo, a few Chrome and Safari users may have noticed that the search buttons now have a certain zing to them, a new and pretty look, with slightly rounded corners, a border around them and a cool looking gradient. Now, before you think or say, “baa baa tech
CSSでグラデーションを表現する - builder by ZDNet Japan
今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 オープンソース活用はあたりまえ！ そんな今だからこそ改めて考える 企業ITにおけるOSS活用のメリットとリスク 高い従業員満足度と安心・安全 新時代にむけた理想の業務環境こそ Anywhere Workspaceが目指す未来 ID管理の基礎知識 新しい働き方におけるITガバナンスの 向上にむけて Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして 変わるIT部門の役割 本当のデータ活用できていますか？ データドリブンがあたりまえと言われる今あらためて考えたいデータ活用のありかた 膨大なアクセスを支える屋台骨 高い安定性とパフォーマンスを両
HTML5 と CSS3 で 死にたい
CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。 サンプルページは、CSS3のプロパティの練習として作っていたので、 表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、 描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。非常に高負荷な処理が盛
Safari 4が対応したCSSの新機能：グラディエント、反転、マスク - builder by ZDNet Japan
Safari 4（ベータ版）では、レンダリングエンジンのWebKitが採用したCSSの新機能「グラディエント」「反転」「マスク」を利用できるようになった。本連載で紹介したトランスフォーム（回転、拡大・縮小、スキュー、移動）の機能と合わせると、これまではグラフィックソフトが必須だった処理の多くをスタイルシートだけで実現できるようになる。 今回は、これらの機能がどのようなものなのかを簡単に紹介したい。 CSSでグラディエント、反転、マスク 次のサンプルは「グラディエント（Gradient）」「反転（Reflect）」「マスク（Mask）」のそれぞれの機能を利用して、Safari 4（ベータ版）で表示したものだ。左から順に、背景をグラデーションカラーで表示したもの、テキストと画像を反転させたもの、画像の輪郭をマスクでぼかしたものとなっている。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]Safariで見かける角丸のにじみを解消するスタイルシート
IDEA * IDEA