CSS3で画像キャプションのマウスホバーアニメーション5種 | webOpixel

2015/12/25 32 users webOpixel CSS3

Posted: 2015.12.25 / Category:  HTML&CSS  / Tag:  CSS3 CSS3オンリーで画像をマウスオーバーするとキャプションがアニメーションして表示するというサンプル集です。 ディレイやイージングを使用してちょっとだけ凝った感じに見える風にしてみました。 基本的なHTML 基本的なHTMLは下記になります。figureでマークアップしてみました。 HTML... 続きを読む

CSSだけで縦書きを表現する | スターフィールド株式会社

2015/12/14 31 users 縦書き CSS Demo span 定石

和風なwebサイトの場合、縦書きのデザインをすると思います。 以下のサイトなんかも縦書きレイアウトをデザインを取り入れています。 グッと和風感がでますよね！！ 深山山荘オフィシャルサイト 縦書きの表現は、画像か１つずつ文字をspanかなんかで囲んでっていうのが定石だったのですが、CSS3で簡単に縦書きが出来るようになっています。 (IEは独自の表現で出来るようです) とりあえず、DEMOを作りまし... 続きを読む

最短で覚える！HTML5/CSS3を無料で学べるサービス・ツール10選

2015/12/07 136 users 最短 CSS3 HTML5 CSS サービス・ツール10選

いまも今後も進化が止まらない「WEB」を学びたい人たちにとって、必ず学ばなければいけないのがHTMLとCSSです。最新のHTML5/CSS3では、メディアやローカルストレージ関連機能の実装が簡単になりさらに実用性のある言語へと変化しています。しかしながら、HTMLとCSSはプログラミング言語ではないので比較的簡単に学習することができます。さらに学習サービスやツールを活用すれば、最短でHTML5/C... 続きを読む

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary

2015/11/04 639 users padding border phiary height 原因

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-s... 続きを読む

HTML5/CSS3 モダンコーディング を執筆しました - エンジニアをリングする

2015/11/01 190 users コーディング CSS エンジニア HTML 見本誌

2015-11-02 HTML5/CSS3 モダンコーディング を執筆しました CSS HTML 書籍執筆 本 このたびはじめて技術書を執筆させていただきました！ HTMLとCSSのコーディングの本です。本日から全国の書店での販売＆Amazonなどでの電子書籍の販売が始まります。 HTML5/CSS3 モダンコーディング - Amazon 昨日見本誌が届きました！！ ちゃんと本になってるー！！！ ... 続きを読む

CSS3を使って画像をスライド（平行移動）させてみる - 攻めは飛車角銀桂守りは金銀三枚

2015/10/08 27 users スライド 飛車角銀桂守り 金銀三枚 CSS3 WebKit

2015-10-08 CSS3を使って画像をスライド（平行移動）させてみる はてな シェアする Google+ Pocket CSS3を使って画像をスライド（平行移動）させてみる CSS3で画像を画像をスライド（平行移動）させる使用するCSSは <style type="text/css"> .slider { animation: slider1 4s infinite; } @-webkit-... 続きを読む

商用無料でしかも高品質！レスポンシブ対応の美しくデザインされたHTML5/CSS3のテンプレートのまとめ | コリス

2015/09/11 292 users ポートフォリオ かっこいいエフェクト 縦長ページ コリス 紹介

今時の繊細でかっこいいエフェクトを備え、美しくデザインされたレスポンシブ対応のランディングページ、プロダクトページ、縦長ページ、ポートフォリオ、ブログなど、HTML5/CSS3で作成された商用利用無料のテンプレートを紹介...記事の続きを読む 続きを読む

意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]

2015/09/02 288 users Ferret table フェレット elem コピペ

コピペで使えるtableのサンプルコード19選 1.CSS3のセレクターで作るストライプテーブル http://ascii.jp/elem/000/000/462/462099/ 汎用性の高いシンプルなストライプテーブルを作ることができるサンプルコードです。 CSS3のセレクターを使って、行・列ごとに背景色が違う典型的なテーブルをデザインします。 以前のCSS1、2の場合だと背景色を変えるのは結構... 続きを読む

CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ - PhotoshopVIP

2015/08/19 407 users エフェクト スタイリング PhotoshopVIP 作品

Webデザインにおける文字テキストデザインは、これまでにないスタイリッシュなエフェクトが登場しています。新しいCSS3プロパティを利用し、JavaScriptでカスタマイズすることで、より魅力的な作品に仕上げます。 今回は、今後のデザインプロジェクトで活用したい、CSS3を利用した美しいテキストエフェクトをまとめてご紹介します。どのようなスタイリングがされているのか確認することもでき、コピー＆ペー... 続きを読む

[CSS]Webページでよく利用されるテクニックに役立つ！使い方をしっかりマスターしておきたい便利な5つの疑似クラス | コリス

2015/08/07 142 users コリス セレクタ CSS 疑似クラス HTML

CSS3のセレクタには便利なものがたくさんあり、複雑なHTMLやJavaScriptを使用しなければ実現できなかったことが非常に簡単なコードで実装できます。 Webページでよく利用されるテクニックに役立つ便利な5つの疑似クラスを紹介します。 5 Lesser Used CSS Selectors 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。... 続きを読む

コピペで簡単実装！CSS3でオシャレなデザインのサンプルコード23選｜ferret [フェレット]

2015/07/14 386 users Webpark Ferret フェレット コピペ 基調

CSS3で簡単に実装できるサンプルコード一覧 1.CSS3を使って美しく装飾されたテーブルの作り方｜Webpark http://weboook.blog22.fc2.com/blog-entry-329.html ホームページ制作に関するあらゆるお役立ち情報を配信する「Webpark」の記事です。 ブルーを基調とした、シンプルでスタンダードなデザインのテーブルが作れるサンプルコードを掲載していま... 続きを読む

CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS LAB

2015/07/07 351 users mix-blend-mode ICS LAB ICS池田

こんにちは、ICS池田です。 mix-blend-modeというCSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。今まではChrome CanaryやFirefox Aurora、WebKit Nightly Builds等の開発用ブラウザでしか使えず、実験的な印象が強かったmix-blend-mode。しかし最近(2015年5月)になってIEを除く主要... 続きを読む

Web制作時に備えておきたい便利なチートシートのまとめ -Bootstrap, WordPress, CSS3, Git, SublimeTextなど | コリス

2015/06/11 410 users Git SublimeText コリス デベロッパーツール

BootstrapやFoundationなど人気のフレームワーク、CSSの各フレームワークの比較、WordPressのテーマ作成やコピペで利用できるコード集、Gitのコマンドやフロー、iOS/Androidのグラフィックガイドライン、ChromeのデベロッパーツールやSublimeTextやEmmetなど、Web制作に役立つ便利なチートシートを紹介します。 紹介している主なチートシート Boots... 続きを読む

HTML5/CSS3のニュースやTIPSなどのまとめ (2015年5月30日) :: dotHTML5

2015/05/30 24 users Tips dotHTML5 CSS3 HTML5 ニュース

フォントになんでお金かかるの？この一言にウェブ業界怒り爆発 (トゥギャッチ) そういやフリーランスになって5年目なので、自営業のメリットについて書いておくか (まだ東京で消耗してるの？) スマホサイト以外で買い物は無理 - 高校生はスマホオンリー (CNET) Firefox格安スマホの夢、やぶれる - モジラCEOが頓挫を告白 (iPhone Mania) 相次ぐデザイン会社の買収から考える -... 続きを読む

Webページをブラウザから印刷する際に、最適化するためのCSSのフレームワーク -Hartija | コリス

2015/05/27 79 users コリス MED フレームワーク CSS 見出し

Hartija CSS Print Framework -GitHub Hartijaではページ全体、見出しやテキスト、画像、リンク、テーブルを印刷用にスタイル定義し、印刷時には非表示にさせる要素を定義します。以前紹介した時に比べCSS3/HTML5対応でいろいろなスタイルが増えています。 Hartijaの使い方 Hartijaの「print.css」を外部ファイルとして加えるだけです。 「med... 続きを読む

無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ | コリス

2015/05/15 547 users ポートフォリオ かっこいいエフェクト 縦長ページ コリス 無料

レスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、デザインやHT...記事の続きを読む 続きを読む

[コピペで使える！CSSだけでアニメーションつきハンバーガーメニューアイコンを作ろう] 他 海外のCSS情報 | WEBデザインすーぷ

2015/05/06 84 users CSS コピペ WEBデザインすーぷ 呼び名 エフェクト

今でも三本線（スリーラインアイコン）などと呼ばれることもありますが、ハンバーガーメニューアイコン（ハンバーガーアイコン）という呼び名もある程度浸透したこのアイコン、コピペでさくっとサイトに取り入れてみましょう。目次 アニメーションするCSSのみのハンバーガーメニューアイコン あなたがCSS3のボックスシャドウで作ることができる18の驚くべきエフェクト 30のCSSページプリロードアニメーション イ... 続きを読む

最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス

2015/04/23 612 users コリス Flexbox ヴィジュアル ドラフト 各プロパティ

Flexboxとは、要素のサイズが不明なものでもダイナミックに変化するものでも柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガ... 続きを読む

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 | NxWorld

2015/04/05 443 users エフェクト フラッシュ スライド ホバー時 拡大縮小

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいという時に使えそうなエフェクトのサンプルです。CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 ... 続きを読む

CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ - Photoshop VIP

2015/04/01 385 users CSSスタイリング Yes Illustrator CSS

多くのブラウザがCSS3に対応したことで、これまでPhotoshopやIllustratorなどのデザインソフトでしか表現できなかったテキストエフェクトが、CSSスタイリングのみでも実現できるようになりました。 海外デザインブログDesign Your Wayで、CSSでデザインされたクリエイティブなテキストエフェクトをまとめたエントリー「Yes, You Can Actually Make Th... 続きを読む

CSS3を使ったアニメーションを70種類以上ダウンロードできるサイト「AniCollection」 ｜ ライフハッカー［日本版］

2015/03/30 121 users ダウンロー アニメーション ライフハッカー カメきち マウス

カメきち  - Webサービス,デザイン,趣味  01:00 PM CSS3を使ったアニメーションを70種類以上ダウンロードできるサイト「AniCollection」 「AniCollection」はCSS3を使ったアニメーションを70種類以上ダウンロードできるサイトです。さまざまなボタンが用意されており、マウスオーバーするとアニメーションが動きます。気になるアニメーションは複数まとめてダウンロー... 続きを読む

初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 - paiza開発日誌

2015/03/26 848 users paiza開発日誌 谷口 CSS CSS3 HTML

2015-03-26 初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 Photo by Jeff Golenski こんにちは。谷口がお送りします。HTML、CSSを習得して「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」等と思っている方は多いのではないかと思います。HTMLとは、We... 続きを読む

ここまで動かせる！楽しいcss アニメーションのサンプル集 | コムテブログ

2015/03/16 147 users アニメーション コムテブログ サンプル集 Flash ソース

小気味よいアニメーションを用いたWebサイトを国内でも多く見かけるようになってきました。CSS3により画像編集やFlashが減りメンテナンス性も向上しています。2015年もアニメーションを取り入れるサイトは増えていくでしょう。 今回はCSSアニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 もくじ エフェクトサンプル １．ア... 続きを読む

CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」:phpspot開発日誌

2015/03/11 49 users phpspot開発日誌 animatedModal.js

CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」 2015年03月11日- animatedModal.js CSS3で気持ちよく動くフルスクリーンモーダル実装「animatedModal.js」 モーダルというとポップアップウィンドウを思い浮かべますが、フルスクリーンで大きく使いやすそうなモーダル実装が出来ます。 フラットデザインで、タッチ端末にも使いやすそ... 続きを読む

css3アニメーションのレパートリーがきっと増える！動きの参考になる21サイト | 株式会社WEB企画スタッフブログ

2015/03/06 157 users レパートリー プロパティ 近頃 アニメーション 普及

css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9（IE6～IE8を含む）のシェアが低下してきていることが挙げられると思います。 ですが裏を返してみると、css3に対応しているブラウザは年々増えてきていますので、今後ますます実装するサイトが増えていくのではない... 続きを読む