CSSで無限回転のスライドショーを制作する方法 | エンタープライズ | マイコミジャーナル
A Web Design Community curated by Chris Coyier. 写真データがひたすら右から左に流れているサイトに遭遇することがある。それは何らかのイベントで撮影したであろう写真データを流すものであったり、製品の写真を写すものであったりさまざまだが、煩雑なUIでなければなかなかクールな見た目になる。 この効果はJavaScriptを利用しなくともCSSを使うだけで実現可能だという説明がCSS-Tricksにおいて「Infinite All-CSS Scrolling Slideshow」として掲載された。シンプルなCSS3で構築されており興味深い。ここでのアイディアは、流しておきたい画像を横長の1つの画像として用意しておき、それをkeyframeでアニメーションさせるというものだ。 たとえば次のような横長の画像を「summer.jpg」として用意したとする。
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
圧倒的な存在感。HTML5/CSS3/JavaScriptで作られたイラストレーションアプリ·Ghost Writer MOONGIFT
Ghost Writerは万年筆、マジック等をリアルに再現した絵描き用ソフトウェア。 Ghost WriterはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。HTML5は徐々に本格導入されつつあるが、まだまだ実験的なプロダクトが多い。だがプログラマーにとっては、今こそ遊べる状況だ。色々試し、遊ぶ中で新しい可能性を見いだすことができる。 ものすごくリアル 今まではローカルでしかできなかったような操作がWebベースで実現するようになっている。特にペイント系は面白い。そこで今回はGhost Writerを紹介しよう。 Ghost Writerは古めかしい紙のようなボックスにペンを使って書き込めるソフトウェアだ。驚くのはそのリアル感ある存在感だろう。万年筆、マジック、スプレーといったペン種があり、切り替えて絵を描くことができる。なお筆者環境では色を変えることはで
覚えておくときっと役立つ。Webアプリケーション用のリッチなUIフレームワーク·Alloy UI MOONGIFT
Alloy UIは数多くのウィジェットを提供するUIフレームワーク。 [/s2If] Alloy UIはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア。Webの役割は大きく変わってきている。シンプルなホームページと言われた時代は終わり、Webアプリケーションやソーシャルサービスのようにオンライン上でやり取りされるデータが増している。 入力補完 それに伴ってWebベースでもリッチなUIが求められるようになってきた。日付をカレンダー入力したり、ソートやドラッグアンドドロップなどを実装して欲しいと言われることも多い。そのようなニーズに幅広く答えられるライブラリがAlloy UIだ。 Alloy UIは実に多くのコンポーネントを提供する。入力補完、グラフィカルなボタン、カレンダー、画像が定期的に切り替わるスライダー、カラーピッカー、グラフ、ダイアログ、インラインエディタ
Building a pure CSS 3D City – Matteo Spinelli's Cubiq.org
I was recently experimenting with CSS 3D transforms. Is it possible to build a 3D city with just CSS? Yesterday I’ve posted on twitter about a quick CSS 3D demo, here comes the follow up blog post. Most of you are aware that Safari and most decent modern browsers support CSS rotation. No javascript nor plugins involved. The following code rotates #element by 15 degrees. #element { -moz-transform:r
Rotating color cube box with CSS3 animation, transforms and gradients
Spinning spiraling cube using CSS3 3D animation and 3D transforms. Note: Hover the black box or cube to pause the animation. Please view in Safari, iPhone or iPad. If the animation freezes while viewing in wide-screen and at the same time hovering the viewport with the mouse, simply refresh the browser to restart the animation. All images used come from WISE - Multimedia Gallery and are used in th
超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル:phpspot開発日誌
How to Create CSS3 Speech Bubbles Without Images JavaScript & CSS SitePoint Blogs 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。 吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。 次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。 影もついてますね。 角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。 border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった
Bigshot VR
Three months ago I released Bigshot, mostly because I wanted a better way to present big images on this blog. Now it also has experimental support for VR panoramas, as users of WebGL-capable browsers can see on the Bigshot VR demo page[a]. The code is still in development, so don't be surprised if you find bugs. Here's an example VR panorama. I assembled it from 38 photos using Hugin[b] and Photos
CSS3リファレンス
背景 background-clip …… 背景の適用範囲を指定する background-origin …… 背景の基準位置を指定する background-size …… 背景画像のサイズを指定する 角丸 border-radius …… 角丸をまとめて指定する border-top-left-radius …… 左上の角丸を指定する border-top-right-radius …… 右上の角丸を指定する border-bottom-left-radius …… 左下の角丸を指定する border-bottom-right-radius …… 右下の角丸を指定する 画像ボーダー border-image …… 画像ボーダーを指定する border-image-source …… 画像ボーダーに使用する画像ファイルを指定する border-image-slice …… ボーダー画像の
Bigshot VR - マルチレゾリューションパノラマVRを実現するHTML5/css3ライブラリ - QTVR Diary - 京都・日本・世界のパノラマムービー情報
Zoomifyに始まりkrpanoでとどめを刺した、超巨大解像度画像の多段解像度読み込み方式（マルチレゾリューション＝ MultiResolution）ですが、今のところHTML5/css3では"実用化"しているライブラリは無いと言えるでしょう。 しかし昨年秋頃から実験的に開発を行っている人が居ます。そのライブラリの名をBigshot VR「Bigshot VR」と言います。 ■ Bigshot VR http://monochrome.sutic.nu/2011/01/03/bigshot-vr.html 例として、オープンソースのFlashパノラマVRプレイヤーライブラリ「PanoSalado」と比較していますが、遜色無い出来に驚嘆するばかりですね サンプルは、下記URLでご覧頂けます。 ■ Bigshot VR Panorama Demo http://monochrome.s
[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
CSS3だけでアクションを実現するフレームワーク·CSS3 Action Framework MOONGIFT
CSS3 Action FrameworkはCSS3製のオープンソース・ソフトウェア。HTML5に注目が集まっているが、同時に見逃せないのがCSS3だ。良く角丸やドロップシャドーがCSSだけでできるようになると言われているが、他にも様々な効果がCSSのみで可能になる。 CSSだけでオブジェクトの回転 これまでは同様の効果を出すためにはJavaScriptの利用が必須だった。だがこれからは簡単なアクションであればCSSだけで実現できるようになる。そのサンプルとして注目したいのがCSS3 Action Frameworkだ。 CSS3 Action FrameworkはJavaScriptを使わずCSSのみで作られている。だがマウスをオブジェクトの上に載せたり、クリックによって効果を出せるようになっている。効果はサイズの変更や回転とその組み合わせ、ドロップシャドー、さらに消失などだ。 Goog
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3D Translateの実装例
HTML5とCSS3を使いこなしたくなるフレームワーク15選
CSS3、HTML5、jQuery、デザインなどウェブ制作のテクニックが動画で学べるサイト
CSS3で作られた3Dなエフェクトのプレゼンスライド
IDEA * IDEA
http://www.subcide.com/articles/pure-css-twitter-fail-whale/