CSSを使って画像をぼかしたり戻したりしよう

今回はCSSを使って画像をぼかしてマウスポインターを乗せると画像を戻す処理をしてみます。

CSSを使用するので、Photoshopを使ったりすることなく簡単にできます。

SCP財団の方はもう少し下から読んでください。

まずはソースから

スタイルシート
<style>
.frame{
    width:300px;
    max-width:100%;
    float: right;
    clear: right;
    margin: 0 2em 1em 2em;
    border: solid 5px #666;
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.img{
    -webkit-filter: blur(16px);
    filter: blur(16px);
    -webkit-transition: .1s;
    transition: .1s;
}
.img:hover{
    -webkit-filter: blur(0);
    filter: blur(0);
}
</style>


HTML
<div class="frame">
<img class="img" src="sample.jpg" />
</div>



簡単な解説

filter: blur(16px)
画像をぼかすには、filterプロパティのblurという関数を使います。
blurの括弧内の数値が大きいほどぼかしが強くなります。
0は、ぼかしがない状態です。

まずはスタイルシートで画像をぼかします。

マウスポインターを乗せたときの動きは疑似クラス「ホバー(:hover)」を使います。 

.img:hover{
    -webkit-filter: blur(0);
    filter: blur(0);
}
HTMLで定義したimg内にマウスポインタが乗ったときに、blurの数値を0にしています。

transitionは、ぼかしが変化するまでの時間を設定しています。

SCP財団の方はこちら↓

[[module CSS]]
.frame{
    width:300px;
    max-width:100%;
    float: right;
    clear: right;
    margin: 0 2em 1em 2em;
    border: solid 5px #666;
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.img{
    -webkit-filter: blur(16px);
    filter: blur(16px);
    -webkit-transition: .1s;
    transition: .1s;
}
.img:hover{
    -webkit-filter: blur(0);
    filter: blur(0);
}
[[/module]]
[[div class="frame"]]
[[image http://scp-jp-sandbox2.wikidot.com/local--files/techno-senmon/S__5242896.jpg 
class="img" alt="hand" title="SCP-XXX-JPに布団を持参しようとするSCP-XXX-JP-1"]]
◇グロ注意◇
カーソルを合わせるとモザイクが取れます
[[/div]]

動いている理屈は上記の通りで、wikidot用にタグを書き換えています。





let's fun!






[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]
価格：2138円（税込、送料無料) (2018/11/13時点)

楽天で購入

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

知識ゼロからのJavaScript入門 [ 小笠原寛 ]
価格：2570円（税込、送料無料) (2018/11/13時点)

楽天で購入

時刻: 0 件のコメント:
ラベル: , , ,
前回に引き続きscp用につかったjavascriptの解説をします。

今回はページの内容を切り替える方法です。

では早速ソース
<script type="text/javascript">
var flg =0;
function btn(){
  if(flg==0){
       document.getElementById("pro1").style.display="none";
       document.getElementById("pro2").style.display="block"; 
       flg = 1 ;
  }else{
       document.getElementById("pro1").style.display="block";
       document.getElementById("pro2").style.display="none"; 
       flg = 0 ;
  }
}
</script>
<div id="pro1" style="display: block;">
内容①
</div>
<div id="pro2" style="display: none;">
内容②
</div>
<input type="button" value="ボタン" onclick="btn();">

divに囲まれた内容をstyle.displayを用いて表示の切り替えをしています。

displayがblockなら表示、noneなら非表示

これをボタンが押されたときに切り替えるように、javascriptで制御しています。





HTML、CSS、javascriptのお勉強
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]
価格：2138円（税込、送料無料) (2018/11/7時点)

楽天で購入



時刻: 0 件のコメント:
ラベル: , ,

【javascript】ポップアップ表示（Alert）について

こんにちは

ちょっと最近SCPでcss+jsをやるようになったので少し解説と備忘録
<script type="text/javascript">
window.onload = function(){
    alert("xxxxx");
}
</script>

window.onloadは、ページが読み込まれた際に動きます。
alertで、ポップアップ表示されます。

ボタンを押したら動くようにしたい場合は、onclickを使います。
<script type="text/javascript">
function test(){
    alert("xxxxx");
}
</script>

<input type="button" value="ボタン" onclick="test();">

このポップアップは、ブラウザに依存します。
「SweetAlert」を使用すればスタイリッシュにデザインできます。 
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script type="text/javascript">
$(function(){
     swal({
    title: "タイトル",
    text: "内容",
        confirmButtonText: 'OK',
        confirmButtonColor: '#DD6B55'
    });
});
</script>


SweetAlertはJQueryをつかっているので、window.onloadは、$で省略しています。

色々オプションつけてカスタマイズできるので
詳しくは公式サイトをチェックしてみてください。

HTML、CSS、javascriptのお勉強
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]
価格：2138円（税込、送料無料) (2018/11/7時点)

楽天で購入



時刻: 0 件のコメント:
ラベル: , ,

4K/8Kテレビ放送に伴う消費者負担について

4K/8Kテレビ放送に伴う消費者負担について


とりあえずwikipediaより↓

Jump to navigationJump to search
4K 8Kテレビ放送（よんけーはちけーテレビほうそう）は、現行の高精細度テレビジョン放送、1080i（2K）や720pに比べ、映像・動画の解像度（画素数）が高い映像4Kや8Kの「スーパーハイビジョン」で行われる放送の通称。
2013年に次世代放送推進フォーラム（NexTV-F）が設立され試験放送を行った。[1]2016年4月1日にはNexTV-Fとデジタル放送推進協会（Dpa）が合併し、放送サービス高度化推進協会（A-PAB）が発足[1]。
2018年12月1日からは、BSで本格的に家庭向け4K・8K放送が行われる。


ざっくり言うと、「新しく高画質な放送をしますよ」

放送を見るためには対応したテレビやチューナーを買わないといけません。
そのテレビやチューナーにはACASチップというものが埋め込まれています。

なぜACASチップなのか

ACASチップは、B-CASカードと同等の機能です。
チップにする背景として、カードの不正改ざん事件があり、セキュリティ強化のためにチップ化してテレビに内蔵するわけです。
今後はACASチップ内蔵が標準にしたいようです。


そもそもB-CASカードってなんだっけ

テレビを購入した際にいっしょに入っている赤のカードです。
テレビに挿入しないと番組を見ることができません。

このカードの目的は２つ
　①著作権保護
　②限定受信機能

 ②は有料放送のためのもので、契約してお金を払っていない人が有料チャンネルを見られないように制御しているわけです。

ちなみにこのカードの所有権はB-CAS社にあります。
譲渡や売買は著作権法違反となります。

地上波を見るのにカードを使っているのは世界でも日本くらいなガラパゴスなシステムです。

所謂利権の塊でしょうか。。。
約20名の会社で売り上げは約100億、出資はNHKやBSデジタルテレビ事業社で社長は元NHK総務局長。

これを天下りといわずなんというのか。

じゃあなぜACASチップにするのか

前述のとおりセキュリティ強化が表面上の理由。
裏の理由は、テレビに対して契約状況が紐づけられることにあります。
「このテレビNHKの受信契約とってないじゃーん」とすぐわかります。

 NHKのための機能ですよね。


ACASチップになるメリット

ないんじゃないかな。。。

ACASチップになるデメリット

１．チップ料金負担は消費者
　（B-CASカードはテレビ局が負担しているそうです）

２．チップが壊れた際の修理費ももちろん消費者

３．NHKからの集金人がすぐやってくる


たぶんほとんどの人がACASチップのことを知らないと思います。

ですが、一般社団法人新CAS協議会というのが立ち上がり、もう4K/8K放送がはじまるといっているんです。

消費者への説明はないのだろうか









続きを読む »
時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)

CSSを使って画像をぼかしたり戻したりしよう

今回はCSSを使って画像をぼかしてマウスポインターを乗せると画像を戻す処理をしてみます。 CSSを使用するので、Photoshopを使ったりすることなく簡単にできます。 SCP財団の方はもう少し下から読んでください。 まずはソースから スタイルシート <s...

  • CSSを使って画像をぼかしたり戻したりしよう
    今回はCSSを使って画像をぼかしてマウスポインターを乗せると画像を戻す処理をしてみます。 CSSを使用するので、Photoshopを使ったりすることなく簡単にできます。 SCP財団の方はもう少し下から読んでください。 まずはソースから スタイルシート <s...
  • サマータイムは何がいいのか
    こんにちは 最近話題になっている サマータイム サマータイムってなんなの？オリンピックと何の関係が？ってのを説明します メリット・デメリットも記載しようと思いましたが、メリットを感じなかったのでカット サマータイムとはなんぞや 1年のうち夏を中心とする時期...
  • プログラミング言語は何からはじめたらよいのか
    プログラミング言語は何からはじめたらよいのか 結論から言うとなんでもいいです。 言語によってそれぞれ特徴があります。 これを作るならこの言語がいい！っていうのはありますが、 特に作りたいものはないけど勉強したいという人は、なんでもいいです。 日本語でも、標準語...