Related Information
- Introducing CSS Wapuu and its github repo (WordCamp Kansai 2015)
- Community, Translation, and Wapuu: How Japan is Shaping WordPress History (WP TAVERN)
- Unofficial wapuu fan club (Nick)
- 日本公式キャラクター「わぷー」（Japanese WordPress.org）
CSS Wapuu
- csswapuu created by mismith227.
How to use it.
<head>
...
<link href='//mismith0227.github.io/csswapuu/style.css' rel='stylesheet' type='text/css'/>
...
</head>
..
<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>
</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>
* 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
.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>
</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>
* 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.
* Of course, please change ".canvas" to your used class name.
0 件のコメント:
コメントを投稿