Styling Button Links With CSS3
A fair while back I wrote a post on pressed button states using CSS, which was a tutorial on how to implement a pressed down button effect on custom styled links. In that post I used images to achieve the visual effect. Now that we have good CSS3 support, that method is really out of date. In this post I’ll show you how to achieve the same effect using CSS3, as well as how I’d go about styling the
CSS3だけで作るプログレスバー·CSS3 Progress Bars MOONGIFT
CSS3 Progress BarsはCSS3を使ってプログレスバー表示を行います。 最近、複雑な表示ですらCSSだけでこなしてしまうようなハックが流行っていますが、CSS3 Progress BarsはCSS3だけを使ってプログレスバーを表示します。 表示例です。角丸や複数の組み合わせ表示ができます。 さらに細めのタイプもあります。 コードです。styleのwidthでバーの長さを指定します。 色の指定もclass名でできます。 組み合わせの場合はこんな感じです。 細いタイプは_tinyをつければOKです。 CSS3 Progress BarsはCSS3だけでプログラレスバーを生成しているのでJavaScriptなどで動いたりするようにするのも簡単に実現できそうです。 CSS3 Progress BarsはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
(Better) Tabs with Round Out Borders | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The following is a guest post by Menno van Slooten. You might notice we’ve been down this road before, but I quite like Menno’s approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less
Item Blur Effect with CSS3 and jQuery
Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy... For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas... CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects u
E BISUCOM TECH LAB : CSS3プロパティ＆ブラウザ対応一覧
「CSS3 スタンダード・デザインガイド」の巻末に掲載したCSS3のプロパティ＆ブラウザ対応一覧です。ここでは各ブラウザの最新バージョンの対応状況を追加していきます。 » 更新内容 CSS3 CSS3で新しく追加されたプロパティ。 CSS3 CSS2.1からのプロパティで、CSS3で機能が追加されたもの。 拡張 ブラウザが拡張したプロパティでW3Cの規格に未掲載のもの。 ○ 対応（○は要ベンダープレフィックス）。 △ 部分対応（△は要ベンダープレフィックス）。 × 未対応。 iOS4.3のMobile Safari Android 2.3/3.0/3.1の標準ブラウザ Firefox 4（バージョン5…⑤、6…⑥） Safari 5.0.5 Chrome 11（バージョン12…⑫） Opera 11.10 Internet Explorer 9（バージョン10…⑩） IE6 IE7 IE8
[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
Animate.css | A cross-browser library of CSS animations.
Animate.css Just-add-water CSS animations See animations Close list Attention seekers bounce Copy class name to clipboard flash Copy class name to clipboard pulse Copy class name to clipboard rubberBand Copy class name to clipboard shakeX Copy class name to clipboard shakeY Copy class name to clipboard headShake Copy class name to clipboard swing Copy class name to clipboard tada Copy class name t
CSS3について知っておきたいことのまとめ
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 CSS3セレクタはW3
CSS3 support in Internet Explorer 6, 7, and 8
NOTE: This script is obsolete. You should use the far superior CSS3PIE instead. CSS3 support for Internet Explorer 6, 7, and 8 What is it? IE-CSS3 is a script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard. How it works If you're viewing this page in Internet Explorer, some of the elements have been rebuilt by the script in Vector Markup Language (
5 Cool CSS Hover Effects You Can Copy and Paste
Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration. If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy. Bring Your Boring Site to Life Hover effects can make your site feel much more dynamic and alive. It used to be the case that JavaScript was required to do anything
スマートフォン向けサイトのラジオボタンを良さ気な感じに。
昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。 なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。 ラジオボタンといえば、よく見かけるのは性別の選択とかでしょうか。 何にせよ、下記のような感じです。 ラジオボタン1 ラジオボタン2 んで、これをiPhoneとかで見ると、何の変哲もない普通のラジオボタンですが、iPhoneってラベル部分をタップしても選択できなかったりして使い勝手が悪いと思ったりしませんか？ ボクが持ってる、iPod Touch では反応してくれなかったです。 そこで、ラジオボタンをもっと良さ気なボタンっぽくしてみたら良いんじゃないかと思ったのでやってみました。 サンプルはiPhoneかwebkit系ブラ
Loading spinner animation using CSS and WebKit
It’s hard to stifle a smile any time I get a glimpse of the future thanks to WebKit-based browsers like Safari and Chrome (and their mobile counterparts on iOS and Android devices). That happened today when I discovered a way to make an iPhone-style spinner without any images, just CSS. First attempt I have been working on a project that targets mobile WebKit browsers so it was natural to explore
CSS3 Minimalistic Navigation Menu
As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari). But what difference does it make for us today? At the moment on
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ピュアCSSなソーシャルサイトのログインボタン:phpspot開発日誌
cubic-bezier.com
味気ないサムネイルリストをCSS3で回転させてオシャレにするチュートリアル:phpspot開発日誌
SlideFinder -Web開発者向け日本語スライドまとめ-
HTML5の勉強に役立つチートシートやリファレンスのまとめ
HTML5Rocks - A resource for open web HTML5 developers
