【SASS】【CSS3】画像にscaleを使ってホバーアニメーション

一個前の記事のオマケみたいなもの
これも今日のコーディングで作ったのでついでに載せとこうかなと
一個前の記事内 「@mixin anime」使ってます。

動きはあらかじめ拡大画像を表示させておき、ホバーすると標準サイズの画像に縮小するって感じです。

SASS


@mixin imgscale($scale-x : 1,$scale-y:1){
    -webkit-transform: scale($scale-x,$scale-y);
    -moz-transform: scale($scale-x,$scale-y);
    -o-transform: scale($scale-x,$scale-y);
    -ms-transform: scale($scale-x,$scale-y);
    transform: scale($scale-x,$scale-y);
}

			a {
				img {
					@include imgscale(1.1,1.1);
					@include anime;
				}
			a:hover {
				img {
					@include imgscale(1,1);
					@include anime;
				}
			}

配布されてるmixin使うのが手っ取り早いのでしょうが、人の作ったやつってどうも苦手で自分用のを作らないとダメな性分^▽^;

【SASS】【CSS3】ハンバーガーボタンに動きをつける

ハンバーガーメニューで動きのあるものを見つけて、これいいなぁと思ってたので、ちょうど今日コーディング依頼があったのでサクっと作ってみました。つっても全部SASSです。例のごとくsampleなどは面倒なのでないです。そのうち、このブログにも反映させとうかなー。できたてほっかほかですよー。(byライスの人)

動きとしては、クリックすると2個目の棒線が消え、1個目・3個目の線が斜めにアニメーションするようになっています。

SASS

@mixin anime {
    -moz-transition: -moz-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    transition: transform 0.1s linear;
}
@mixin rotate($rotate : -10){
    -webkit-transform: rotate($rotate + deg);
    -moz-transform: rotate($rotate + deg);
    -o-transform: rotate($rotate + deg);
    -ms-transform: rotate($rotate + deg);
    transform: rotate($rotate + deg);
}

@mixin button {
	display:block;
	width:40px;
	height:40px;
	border:none;
	@include kadomaru(10px);
	background:$color5;
	@include abs-tr(25,15);
	
	span {
		display:block;
		height:3px;
		width:90%;
		margin:5px auto;
		background:$white;
		@include kadomaru(5px);
		@include anime;
		@include rotate(0);
	}
}
@mixin buttonclose {
	span:nth-child(2) {
		display:none;
	}
	span:nth-child(1) {
		@include anime;
		@include rotate(-45);
		position:relative;
		top:4px;
	}
	span:nth-child(3) {
		@include anime;
		@include rotate(45);
		position:relative;
		top:-4px;
	}
}


	button {
		display:block;
		@include button;
		
	}
	button.close {
		@include buttonclose;
	}

HTML

 <button><span></span><span></span><span></span></button>

[CSS3]レスポンシブで メディアクエリ使う際の注意点 印刷でレイアウトが崩れる対処

クライアントさんから指摘あるまで気にしてなかったのですが、
レスポンシブでメディアクエリで画面幅に沿ってCSS切り替えする際に

@media screen and ~

の記述だと 文字通り 「画面のみ」の表示となってしまうので

<style type="" media="all">

で対応させていても、スルーされます。なんてこったい。

対処方法は

@media print, screen and ~

と書くだけですが、スマホ向けのCSSでも書いてしまうと、
印刷プレビュー時にスマホのレイアウトが出てきてしまうので
基本はPCのみでOKだと思います。

印刷プレビュー マジであせりました…