Caption Hover Animations
IMAGE CAPTION HOVER ANIMATION WITH CSS3 TRANSITIONS & TRANSFORMS This is an example of caption animation while hovering on images, using CSS3 transitions and transform rules. There is no Javascript used so it will work on modern browsers where CSS3 animations are supported. Please check the sourcecode of this page to understand how the animation is working. Illustration Credit: Illustrations used
『css3 box-shadow transitionのサンプル31個。』
せっかくの休みなんで書いてみた。 box-shadowって結構【影】ってイメージが強いけど、背景色とかにも使えたりするし便利。 背景色のスライドとかしようと思っても、backgroundだったら画像だけしかposition移動は出来ないから、そんな時にbox-shadowが便利なんですよね。 そんなわけで今回もcodepenに書きました。 ■css3 box-shadow transition sample31 - CodePen ■解説はこちら→css3 box-shadow transitionのサンプル31個作りました。 | CreativeLife Check out this Pen! 直接的なアメブロカスタマイズ記事では無いけれど、記述の方法とか仕組みとか覚えておくと後々役に立つと思います。 次からは実用的なサンプルでも作るかな～。 CSS3 スタンダード・デザインガイド/毎日
50 Free HTML5 CSS3 Templates Which You Should Download
Finding of high-quality and beautiful templates are available out there. These templates make creating an eye-catching website an easy and quick task. Some templates are free of cost, while others are paid – it totally depends on the template itself. Thanks to all the web designers out there who spend their precious time and talent in creating these templates to help us all out and allow us to mak
Animatable: One property, two values, endless possiblities
box-shadow ◀ ▶ From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou Tweet
3D Book Showcase | Codrops
An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms. Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interact
意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
47 Amazing CSS3 Animation Demos - Web Designer Wall
Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy! CSS3 Clock With jQuer
CSS3のtransformで回転・拡大縮小・移動をアニメーションさせてみた - Web.fla
transformについて調べてみた。 transformには変形させる関数もあるのだが、変形させるための軸を指定するtransform-originがある。 変形の基準点となるtransform-origin 引数にはx軸とy軸の値を指定できる。指定できる値はパーセンテージかキーワードです。 なにも指定なければ初期値は要素の中心です。 /* パーセンテージ */ transform-origin:50% 50%; /* キーワード */ transform-origin:center center; transformプロパティと関数について transformで変形させるには下記の関数を利用して変形させる。 rotate(deg)で要素を回転させる 指定できる値は「回転数deg」といった感じ。 /* 180度回転させる */ transform:rotate(180deg); skew
最近の「HTMLとかCSSとかAPIとか」、CSSがより便利に使える「実践Sass」～HTML5 Conference 2012 セッションレポート | gihyo.jp
最近の「HTMLとかCSSとかAPIとか」、CSSがより便利に使える「実践Sass」～HTML5 Conference 2012 セッションレポート 9月8日、慶応義塾大学日吉キャンパス協生館にてHTML5 Conference 2012が開催されました。4トラック20セッションの講演が行われたのですが、本稿では次のセッションを中心に本イベントをレポートします。 「HTMLとかCSSとかAPIとか －2012秋編－」 「実践Sass －10を超えるプロジェクト運用で得たノウハウ－」 注 公式レポートは@ITにて順次掲載されていますのでそちらをご覧ください。イベントの公式サイトでは、本イベントに関する記事を収集しているので、こちらを確認してみると良いでしょう。また、各登壇者の発表資料もイベントの公式サイトに掲載されています。 基調講演 昨年開催されたChrome+HTML5 Conferen
css boxes
Hello friends, this is a huge compilation with 45 imageless CSS and CSS3 boxes ready to download, including source code in both CSS and HTML and a working demo to see how they work, to see the real power behind this fantastic compilation, please use google chrome or similar browser ;) CSS3 frame boxes pack (imageless) By WordPressThemeShock Please check all our experiments in our themes site :) an
機能別にまとめたCSS3ジェネレーター28選 - ウェブ学のすすめ
スマートフォンサイトでCSS3を使うことが多くなりますが、今までのCSSに比べブラウザごとにベンダープレフィックスを記述するなど作業量が増えてしまいます。そこで少しでも作業量を減らすためにジェネレーターを活用することをおすすめします。今回は簡単にCSS3を適用できるジェネレーターを機能別にまとめてみました。 多機能型：6個 日本語対応。Photoshopのようなジェネレーター CSS3プロパティジェネレーター | CSS-EBLOG シンプルなジェネレーター CSS3 Generator 10種類も設定ができるジェネレーター CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator リアルタイムプレビューが可能なジェネレーター CSS3 Playground by Mike Plate Photoshopのレイ
CSS3 animation transformの動きデモ - ウェブ学のすすめ
要素を変化させるtransformの実際の動き方を見るためにデモを作ってみました。 プレビュー ↓別ウィンドウを開いて見る CSS3 animation transformの動きデモ - js do it ポイント transform 値内容scale拡大・縮小rotate回転translate距離skew歪み animationのプロパティ プロパティ内容-webkit-animation-nameアニメーションの名前-webkit-animation-duration再生時間-webkit-animation-timing-function動き方-webkit-animation-iteration-count再生回数 ※無限：infinite-webkit-animation-direction再生方向 ※逆再生：alternate-webkit-animation-delay遅延時
いつまで使えばいい？CSS3ベンダープレフィックスの切り時チェック！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
コーヒーは命の水！もりたです。 css3の正式勧告はいつだろうと指をくわえながら使っている現在ですが、そんな中どうしても使わなければいけないベンダープレフィックス。 全部書き出すとすごくいっぱいあるみたいなんですけど、とりあえず-webkit-と-moz-だけは書くようにしてるよという人は多いんじゃないでしょうか。私のことです。 でもあれってコードが長くなるからめんどくさいなーと思ってる人は多いんじゃないでしょうか。私のことです。 そのベンダープレフィックスっていつ使うのをやめればいいのかなと思ったら、こういうことらしいです。 ベンダープレフィックス（接頭辞）とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。 【中略】 ただし、ベンダープレフィックスは、 草案（Working Draft
42 Powerful CSS3 Techniques,Tutorials and Experiments With Demos - Designbeep
The power and popularity of CSS3 is rising day by day and i think whenever all the browsers support CSS3 the popularity will hit the top.For now,Safari browser is much more compatible with CSS3 than Firefox or Chrome.And of course nothing to say about Internet Explorer. When you search for CSS3 tutorials and experiments you will find amazing Flash-like examples and i’m sure you will be surprised.T
SPEC vol5 | JavaScript、HTML、CSSクリエイターの採用試験 - jsdo.it - Share JavaScript, HTML5 and CSS
AS3.0で「合成」のアニメーションを作って下さい HTML5, JavaScript, CSS3を使って、カード選択から合成アニメーションまでのUIを考えてください AS3.0で「合成」のアニメーションを作って下さい サンプルはソーシャルアプリで使われる合成演出のAS3.0テンプレートになります。このテンプレートをアレンジして新しい合成演出を作って下さい。素材はどのように使ってもらってもOKです、自分で演出を付け足してもらっても構いません。今までにない斬新な演出をお待ちしています。 【素材をダウンロード(zip)】 HTML5, JavaScript, CSS3を使って、カード選択から合成アニメーションまでのUIを考えてください サンプルは一般的なソーシャルアプリで使われている合成機能のUIです。ベースとなるカードと素材を選択し、合成を行います。これをHTML5, JavaScript,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Drop-Down Navigation: Responsive and Touch-Friendly by Osvaldas Valutis
Grad3
IDEA * IDEA
Ie10正式リリース版のhtml5 css3
CSS3で実装されたUIエレメントのオープンソースのまとめ -CSS3 Code Snippets | コリス