27 Fresh CSS3 Tutorials
Since the advent of CSS3, designing has become a lot easier and quick. This style sheet language had made designing a lot more fun too and is usually used in combination with JavaScript or jQuery. It allows you to create amazing designs in a hassle free way and efficiently. It is used for stylizing and controlling the layout of your web pages. The possibilities of what you can create using CSS3 ar
-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-
CSSを追加してjQuery Mobileのデザインをカスタマイズ！ | Lab by engineering@dwango.jp
こんにちは初めまして、石崎と申します。 今回は jQuery Mobile シリーズ3回目！ということで、jQuery Mobile デザイン編です！ jQuery Mobile には 標準のテーマ（色見本）が5つ用意されています。この標準のテーマを使用してアプリを作ることも可能です。しかし、アプリやサイトにはそれぞれのデザインやブランドイメージがあり、標準のテーマとは違うイメージのものを作りたい場合があります。 そんな時のために、今回は CSS などをカスタマイズして独自のデザインをいれていくノウハウについて説明します。 対象読者 CSS3, HTML5 の知識がある方 jQuery Mobile の仕組み 今回は jQuery Mobile のバージョン 1.0 RC2 を扱います。 先ほど述べたように、jQuery Mobile には標準のテーマが5つ用意されています。data-th
確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
[JS]面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free
ページにたった一行記述するだけで、CSS3のベンダープレフィックスを自動で付与してくれるスクリプトを紹介します。 Prefix free via: PrefixFree: Break Free From CSS Prefix Hell [ad#ad-2] Prefix freeの機能 ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。 「-moz-」「-webkit-」「-o-」「-ms-」などがあります。 例えば、CSS3グラデーションを通常のベンダープレフィックスを使用すると、下記のようなスタイルシートになります。 .download { background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
-webkit-overflow-scrolling プロパティで overflow スクロール要素を iPhone ネイティブスタイルに
► 2023 (1) ► 1月 (1) ► 2022 (1) ► 3月 (1) ► 2021 (6) ► 12月 (1) ► 11月 (2) ► 9月 (2) ► 1月 (1) ► 2020 (15) ► 12月 (3) ► 11月 (5) ► 10月 (2) ► 4月 (3) ► 2月 (1) ► 1月 (1) ► 2019 (16) ► 11月 (1) ► 9月 (7) ► 8月 (1) ► 7月 (1) ► 6月 (1) ► 5月 (1) ► 4月 (2) ► 2月 (1) ► 1月 (1) ► 2018 (22) ► 11月 (3) ► 10月 (2) ► 9月 (6) ► 8月 (4) ► 7月 (2) ► 5月 (1) ► 4月 (1) ► 3月 (2) ► 1月 (1) ► 2017 (23) ► 11月 (4) ► 10月 (3) ► 9月 (3) ► 8月 (3) ► 7
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
[CSS]CSS3の美しいエフェクトを備えたナビゲーション -Circle Navigation Effect
デモページ 写真画像の下の半透明のパネルには画像の説明文とナビゲーション（アローとテキスト）が配置されており、ホバーするとサークル状にアニメーションで拡大しながらサムネイル画像に変わります。 2枚目の画像 [ad#ad-2] 実装 画像ギャラリー自体はjQueryをベースに作られており、ここではナビゲーションのエフェクトの実装方法を紹介します。 HTML ナビゲーション箇所はテキストと画像をa要素で内包します。 <div class="cn-nav"> <a href="#" class="cn-nav-prev"> <span>Previous</span> <div style="background-image:url(../images/thumbs/1.jpg);"></div> </a> <a href="#" class="cn-nav-next"> <span>Next</
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
![[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Infinite All-CSS Scrolling Slideshow | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Just for kicks I wanted to see if I could make a row of images animate across a page and repeat indefinitely. Turns out it’s really not that hard. See the Pen Infinite Slideshow by Chris Coyier (@chriscoyier) on CodePen. The concept is to move the position of the long graphic First the graph
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
画一的なプレゼンテーションにさよならを。HTML5/JavaScript/CSS3によるプレゼン·CSSS MOONGIFT
CSSSはHTML5/JavaScript/CSS3で作られたWebベースのプレゼンテーションテンプレート。 CSSSはHTML5/JavaScript/CSS3によるオープンソース・ソフトウェア。最近はHTMLやJavaScriptを使って作られたプレゼンテーションが増えている。JavaScriptでキーの動きに合わせてスライドを動かす類のものだ。 奇麗なHTMLプレゼン コンテンツがHTMLベース、つまりテキストで作れるのが大きな魅力だろう。そして最新のWeb技術を盛り込んで作られたのがCSSSだ。 CSSSは矢印キーによるスライドと切り替えと、Ctrlキーと組み合わせたキーボードショートカットをサポートしている。Ctrl+Hでスライドのサムネイル一覧を作ることもできる。矢印を押すたびに文字が追加表示されていくと言ったアクションも実装できる。 スライド一覧 良いと思ったのは、スライドの
CSS3 regions: Rich page layout with HTML and CSS3 | Adobe Developer Connection
Note: The proposed syntax for CSS Regions and CSS Exclusions has changed since this article was written, though the concepts remain the same. Please check the CSS Regions W3C Working Draft and the CSS Exclusions and Shapes W3C Working Draft for up-to-date details. The web has become a rich repository of content for reference and educational materials, news, articles, and interactive apps. However,
webkit基礎編02 | HTML5+CSS3でサイトを作ってみる。
■ いろいろな動き ここはwebkitを使ったサンプルページでしたが、firefoxにも対応させました。(2013/2/1) マウスオンでアクションするサンプル [ 角を丸く ] サンプルhtml --[ html ]----------------------- <div class="anime01"></div> --[ CSS ]------------------------ .anime01{ background:#000; color:#fff; padding:10px; width:100px; height:10px; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; transition: 1s ease-in-out; } .anime01:hover{ -webkit-bor
Layer Styles
Styles Drop Shadow Inner Shadow Background Border Border Radius
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Slide in Captions
HTML5とCSS3を使いこなしたくなるフレームワーク15選
Welcome - Csscorners
Ultimate CSS Gradient Generator from ColorZilla