2015年6月9日火曜日

Let's put the CSS Wapuu on a Google Blogger!! #wck2015

mismith227, one of WordCamp Kansai 2015 organizers, has created a css version of Wapuu!! It's wonderful. I introduce some example.

Related Information



CSS Wapuu



















How to use it.




<head>
...
<link href='//mismith0227.github.io/csswapuu/style.css' rel='stylesheet' type='text/css'/>
...
</head>

<body>
..
<div class="canvas">
* import "div" tag from <div class="canvas"> to </div> in https://github.com/mismith0227/csswapuu/blob/master/index.html
</div>
...
</body>

*Of course, "@import" in a css file can be used instead of <link>.

How to change the scale.

I wanna use it to a gadget (widget) in my Google Blogger (this site), but the original size is too big!! My request was answered by hideokamoto, one of WordCamp Kansai 2015 organizers!! Thanks, hideokamoto!!

First of all, please import the stylesheet "https://mismith0227.github.io/csswapuu/style.css".

Secondly, please add "canvas-cutdown25" css setting in <body>.
In case of a gadget in a Google Blogger, select "HTML/JavaScript"  gadget and input the following stylesheet and tags.

25% cutdown 


<style type="text/css">
.canvas-cutdown25{
  height: 100px;
  transform: scale(0.25);
  -webkit-transform-origin-x: 0;
  -webkit-transform-origin-y: 0;
  -webkit-transform: scale(0.25);
  -webkit-transition: all 0.25s linear;
}
</style>

<div class="canvas-cutdown25">
* import "div" tag from <div class="canvas"> to </div> in https://github.com/mismith0227/csswapuu/blob/master/index.html
</div>



















If you use some scale version of a css wapuu, you had better seperate "canvas" class.

Original size


<style type="text/css">
.canvas-original{
  height: 400px;
  transform: scale(1);
  -webkit-transform-origin-x: 0;
  -webkit-transform-origin-y: 0;
  -webkit-transform: scale(1);
  -webkit-transition: all 1s linear;
}
</style>

<div class="canvas-original">
* import "div" tag from <div class="canvas"> to </div> in https://github.com/mismith0227/csswapuu/blob/master/index.html
</div>


















How to add a external css file in a Google Blogger

Yes, it's very important!!

Please access to "Edit HTML" button in the Template in the administrative menu in a Google Blogger.


Then, please insert <link href='//mismith0227.github.io/csswapuu/style.css' rel='stylesheet' type='text/css'/> code within <head> tag.



Appendix: Mouse Over

hideokamoto-san suggested a surprised setting :-)

Added it in <style>....

.canvas:hover{ -webkit-transform: scale(5);} 

* Of course, please change ".canvas" to your used class name.



















 9th June, 2015 @kimipooh


0 件のコメント:

コメントを投稿

Google+ Badge