Effeckt.css
Modals # Source: Codrops From Below From Above Slide In (right) Slide In (bottom) Newspaper Side Fall Sticky Up 3D Flip (horizontal) 3D Flip (vertical) 3D Sign Just Me 3D Slit 3D Rotate Bottom 3D Rotate In Left Blur Let Me In Make Way! Slip From Top From Top, Tilt Fall From Top to Bottom From Bottom to Bottom From Top to Top
Swapping Out Text, Five Different Ways | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! It’s a common need in web apps: you click something and the text of the thing you just clicked changes. Perhaps something simple like a “Show” button that swaps to “Hide”, or “Expand Description” to “Collapse Description.” This is a fairly simple thing to do, but there are various considerat
Centering Percentage Width/Height Elements | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That’s great if you know the width and height of the elemen
いまさら聞けないRetina対応のための「ピクセル」の話
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ
ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。 解除して散っていくのも！ 実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。 デモページ これをベースにいろいろなアイデアが膨らんできますね。 参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。 <!-- start header --> <header id="head"> <div class="container"> <
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan
Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。 一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
三点リーダー(…)を真ん中に表示する方法-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
こんにちは、ひらたです。わたしは「…」を多用するのが好きなのですが、そのせいか、なんの前触れもなく、三点リーダーについての話題を振られてしまったので、ちょっととまどいつつも書いてみたいと思います... そもそも「…」は日本語では三点リーダーと呼ばれたりします。もともと日本語にはなかった表現なのですが、欧文からの翻訳のなかで日本にも定着していった(Wikipedia調べ)ようですね... で、なぜ三点リーダーが話題になったかというと、Movable Type関連情報が数多く紹介されているブログ「小粋空間」に「三点リーダが真ん中に表示されない理由」というエントリーがあがったからのようです。日本語では、ちょうどフォント高の真ん中にあってほしい「…」が、ブラウザ上では「…」のように、ベースラインの上に表示されてしまうようです。なるほど... エントリーでも解説されているのですが、こちらは欧文フォン
WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）
これがずっとやりたかったんだよ！すべてのソリューションはかちびとで問題ない。@shintarowfreshです。 もうとにかくWordPressでアイキャッチ画像を用意するのが面倒極まりない。とはいえ設定しないとみっともない。という2重苦を抱えていたのですが、これからは開放されます、気持ちいい！！ WordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法 – かちびと.netWordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法 – かちびと.net 設定に必要なIDの調べ方はコチラに。 Quick Tip: Saving a Default Post Thumbnail | Wptuts+ 後はもう書いているコードをコピペして終わり、イッツダン！ すると こんなかんじで、新規投稿の際、指定のデフォルトの画像がハマっているわけで。 上書きしたかったら、新し
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
知ってるとちょっと役に立つCSSのTipsまとめ
ちょっとのつもりでCSSサンプルコードチマチマ書いて記事化してたら10件以上たまってました。 基本的に私はWeb屋さんではないので結構いい加減なコーディングしてたりもしますが、WEBサイト制作ではよく使いそうなプロパティについて使い方を説明してますのでなにかと参考にしていただければ。 こういった記事は基本的に「知らない人向け」に書いて（だからこそ役に立つ）ますので、不必要な部分はあえて端折ったりしている一方で必要なところはやや冗長と思われても出来るだけ詳しく書いてるつもりです。あくまで初学者向け。 というわけで当ブログCSSネタまとめ2013年2月版ということで。 1.長文テキストを段組 CSSで文書の段組表現を行うcolumnプロパティの使い方 一連の長～い文章を1つのボックス内で段組するにはどうすればよいでしょうか？というお話。columnは地味というかあんまり知られてないプロパティっ
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
Takazudolog - OOCSSとSass
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://dan-silver.github.io/ElementTransitions.js/
3streamer.net