IDEA * IDEAドットインストール代表のライフハックブログ
BookBlock: A Content Flip Plugin | Codrops
A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages. BookBlock is a plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow f
CSS Pie Timer | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. Editor’s Note: Kitty Giraudel made a cool demo for a “pie timer” on CodePen. It’s definitely not an intuitive or simple thing to do in CSS. Then they sent me a write up on how they did it and I’ll be darned if it doesn’t make a real nice CSS-Tricks article. Thanks Kitty
CSS Filter Effectsの使い方
こんにちは、橋本です。 今日は最新版のChromeとWebkit(Nightly Build)で実装された「CSS Filter Effects」の使い方について書いていきたいと思います。 途中のサンプルは、最新のChromeもしくはWebkitを使って見てみてください。 また、サンプルではおなじみの麦わら帽をかぶった女性の画像を使っています。 この画像の女性はレナという方だそうで、この画像は元々はプレイボーイ誌に載っていたヌード写真の一部だそうです。 wikipedia: レナ (画像データ) 「CSS Filter Effects」とは、簡単に言うと「CSSで画像に対して画像処理フィルタを適用しちゃおう！」というものです。 Photoshopの画像処理フィルタのようなものだと思っていただけるといいかと思います。 具体的には、以下のようなフィルタが実装されています。 ・色相・明度・彩度
16 Best CSS3 Transitions And Animations Tutorials
CSS3 has changed many of the older techniques, and has made everything more sophisticated and easier. It helps in making really advanced, effecting and eye-catching deigns for your website. CSS Transitions & Animations make the experience even better, with all the awesome effects. They help you make it even more interactive, beautiful and fun. These effects are especially impressive when it comes
画像一枚だけで写真を重ねたようにするチュートリアル | コリス
シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。 重ねたエフェクトはホバー時にCSS3アニメーションします。 デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。 まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index
[CSS]拡大表示する際、CSS3でぼよよ～んとしたアニメーションを加えるチュートリアル
サムネイルを拡大表示する際など、単にズームするだけでなくCSS3を使ってバウンドのアニメーションを加えるスタイルシートのチュートリアルを紹介します。 デモページ 実装 HTML 中央に配置する領域をdiv要素で確保し、スライドするパネルはdiv要素で、各アイテムはリスト要素で実装します。 <div id="item-receiver"></div> <div id="thumbnail-wrapper"> <img src="images/plus.png" id="plus" width="60"> <ul class="item-list"> <li><img class="item" src="images/item/craftertees.jpg" width="70"></li> <li><img class="item" src="images/item/gene.jpg" w
CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
text-emphasis (CSS3 Text decoration)；圏点のスタイル
noneとすれば圏点をなくすことができる。また、上記の表にはない任意の一文字を圏点として指定することもできる。 仕様書には、以下のことも定められている。 filledとopenのいずれも指定されない場合、filledとして扱われる。 filledもしくはopenのみ指定した場合、横書きではcircle、縦書きではsesameとして扱う。 圏点の文字サイズは，圏点を付ける対象となる要素の文字のサイズを50%とする。 圏点は縦書きモードでは要素の右側に来なければならず、文字を回転させてはならない。 フォントが圏点に使用する字体を持ってないか、字体があっても不適当な大きさを使用することが考えられる。ユーザーエージェント（ブラウザ）は圏点に適切なフォントを用いることができ[MAY]、ユーザエージェントによって合成してもよい[MAY]。 例 filledを指定 ぼくもできなかった。Linux がぼく
スマホ対応のjQueryベースのイメージスライダー – ヒビヅレ
jQuery Touch Swipe Slider イメージ 現在KARA-FULLのトップで使っているスライダーはjQueryベースで拡張性の高いSliderKitというのを使っているんですが、スマートフォン対応を考えるとちょっと使いにくさを感じたのでスワイプ（フリック）などの動作に対応したTouchSwipeというタッチデバイスをベースにイメージスライダーを作成しました。 俗にいうjQueryプラグインってやつです。 このTouchSwipeの便利なところはタップやスワイプだけでなく2本指でのスワイプにも対応しているという点です（使ってませんが）。ただあくまでこのプラグインはタッチデバイス用のプラグインなのでスライダーなどの機能は自分で作る必要があります。 という訳で作ったのがコチラ。 Demo：jQuery Touch Swipe Slider – jQuery animation
CSS3 Gradient Generator
The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient they generated.CSS3 Gradient Generator v2.0 Welcome to the CSS3 Gradient Generator! Please be aware that in order t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com
CSS3で実装されたUIエレメントのオープンソースのまとめ -CSS3 Code Snippets | コリス
ひま あそび
知っておくと何かと応用が利くCSS3を使った表現テクニックいろいろ
http://lab.simurai.com/umbrui/
stroll.js - CSS3 Scroll Effects
Prefixr - autocomplete your CSS with missing CSS3 vendor prefixes + Coda plugin - A link from paddykontschak - Forrst
Ultimate CSS Gradient Generator from ColorZilla