リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips季節の変わり目特に春にはリニューアルするサイトも多かったりします。そんなリニューアルやサイト制作時に使いたいオシャレパーツを集めました。 cssSlider 名前の通りCSSだけで動くレスポンシブスライダーです。クロスブラウザにも対応してます。 WOW.sliderのようにエフェクトからカラーなど好きなように選んで設置できるので、html&CSSがよく分からない人にも簡単に設置することができます。 MockupSlideshow
Timesheet.js - Beautiful time tables with HTML, JavaScript and CSS …
Timesheet.jsVisualize your data and events with sexy HTML5 and CSS3. Create simple time sheets with sneaky JavaScript. Style them with CSS and have mobile fun as well … Just include Timesheet.js and configure your data. No external dependencies, no jQuery needed and of course no Angular.JS! Just a few lines JavaScript to generate a beautiful HTML5 layout and some really delicious CSS to be customi
第4回 jQueryでアニメーション（お題編） | gihyo.jp
はじめに jQueryの機能を大きく分けると、DOM操作、アニメーション、イベント処理、Ajax、その他のユーティリティ関数といった分類ができます。DOM操作は前回の記事で解説したような、HTMLの要素を追加したり書き換えたりといった操作です。今回はその中の1つ、アニメーションについて解説します。アニメーションも正確にはDOM操作に分類されますが、アニメーションだけでかなり大きな比重を占めるので今回は通常のDOM操作とわけて考えます。イベント処理やAjax、ユーティリティ関数についても連載の後のほうで解説する予定です。 JavaScriptでアニメーションの基本 まず始めに、jQueryを使わないでアニメーションをする方法を紹介します。jQueryのアニメーションが実際に内部でどのような処理が行われているかを知ることでその後の理解度が増すと思います。JavaScriptでアニメーションは基
第1回 jsdo.itってなんだろう？ | gihyo.jp
はじめに はじめまして。株式会社ピクセルグリッドの外村です。今回この連載では、マークアップエンジニアやデザイナを対象に、『jsdo.it -Share JavaScript,HTML5 and CSS-』（以下、jsdo.it）というサイトを使ってユーザ参加型のJavaScriptやCSS3の学習コンテンツを提供していきます。今回は初回ですので、jsdo.itというサイトの概要や連載に向けての事前準備を解説します。 jsdo.itとは jsdo.itというのは2010年に株式会社カヤックがリリースしたWebサービスで、Web上でHTML5、CSS、JavaScriptを書いてその場で実行することができます。書いたコードは誰でも見ることができ、トップページに並んでいる人気のコードを見るだけでも楽しむことができます。 また、単にコードを書いたり人が書いたコードを見たりするだけでなく、他にも
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
Home | CSS3 Animate It
CSS3 Animate It is a new CSS3 lightweight animation plugin that triggers animations when they come into view using CSS3 animations.Include css3-animated.js at the end of your file and animations.css in the head. Once you have done that you can just define "animatedParent" as the parent class which is what will trigger the child class "animated" to animate whichever animation is defined, here we ar
[CSS]数行のスタイルシートで、スター・ウォーズのオープニング風アニメーションを簡単実装
JavaScriptや画像は一切無しで、テキストが3Dで流れるスター・ウォーズのオープニングを作成するスタイルシートを紹介します。 Star Wars 3D Scrolling Text in CSS3 デモ 実装 デモ デモは最新のFirefox, Chromeでご覧ください。 IEは3Dの変形アニメーションにまだ対応していないため、IE10を待ってください。 実装 Step 1: HTML HTMLは簡単で、テキストのp要素をdiv要素二つで内包します。 titlesが外側で、titlecontentがスクロールするセクションです。 <div id="titles"><div id="titlecontent"> <p>テキストテキストテキストテキスト</p> ... ... </div></div> Step 2: CSS まずは見た目のスタイルです。 :after擬似要素でフェード
CSS3のふわりとしたアニメーションが気持ちいい画像ギャラリーを実装するチュートリアル
CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 デモページ：サムネイルのホバー時 サムネイルのホバー時だけでもキャプションの表示だけでなく、画像などのサイズ変更、テキストの表示、各アイテムの可視化、配置変更などもアニメーションで行われています。 実装 実装はポイントをまとめて紹介します、Stepは3つです。 元記事では詳細に書かれているので、参考にしてください。 Step 1: HTML 画像、2つのパラグラフ、タグが一つのセットになっており、それぞれをリスト要素で実装します。 <ul class="portfolio-items"> <li class="item"> <figure> <div class="view"> <img src="images/1.jpg"> </div>
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 スライドのアニメーションがとても滑らか・ちらつかない ボタンの反応にストレスを感じない メイ
HTML5, CSS3, jQueryを使用したフロントエンド開発用のフレームワーク -G5 Framework
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース（1.4.4も可） ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
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セレクタってどういうもの
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
Liveweave HTMLエディター
Check out our Python playground! Python is the most popular general-purpose programming language in the world, widely used in Artificial Intelligence, Machine Learning, and Data Science projects. Supports popular Python libraries like Numpy, Matplotlib, SciPy, Pandas, and more! Share your public code with anyone, or make it private Features advanced auto-completion technology Try it now!
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: CSS3&jQueryで作る スマートフォンサイトUI図鑑 (WEB PROFESSIONAL): 礒田優 (著), 久保知己 (著), 近藤直人 (著), 早川稔 (著), 宮田優希 (著), 株式会社まぼろし (監修): 本