[iOS 8] Safari 8で CSS Shapesが使えるようになった。 | DevelopersIO
こんにちは、清田です。 WWDCの中で、次世代のSafari 8で「CSS Shapes and Compositiong」がサポートされたとのことで、 今回はCSS Shapesについてご紹介してみたいと思います。 CSS Shapesとは？ CSS ShapesのShapeは形を意味します。 CSSのプロパティから指定した任意の形状(Shape)に合わせて、レイアウトすることを可能にしたスタイルになります。 表現できる形は、丸、三角形、台形など簡単図形の描画や画像を形状として認識できるようです。 ブラウザの対応状況 以下の対応表を確認してみると、Safari 8から対応したのが確認できます。 導入方法について まず前提条件として、CSS Shapesを描画できるブラウザであることがあります。 基本的なでスタイルを反映方法は、従来の指定方法と同じようにdom要素に任意のid or cls
![[iOS 8] Safari 8で CSS Shapesが使えるようになった。 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/34de6d57437c5cfc77b749f99e4483a7a1702539/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F06%2Fios81.png)
Box Shadowのエフェクトサンプル＆便利な素材まとめ - NxWorld
今さらな内容で特に目新しいものがあるわけではありませんが、自分用で一覧化したものが欲しかったので備忘録。 CSSのbox-shadowを使用して実装するエフェクトサンプルとシャドウエフェクトを付けたデザインを制作する際に便利な素材をいくつか紹介します。 CSSのbox-shadowで実装したエフェクトサンプル 以下はいずれも画像は使わずにCSSのbox-shadowを使用してシャドウエフェクトを実装しているサンプルで、単純にシャドウを付けたもの、内側に付けたもの、要素が浮かんでいるように見せるものなど全10種類あります。 HTMLはEffect 10以外は全てdiv要素ひとつで、共通のスタイルとして下記をCSSで指定しています。
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか！
こんにちは、相変わらずドラクエ10三昧の橋本です。 最近はライノス道場に通っています。 さて、今日はハイブリッドアプリのCSSを書く際に毎回指定するようにしているプロパティを備忘録がてらいくつか書いていこうと思います（いつも忘れるので）。 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) iPhoneやAndroidでリンクなどの要素をタップしたときに、iPhoneでは薄いグレー、Androidでは緑やオレンジの枠がデフォルトで表示されます。 -webkit-tap-highlight-colorというプロパティに色を指定することで、この枠の色を変えることができます。 ハイブリッドアプリを作成する際には、この枠が出ると如何にもWebっぽくなってしまうため、透明色を-webkit-tap-hightlight-colorに指定して、枠が表示されないよ
Flexbox | web.dev
Flexbox Stay organized with collections Save and categorize content based on your preferences. The CSS Podcast - 010: Flexbox A design pattern that can be tricky in responsive design is a sidebar that sits inline with some content. Where there is viewport space, this pattern works great, but where space is condensed, that rigid layout can become problematic. The Flexible Box Layout Model (flexbox)
CSSだけで簡単に吹き出しを作成する方法4つ！
こんにちは、橋本です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し（ボーダー付き） ぽわわーんとした吹き出し 丸い（曲線の）吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
Twitter Button Concept by Erik Deiner
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
結局CSS3のlinear-gradientはどう書いたらいいのかまとめてみた (最新仕様・全ブラウザ対応版) - Studencheskie Programmisty
[-ms-]などは当該ベンダープリフィックスが必要という意味を表します。 Firefox 16以降のように1つのブラウザに複数の項目があるのは、ベンダープリフィックスによってサポートされる構文が異なっていることを表します。 iOS本体のバージョンと、搭載されているSafariのバージョンの対応表はWikipediaが詳しいです。 これから分かるように、現時点（2012/12/7）ではWebkitは最新の構文（to付き）に対応していません。また、FirefoxやOperaのようにプレフィックスを付けるかどうかでtoなしの古い構文が使えたり使えなかったりと変化します。 さて、では結局過去のブラウザも含めて全てに対応するにはどう書けばいいのでしょうか？上から下へ#000〜#fffのグラデーションをかけるコードを例に示します。実際には、対応したいブラウザののみ取捨選択して記述するのが実用的かと思わ
iPhone 5とiOS 6で導入されたWebデベロップまわりのアップデートについて - Branch
Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.
CSS Filtersで写真加工するWebApp - CSS PhotoEditor - くらげだらけ（くだくらげのBLOG）
iOS6も発表されて、あとはNew iPhoneのリリースが待たれる季節ですね。私は3Gの発売時に買い替えて、2年後iPhone4にし、また2年が経とうとしているので今年は新しいのに買い換えようという気持ちです。 世間ではAppleのマップでいろいろと騒いでいたりしますが、OSがアップデートされるたびに私がチェックすることといえばブラウザの仕様や機能の変更です。 去年はWebAppやスマホサイトを作るには嬉しい変更がありました。position:fixedやiframeの慣性スクロール、他にもSVGや縦書き、明朝フォントのサポートもありました。 その辺りはiOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】と【後編】というエントリーでまとめて書いています。このときもデモ用にフルスクリーンで使えるWebAppを作成しました。 今回はCSS Fi
Media Queries for Standard Devices | CSS-Tricks
This page lists a ton of different devices and media queries that would specifically target that device. That’s probably not generally a great practice, but it is helpful to know what the dimensions for all these devices are in a CSS context. UGURUS by DigitalOcean for agency owners UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerato
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html
「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘（スイッチ）
The ultimate CSS tools for web designers | CSSmatic
https://abcyahhh.com/
nthmaster.com
スマートフォンブラウザ不具合特集
公海555000kk线路检测—首页（欢迎您）