HTML5 × CSS3 × jQueryを真面目に勉強してみる | DevelopersIOHTML5 × CSS3 × jQuery – #20 文字をランダムでカシャカシャ動かしながらテキストを表示させるプラグインを作る
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セレクタってどういうもの
Codrops | Useful resources and inspiration for creative minds
Codrops Demos Hub Discover our curated collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Stay in the loop: Get your dose of frontend twice a week 👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox. Zero fluff, all quality, to make y
Home
Just make cool sh** stuff. Current Stack – Back to basics. Going “build–step free” for a handcrafted experience. Feb 23 2024 @joshua Yearning for a simpler time – the artisanal web. Websites are too BIG, too complicated, and too hard. Reactive programing is conceptually easy to grasp – but the distance between the end result vs. frameworks & tooling is too far apart. I get it, the web is a compl
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
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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 whats
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
12 High-Quality Free CSS Button Libraries & Frameworks – Speckyboy
bttn.css Library bttn.css is a collection of lightly-styled buttons that feature different shapes, sizes, and colors. All styles can be called with simple class names. With the minified CSS file coming in at just 4kb, this library is also quite lightweight. CSS Buttons Collection The title may be simple, but Buttons is a library with over 20 collections of styles to choose from. Standouts include
Account Suspended
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
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
WebAir | web. for passion » Mixing CSS3 and jQuery… How to CSS3 Effects via jQuery
Mixing CSS3 and jQuery... How to CSS3 effects via jQuery Come usare oggi i CSS3 con la sicurezza di creare effetti visibili su tutti i browser? Semplice! Nascondendoli in jQuery! In questo modo il vostro problema sarà solo sapere se i browser supportano jQuery. Oggi vi mostriamo una lista utile per imparare ad usare i CSS3 tramite jQuery ma prima iniziamo con qualche esempio per capire come usare
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト
Red Team Design