はてブログ

はてなブックマーク新着エントリーの過去ログサイトです。



タグ View Demo

新着順 人気順 5 users 10 users 50 users 100 users 500 users 1000 users
 
(1 - 7 / 7件)
 

Electron開発のサンプルコードとデモを見られる『Electron APIs』 - Macの手書き説明書

2016/06/18 このエントリーをはてなブックマークに追加 102 users Instapaper Pocket Tweet Facebook Share Evernote Clip Electron開発 Electron デモ Mac CSS

カテゴリ：開発ツール辞書／辞典／その他 現在の価格： 無料 販売元： GitHub 対応OS：10.9.0以降 JavaScriptとHTMLとCSSというWeb開発技術でクロスプラットフォームで動くアプリを作れる、Electronを開発するための基本的なサンプルコードを掲載したアプリ。 Electron APIの基本的なところを押さえたチュートリアルで、「View Demo」ボタンを押すと、書か... 続きを読む

CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能 - Weblog - Hail2u.net

2015/05/10 このエントリーをはてなブックマークに追加 74 users Instapaper Pocket Tweet Facebook Share Evernote Clip マージン Weblog hail2u.net CSS 試行錯誤

前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 View Demo: S... 続きを読む

フルスクリーンでオーバーレイの検索ボックス - Weblog - Hail2u.net

2015/02/11 このエントリーをはてなブックマークに追加 62 users Instapaper Pocket Tweet Facebook Share Evernote Clip Weblog hail2u.net トグル vmin CSS

増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 View Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検... 続きを読む

CSSで画像を六角形にくり抜く - Weblog - Hail2u.net

2014/05/19 このエントリーをはてなブックマークに追加 76 users Instapaper Pocket Tweet Facebook Share Evernote Clip Weblog hail2u.net SWARM CSS 六角形

Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 View Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要があ... 続きを読む

Google Web Fontsにあるお気に入りのフォント5つ - Weblog - hail2u.net

2011/12/06 このエントリーをはてなブックマークに追加 60 users Instapaper Pocket Tweet Facebook Share Evernote Clip Weblog hail2u.net Typekit 参考 機能

Google Web Fontsのフォント登録数も随分増えてきてチェックするのが大変になってきました。一応絞り込みとかそういう機能もありますけど、Typekitのようにかゆいところに手が届く感じではありません。そこで…というわけではないですけど、なんかの参考にでもなればと私のお気に入りを5つだけ簡単な説明付きで紹介してみます。 View Demo: Five Favorite Google Web... 続きを読む

CSSでモーダル・ウィンドウ - Weblog - hail2u.net

2011/10/22 このエントリーをはてなブックマークに追加 159 users Instapaper Pocket Tweet Facebook Share Evernote Clip Weblog hail2u.net CSS None pure

pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの？ View Demo: Pure ... 続きを読む

CSSでアイコンをデザイン - Weblog - hail2u.net

2011/03/03 このエントリーをはてなブックマークに追加 770 users Instapaper Pocket Tweet Facebook Share Evernote Clip グラデーション 万能 Weblog スクリーンショット 背景

ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。View demo: Design icon with CSSul li a ... 続きを読む

 
(1 - 7 / 7件)