NOT KNOWING

ライフハックでおしゃれなブログを目指します

NOT KNOWING

Love the life you live. Live the life you love.

cssまとめ1


よく使うやつ

・ひし形を中心に構成されているサイト cssについての技術がかなりすごい上にそのテクニックを書いてくれているサイト
http://theorthodoxworks.com/


animation関係

・ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現!
http://photoshopvip.net/75004

・@keyframesを利用して、背景色を動的に変更!
http://www.webcreatorbox.com/tech/css3-animation-colour/

・画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう
http://www.html5-memo.com/webtips/css3-loading/

cssで出来るアニメーション33選
http://coliss.com/articles/build-websites/operation/css/css-most-awesome-techniques-of-2015.html

 

cssテクニック(ホバー時のオシャレな動き かなり高度な動きをする 英語サイト)
http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/

cssで形を作る方法(英語テキスト)
https://css-tricks.com/

・枠線のアニメーション
http://qiita.com/nekoneko-wanwan/items/7fc1e5b808bbb06668c0

・テキストにホバーすると中央から線が伸びる等のテクニック10選(結構使えそうなもの多い)
http://commte.net/blog/archives/4887

・画像を斜めにくり抜く、画像を文字でくり抜く等のテクニック16選(基本的なものが多い)
commte.net/blog/archives/5111

 


・flexboxの使い方
http://www.webcreatorbox.com/tech/flexbox/

・flexboxの使い方2
http://liginc.co.jp/web/html-css/css/21024

flex_boxのプロパティを画像で説明
http://scene-live.com/page.php?page=59

cssの基本(floatとかを直観的に教えてくれる) 更新はされない(完成したサイト)
http://ja.learnlayout.com/

・幅サイズ不明のdiv要素を中央揃え等のテクニック28選
http://photoshopvip.net/84345

・border dottedの間隔をCSSのみで調整する
http://blog.funxion.jp/139/

・アイデアの宝庫!CSS3を使ったUI表現・テクニック集 レスポンシブな円形メニュー等
http://w3q.jp/t/4458

CSSで実装するハンバーガーメニュークリック時のエフェクト 10+
http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html

CSS(CSS3)のみでLightbox風モーダルウィンドウを作成する方法
http://black-flag.net/css/20110201-2506.html

・HTML/CSSで実装できる!今どきデザインのホバーエフェクト30個まとめ
http://photoshopvip.net/88174

・アイコンをCssだけで作る
http://one-div.com/

・吹き出しをつくる
http://chun-oki.sw8field.com/webworks/20150411/2489.html

cssのみで吹き出しを作る
https://zxcvbnmnbvcxz.com/pure-css3-balloons/

・横に水平線のあるテキスト
こんな感じ -> ――――― abc ―――――
http://terkel.jp/archives/2014/01/text-with-horizontal-line/

CSSのすぐに使える小技から驚きのスゴ技まで!CSSアニメーションの素晴らしいアイデアのまとめ ゲームボーイカラーcss
http://ordinary-days.wataamee.com/

・Stopwatch in CSS - CSS3だけで実装されたストップウォッチ
http://www.moongift.jp/2013/11/stopwatch-in-css-css3%E3%81%A0%E3%81%91%E3%81%A7%E5%AE%9F%E8%A3%85%E3%81%95%E3%82%8C%E3%81%9F%E3%82%B9%E3%83%88%E3%83%83%E3%83%97%E3%82%A6%E3%82%A9%E3%83%83%E3%83%81/

・CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」
http://co-jin.net/web/movie-credits

・background-size:cover;で背景全面を画像にする方法
http://scene-live.com/page.php?page=71

 

 

#cssコーディングルール

・細かすぎて伝わらないCSSのコダワリ選手権
http://qiita.com/sawadays0118/items/109b19efeab6775b9553

・HTML,CSSコーディングで気をつけたい基本的なポイント
http://qiita.com/sawadays0118/items/4720d9c0d44e937fb2c2#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA

・vertical-alignの詳しい説明
https://html5experts.jp/takazudo/13464/

・viewportについての説明
http://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

・vertical-alignについての詳しい説明
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/vertical-align/

・displayプロパティのnoneとhiddenの違い
http://qiita.com/rico/items/0f645e84028d4fe00be6

z-indexについて
http://no1026.com/archives/104
http://morobrand.net/mororeco/css/z-index/
http://designhack.slashlab.net/how-z-index-works-in-css3/

cssの単位あれこれ
https://moonglows76.tumblr.com/post/103016608753/%E3%81%82%E3%81%AA%E3%81%9F%E3%81%8C%E7%9F%A5%E3%82%89%E3%81%AA%E3%81%84%E3%81%8B%E3%82%82%E3%81%97%E3%82%8C%E3%81%AA%E3%81%84css%E3%81%AE7%E3%81%A4%E3%81%AE%E5%8D%98%E4%BD%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6