『今年中に読んでおきたい！2012年人気の記事10本！』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 今年も残すところあとわずかですね。いかがお過ごしですか？ スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。 このブログの編集委員なんかもやったりしています。 本日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します！ 【デザイン】ピグアイテムのイラストレーションについて 長年アメーバピグのデザインを支えてきたデザイナー、青山の記事。 ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上
HTMLの用意とリセットCSSの作成 (1/4)
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 連載第2回では、レスポンシブWebデザインの設計と素材の準備をしました。今回は、ページの基本となるHTMLとCSSの初期設定を記述します。 ベースHTMLの記述 最初に、「枝豆隊」の基本となるHTMLを用意しましょう。このサイトでは、XHTMLではなくHTML5を採用しています。HTML5はオフライン機能や現在地特定機能などのモバイルデバイ
jQueryとCSS3でダイナミックに動くコンテンツスライダー:phpspot開発日誌
Fullscreen Slit Slider with jQuery and CSS3 | Codrops jQueryとCSS3でダイナミックに動くコンテンツスライダー。 アニメーションがカッコよくてネタはなくとも実装したくなるかもしれないスライダーです。 デモページ どうやって実装しているんだろう（＾＾；）とか思いつつ、チュートリアル記事もあるのでそこで学習できます。 プログラム一式ダウンロードも出来るので素材としても。 関連エントリ レスポンシブなjQueryスライダー実装プラグイン８個 AppleっぽいデザインのjQueryスライダーサンプル 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com