HTML5 × CSS3 × jQueryを真面目に勉強してみる の記事一覧 | DevelopersIOHTML5 × CSS3 × jQueryを真面目に勉強してみる の記事一覧です
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
A personal exploration of design, technology, & rebellion.
A personal exploration of design, technology, & rebellion. Design by undesign. Simplicity is polarizing. Simple is hard. Resisting the urge to add more. How to stand out online. The cost of overwhelming uniformity in web design. Back to basics. Going “build–step free” for a handcrafted experience. Portfolio Most recent work. Thanks for visiting, – joshua
Experimental CSS3 Animations for Image Transitions | Codrops
Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which
Bubble Point Tooltips with CSS3 & jQuery | CSS-Tricks
I needed some tooltips for a thing. In looking around for a little inspiration, I didn’t have to go further than my dock: The inspiration: contextual menus from OS X dock This is where I ended up: View Demo The HTML: Keepin’ it Clean Links can have tooltips in HTML with no fancy coding whatsoever. Just give a link a title attribute. <a href="#" title="Hi, I'm a tooltip thingy.">link</a> Then when
Webページ制作に使える6つの便利サイト | エンタープライズ | マイコミジャーナル
A Web Design Community curated by Chris Coyier. CSS-TricksにWebページ制作時に役立つ便利なページ紹介の記事「One Page Apps I Actually Use」が掲載されている。特にCSS3を利用するにあたって便利なページがまとまっており参考になる。紹介されているページは次のとおり。 まず紹介されているのはCSS3 Please!。このサイトはよく使われるCSS3機能のテンプレートをまとめたサイトで、コピー&ペーストして利用できる。主要ブラウザのベンダプレフィックス版もすべて記載されおり便利。コメントも記載されておりわかりやすい。CSS Border Radius Generatorは角の丸みをチェックするサイト。四隅のボックスに数値を入力すると、それを表現するためのCSS3が生成される仕組みになっている。-webkit-と
Coding a Rotating Image Slideshow w/ CSS3 and jQuery
Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic. HTML Following the tradition, we will first lay down the HTML markup of the slideshow. The main container element is the #slideShowContainer div, which holds the #slideShow div an
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
jQueryとCSS3を使ったカラフルなレーティングシステムのサンプル:phpspot開発日誌
jQuery quickie: Colourful rating system with CSS3 jQueryとCSS3を使ったカラフルなレーティングシステムのサンプルが公開されています。 点数によって色を変え、アニメーション表示するもので、視覚的にわかりやすい投票のUIが作れますね。 動きをみたい方は以下のムービーでも見ることができます。 こうした投票のUIとしては★が一般的ですが、こういうUIも慣れるとなかなか使いやすそうですね。 関連エントリ jQueryのAjax機能を使った投票システムのサンプルプログラム reddit風のGoodかBadの投票機能実装サンプル Ajax+PHP+MySQLな投票ウィジェット jQueryとPHPでダイナミックな投票スクリプトを作成
アニメーションの残像が残るjQueryアニメーションチュートリアル:phpspot開発日誌
Shadow Motion Effect in 5 Lines Of jQuery | AEXT.NET MAGAZINE アニメーションの残像が残るjQueryアニメーションチュートリアルが公開されてます。 次のようにアニメーションした後の残像が残ります。CSS3の機能なども盛り込みつつ実装されてるみたいです。 サンプルは簡単な円のアニメーションを使いながらコードの説明があります。 Flashに比べるとパフォーマンスはそこまで出てない気はするのですが、なかなか面白いですね。 関連エントリ キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム クールにアニメーションする色合い様々なjQueryメニューサンプル色々
jQueryとCSS3で作るカラフルなスライダーウィジェット:phpspot開発日誌
Colorful Sliders With jQuery & CSS3 ? Tutorialzine jQueryとCSS3で作るカラフルなスライダーウィジェットの作成チュートリアルとデモプログラムのダウンロードが出来ます。 次のようにデザインも洗練されていて、スライダーを調節することで３Dグラフが伸び縮みする面白いサンプルになっています。 HTMLやCSSも綺麗で、グラフが伸縮する部分のテクニックなんかも参考にできそうです。 関連エントリ クールなデジタル時計ウィジェットを設置できるjQueryプラグイン「jDigiClock」 JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ TwitterのFriendsやFollowersをページにアイコン付きで表示するWidget実装jQueryプラグイン
10 Brilliant CSS3 and jQuery Examples
Title: 10 Brilliant Examples that use CSS3 and jQuery Introduction CSS3 is getting a lot of attentions recently. Myself, as a front end developer, I'm absolutely in love with CSS3. Rounded corner, drop shadow and rotation couldn't be easier! The only drawback is, CSS3 standard is not fully implemented by most browsers and also, I believe you will get a lot of CSS validation errors as well. However
10+ High-Quality Free CSS Button Libraries & Frameworks — Speckyboy
Resources by Application Bootstrap Templates Figma Templates Flyer Templates Illustrator Templates InDesign Templates Lightroom Presets Logo Templates Logo Fonts Mockup Templates Photoshop Actions Photoshop Brushes Resume Templates Tailwind CSS UI Kits Web Templates Video & Motion Design Templates All Motion Design After Effects Apple Motion DaVinci Resolve Final Cut Pro Premiere Pro Presentation
An Awesome CSS3 Lightbox Gallery With jQuery
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it. It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost). We
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Codrops | Useful resources and inspiration for creative minds
見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト
Red Team Design
PvmGarage.com is for sale | HugeDomains
