SVGで画面全体に斜め線や曲線を引く
SVGで画面全体に斜め線や曲線を引く 一昔前だと単純な斜め線とか円をバックに置きたいときは画像で作ってましたが、最近ではわりとSVGを使うことが多いようです。 SVGの良いところはベクターなので画面全体に配置しても荒くなったりしないとか、コードで作成できるので後々アニメーションなどもできたりします。 ここでは単純な図形ですが画面全体に表示する方法をご紹介します。 投稿日2015年09月29日 更新日2015年10月14日 準備 まずはSVGをHTML内に記述する方法です。 HTML <div id="wrap"> <div class="description"> ここにコンテンツが入ります。 </div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="
もう使ってる？ たった3行で美しいSVGアニメが作れる「Vivus」がスゴい
まるで「見えないペン」で描いているような手描き風のSVGアニメーション。CSSとJavaScriptの知識があれば実装できる、定番アニメーション表現ですが、Vivusならもっと手軽に実装できちゃいます。 90年代初期のBLINKタグから、最新のCSS3トランジションやアニメーションに至るまで、Webページやアプリケーションの要素を移動する機能は、いつも魅力的な目標であり続けています。 今日では、SVGなどのテクノロジーを使えば、「見えないペン」と呼ぶエフェクトを比較的容易に実現できます。閲覧者は、まるで見えないペンで描かれたかのように、1ラインずつ表示される絵を目にします。 そのアイデアは新しいものではありません。よく知られているように、1953年の「Duck Amuck（カモにされたカモ）」にまでさかのぼると、のちにバッグス・バニーだと判明した見えざる手は、周りの世界を何度も消しては描き
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
鼎盛国际游戏平台-［诚信第一］
鼎盛国际游戏平台-［诚信第一］是包含了新葡京、威尼斯人、金沙、BBIN电子、MG真人视讯、BET365等多个官方平台，游戏、体育、娱乐的第一首选，点击进入最新的娱乐集团网址:www.782net,www.2007com,www.9159com,www.js333com,使鼎盛国际游戏平台-［诚信第一］成为亚洲一流的娱乐平台,鼎盛国际游戏平台-［诚信第一］,注册免费送28元2015。
nico0927.net
nico0927.net 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
jQueryで背景画像をアニメーションで無限ループさせる
画像の準備 とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。 作成したら「bg.png」という名前で保存します。 今回はこんな画像を作成してみました。 デザインがしょぼいとか言ってはいけない！ html+cssでバックグランドに画像を配置 html+cssは特別なことはなく普通に作ります。 画像はbodyの「background」で配置してみました。 html <body> <div id="container"> <h1>jQueryでバックグラウンドを無限ループ</h1> <p> このページはjQueryでバックグランド画像をアニメーションループさせるサンプルページです。 </p> </div> </body> css body{ background: #A6E9FF url(bg.png) repeat-x; margin
ブラウザ別デフォルトフォントサイズ一覧表｜web bibo
ご使用のブラウザのデフォルトフォントサイズを取得 Javascriptでフォントサイズを取得するスクリプトを作ってみました。こちらのページで今お使いのブラウザのデフォルトフォントサイズを知ることができます。ただ、動作は不安定です。Javascriptで取得したサイズと上記表のフォントサイズで、食い違ってる部分もあります（Safariとか）。なぜサイズが違うのかわかる方いましたら、ご連絡ください。多分、Javascriptが上手く動作していないんだろうなぁ・・・ →ブラウザのデフォルトフォントサイズを取得
CSS やってはいけないこと floatとは
ブログテンプレートを例にとると、 記事表示部分-サイドカラム…のように、divなどの箱が横方向(左右)に分割されて表示されている部分があります。 floatとは、左右どっちに寄せるか？という「回り込み」を指定するプロパティで、 float: left; float: right; float: none;(回り込みをさせない) のように、left(左)に回り込ませる・right(右)に回り込ませる、といったようにCSS部に記述して使います。 floatに関する説明は、なんだかややこしく感じるのですが、 floatで左か右か、方向を指定しているdivやimgなどの要素は、その指定した方向に寄せられる、といったような感じです。(その後に続く要素は、指定した方向とは反対の方向に表示されます。) floatを指定する要素にやってはいけないこと ブログテンプレートなどには、必ずと言っていいですがfl
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
CSS HappyLife
もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSのセレクタがちょっとあやふやな人はやってみて！ 楽しみながらCSSのセレクタを学ぶ -CSS Diner
CSS Lecture: Faviconギャラリーサイトのまとめ
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース