【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>

【jquery】【CSS】display:noneでgoogle mapのiframe内の表示位置がずれる対処(簡易)

スマホでgoogle mapを複数埋め込んでtoggleで切り替えてたんですが
diplay:noneになると、地図の表示位置が北極とか表示されて遠すぎやろ!
と思わず関西弁つっこみを入れるこのごろ。

先送りしてたので、いい加減対処しないとなーと思ってぐぐってみても
clickで該当iframeを再読み込みなどがあるのですが、mapが複数ありすぎてちょっと断念。
もっと簡単なのが良いです。

て、ことでvisilityクラスを使ってtoggleClassで切り替えたところ一応できました。
(邪道かもしれない)


<p>タイトル</p>
<div><!--←最初は表示させるタブ-->
ううう
</div>

<p>タイトル2</p>
<div class="hidden">
いいい
</div>

<p>タイトル3</p>
<div class="hidden">
あああ
</div>
.hidden {
	visibility:hidden;
	height:0;
	margin:0;
	padding:0;
	overflow:hidden;
	}
    $(function(){
        $("p").on("click", function() {
            $(this).next().toggleClass("hidden");
            $(this).toggleClass("opn");
            google.maps.event.trigger(map, 'resize');
            map.setCenter(Latlng);
        });

    });

こんな感じです。

            google.maps.event.trigger(map, 'resize');
            map.setCenter(Latlng);

この2行は地図の中心地を再定義するものらしい…(あんまり実感なし)

IE7/IE8で背景透過が効かない場合

通常の↓↓では効かないので、

	filter:alpha(opacity=70);

こっちですると大丈夫みたいです。

        background-color:rgba(0, 0, 0, 0.5);
        filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000,endcolorstr=#7f000000,gradienttype=0);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000)";
        zoom:1;

うーんオーバーレイではまった。

css

EC-CUBE viewport拡大許可でipadがずれたときの対処方法

スマホでPCサイトを見るという特殊なカスタマイズを加えていたので、
ipadで見るとviewportが邪魔をして拡大率がすさまじいレイアウト崩れが発生していた修正

とりあえず phpでipadかの判定を行い、ipadの場合はviewportを出力しないで一気に解決b
widthも1024pxかレイアウトの最大幅にあわせることで直りました。

ふー、よかったよかった。

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
	#container {width:1024px;}
	}

<!--{php}-->
$isiPhone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if($isiPad){
    echo "";
}else{
    echo "<meta name=viewport content=width=device-width, initial-scale=0, maximum-scale=1, user-scalable=1 />";
}
<!--{/php}-->

[CSS]:notのメモ

具体的な使い方は今度調べてみようー
参考:http://weboook.blog22.fc2.com/blog-entry-382.html

#header li:not(.class) a:hover{処理}

これで、ヘッダ要素 のli.class以外のa要素ホバーの指定ができます。
たぶんあんまり使い道はないですが、ちょうど私は必要だったんで大助かりですー。

XPサポート終了にともなって、CSS3は気兼ねなく使えるようになるかな
IE7問題がありますが。。。。

css

サムネイルつきリストのメモ

スマホサイトでよく見るパーツのコードサンプル集
http://07design.net/blog/?p=477

こちらのサイトさんのサムネイルつきリストはスマホに限らず
かなり使うことが多いので抜粋してメモメモ

<h3>サムネイルつき矢印リスト2</h3>
<!--サムネイルつき矢印リスト2-->
   <section class="list4">
          <ul>
          <li><a href="#"><img src="thumbs.png"><strong>MENU1</strong>texttexttext</a></li>
          <li><a href="#"><img src="thumbs.png"><strong>MENU2</strong>texttexttext</a></li>
          <li><a href="#"><img src="thumbs.png"><strong>MENU3</strong>texttexttext</a></li>
          </ul>
   </section>
<!--/サムネイルつき矢印リスト2-->
/* サムネイルつき矢印リスト2 */
.list4 ul{
 border-bottom: 1px solid #ccc;
 margin-left: 10px;
 margin-right: 10px;
 }
 .list4 ul li{
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 border-top: 1px solid #ccc;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 height: 45px;
 margin: 0px;
 }
 .list4 ul li a{
 background: url(list_mark1.png) no-repeat 100% 50%;
 color: #666;
 display: block;
 height: 45px;
 margin: 0;
 padding: 0 20px 0 0;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 text-decoration: none;
 }
 .list4 ul li a strong{
 color: #000;
 display: block;
 font-weight: bold;
 padding-top: 5px;
 }
 .list4 ul li img{
 float: left;
 height: 45px;
 width: 45px;
 margin-right: 10px;
 }
css

htc.js使うときはzoom:1とposition:relative入れる

htc.jsでIE8だけ角丸かけている背景色が出てこないので、
なんでやねーんとひとり突っ込みをしつつ調べてたら
zoomとpositionですよ!入れ忘れてた!

そりゃー無理だよーってことでメモメモ

ふう。。。

    zoom: 1;
    position:relative;
css