どうも7noteです。電球を作って、サイトを明るく照らしてみた。 全然関係ないですが、市販の電球って、わざと寿命が設定されているらしいですね。 中心部分のぐるぐるのところ（フィラメント）を超ほそくしておくことで、何年かで切れるとか。 なのでフィラメントがそれなりに太い電球を作れば生きてる間は切れない電球とかも作れるのかも。（実際に100年以上ついてる電球があるらしい） 余計な話をはさみつつ、本題のソースもたいして使い道がないものですが、cssだけで電球を作ってみたくなって、さらにクリックで電気付けられたら面白いのでは？というただの思いつきで作ってみました。 HTML・CSS・javascriptだけでゲーム作ります！ってときくらいにしか使えなさそう。 電気屋さんのホームページを作るのにこのアイデア使ってwebサイトとか作ったら面白そうかも。 （探せばすでにそんなサイトあるかも・・・） ソースはかなり汚いかもですがご容赦ください。 ソース index.html <div class="light"> <div class="grass"> <div class="circle"></div> <div class="neck"></div> <div class="filament"><span></span><span></span></div> </div> <div class="screw"><span></span><span></span><span></span></div> </div> style.css body { background: #000; /* 初期状態はまっくらにしておく */ } .light { width: 200px; } /* 電球のガラス部分のcss */ .light .grass { width: 150px; margin: 0 auto; position: relative; } .light .grass .circle { width: 150px; height: 150px; border: 2px solid #111; border-radius: 100%; } .light .grass .neck { width: 60px; height: 20px; margin: -9px auto 0; border-left: 2px solid #111; border-right: 2px solid #111; } /* 電球のフィラメント */ .light .grass .filament { position: absolute; bottom: 40px; left: 40%; } .light .grass .filament span { width: 30px; height: 15px; border-radius: 15px 15px 0 0; border-top: 2px solid #111; position: relative; display: inline-block; margin-left: -10px; } .light .grass .filament span:first-child::after { content: ""; display: block; width: 10px; height: 5px; border-radius: 0 0 5px 5px; border-bottom: 2px solid #111; position: absolute; right: 0; bottom: -6px; } /* 電球のネジ部分 */ .light .screw { width: 70px; margin: 0 auto; position: relative; } .light .screw::after { content: ""; width: 20px; height: 20px; border: 2px solid #111; border-radius: 50%; display: inline-block; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: -1; } .light .screw span { display: block; height: 7px; border: 2px solid #111; border-radius: 10px; } /* カーソルについてくる文字 */ #cursor{ position: fixed; z-index: 2; pointer-events: none; color: #CCC; } /* 明るくなったときの色を指定 */ body.on { background: #fff; } body.on .light .grass .circle { background: #ECD05D; } body.on .light .grass .neck { background: #ECD05D; } body.on .light .screw::after { background: #A5A3A5; } body.on .light .screw span { background: #A5A3A5; } /* 明るくなったらカーソルについてくる文字は消す */ body.on #cursor { display: none; } script.js /* 電気のスイッチ */ $('body').click(function() { $(this).toggleClass("on"); }) /* カーソルについてくる文字 */ $(function(){ var cursor=$("#cursor"); // カーソルになる要素を指定 $(document).on("mousemove",function(e){ // マウスカーソルが動いた時に実行 var x=e.clientX + 10; // カーソルの横座標を取得 var y=e.clientY + 10; // カーソルの縦座標を取得 // 取得した座標をCSSに反映させる cursor.css({ "top":y+"px", "left":x+"px" }); }); }); (※jQueryを使用しています。jQueryってなんだという方はこちら) まとめ 各種パーツの作り方解説 ・ついてくる文字の作り方はこちら ・またフィラメントのぐるぐるの作り方はこちらから 本当は集中線とか付けて明るくなっている感じを作るのも考えたのですが、きれいに書ける方法が思いつかなかったので保留しました。 また思いついたらいろいろ作ってみようと思います。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
皆さんはこのデザインをどの様に実装しますか。 このデザインをコーダーさんに依頼した際に帰ってくる実装は大きく分けて3パターン考えられると思います。 HTMLは以下です。 index <ul class="list"> <li class="card"> <p class="title">タイトル</p> <figure><img src="http://placehold.it/200" alt=""/></figure> <p class="text">本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります</p> </li> <li class="card"> <p class="title">タイトルタイトルタイトル<br>タイトル</p> <figure><img src="http://placehold.it/200" alt=""/></figure> <p class="text">本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります</p> </li> </ul> パターン1 画像と本文の開始位置がズレていますね。flexでチャチャッと実装するとこんな感じになります。 flexで二つのカードを横並びにしているのでカード自体の高さは揃いますが、それだけだとテキスト量が変わった時にレイアウトが崩れやすいので、注意が必要です。 コードはこちらです。 style .list{ display: flex; justify-content: space-between; } .card{ width: 350px; background: #f7f7f7; position: relative; padding: 20px 25px 25px; box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.4); } .title{ text-align: center; font-size: 20px; margin-bottom: 20px; } .text{ margin-top: 20px; font-size: 18px; line-height: 1.5; } パターン2 こちらは、単体のカードに対してもflexboxを使い、その子要素である画像に対して、margin-top:auto;をかけることで開始位置を揃えています。 style .card{ display: flex; flex-direction: column; } figure{ margin-top: auto; } パターン1のズレは解消出来ていますが、タイトルの上下の余白が若干違っています。よく見るとデザインはタイトルの開始位置が揃っていませんね。 パターン3 こちらはデザイン通りに実装できていますね。 タイトル部分に固定値のheightを指定し、flexで位置を調整しています。 heightの値は、二行の方のタイトルの高さを測りそれを指定しています。 コードはこちらです。 style .title{ display: flex; align-items: center; justify-content: center; text-align: center; height: 60px; font-size: 20px; } 最後に 今回はデザインの正解をパターン3としましたが、パターン2のデザインもよく見られると思います。パターン3の実装に関しては、僕がこれしか思いつかなかったので、これを使っているだけです。正直、テキストにheightを指定するのは、違和感がありますよね。代替案があればご教授いただけると幸いです。 参考 flexboxを使って簡単に要素の高さを備える方法。
はじめに 背景の色や写真の輪郭に合わせて文字のテイストが変わる、ファーストビューで文字をアニメーションでスライドさせたい時といったインパクトを持たせたい箇所に使えそうな、簡単で面白い合成加工方法があったのでメモ。 コード <div class="background"> <div class="blend-txt">blend-txt</div> </div> .background { height: 3000px; background: linear-gradient(30deg,blue,orange); } .blend-txt { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 100px; font-weight: 900; letter-spacing: 10px; color: #fff; mix-blend-mode: difference; } 仕様 大枠となるbackgroundでスクロールして変化を確認できるような高さとグラデーションの背景色を設定しています。 子要素として入れ込んであるblend-txtにはスクロール時にテキストの変化がわかりやすいようにposition: fixed;を指定。 そして今回のミソであるmix-blend-modeをblend-txtに指定することで背景によって文字色のテイストが変わる面白いエフェクトがかかります。（今回はdifferenceを指定） See the Pen mix-blend-mode by mimihokuro (@mimi_hokuro) on CodePen.
実現したいこと 動画見たく、クリックするとボタンが凹むような挙動にしたい。 結論 以下の2つをやります hover要素でbox-shadowを付与 active要素でbox-shadowを削除。margin-topを付与 コード こんな感じになります。 a { display: inline-block; text-decoration: none; background-color: #0ACC64; color: #FFF; border-style: none; border-radius: 5px; padding: 5px 10px; } a:hover { cursor: pointer; font-weight: bold; box-shadow: 0 5px 10px black; } a:active { box-shadow: 0 0 5px black; margin-top: 5px; ポイント active要素でmargin-topを付与する。これをやらないと以下のようになる。影はなくなっているけど、ボタンが凹んでいる感じがしない。 これを解決するために、margin-topを付与する。margin-topのpxはbox-shadowの2番目の値(上下方向の影のpx)に合わせる。こうすると影がなくなるだけでなくボタンが凹んでいる風の挙動になる。
