コーディング - ページ 26

CodePenは才能のあるフロントエンド開発者のためのオンライン遊び場であり、あなたはあなたの視野を広げ、他の開発者が何をしているかを見るためにいつでもクールなプロジェクトを見つけることができます。年末年始の休日は、創造的な個人的なプロジェクトであなたの愛する人を驚かせる、または休日を元気づけるのに役立ついくつかのクールで最先端のデザインであなたの顧客に感謝を言う絶好の機会です. この記事では、のぞき見をします。 CodePenでの20回の素晴らしいクリスマスの実験, あなたはあなた自身のデザインを作成するためのインスピレーションのために使用できること. 1.家族のクリスマスソングブック この素敵な家族のクリスマスソングブックアプリはSoundCloudでホストされているあなたのお気に入りのクリスマスソングを再生することができます。スタイルルールはLESSスタイルシート言語で書かれており、ミュージックプレーヤーの機能はカスタムjQueryプラグインによって提供されます。. 背景にあるスノーフレークとクリスマスツリーのアイコンは、デザインに厳粛な雰囲気を与えます。ペンの上にマウスを置くと、微妙なCSS効果もあります。. CodePenでNicholas Petersen（@nicholaspetersen）のPen Christmas Songbookを参照してください。. 2.デジタルクリスマスツリー その典型的な視覚的要素は多くの創造的な方法で構築することができるので、クリスマスのためのデザインは常にありがたい仕事です。このペンはこれの良い例です。最初は、休日とは無関係のカラフルな三角形しか表示されませんが、[公開]ボタンをクリックすると、クリスマスツリーにまとめられます。これはユニークな解決策であるだけでなく、より単純なゲームを彷彿とさせる. CodePenでPrashant Sani（@Prashantsani）のPen Digital Christmas Treeを参照してください。. 3.降雪を伴うクリスマスアニメーション クリスマス用に素敵なアニメーションを作成したい場合は、必ずしもJavaScriptを使用する必要はありません。このペンでは、降雪アニメーションと背景画像の両方が純粋にCSSで作成されています。 CSS3の素晴らしい機能を示しているので、コードを少し検討する価値があります。背景画像は実際のSVGグラフィックと間違えられることさえあります. CodePenでTexx Smith（@texxs）によるPen Christmas Animation 2014を参照してください。. 4.サンタ・オン・ザ・ラン! 実行時にサンタ！はphaser.js HTML5ゲームフレームワークを利用して休日のための楽しいJavaScriptゲームです。このゲームにはそれほど多くのルールはありません。Santaは無限に、あるいは少なくとも倒れるまで走ります。このペンはあなたにJavaScriptでより簡単なゲームを書く方法を理解する絶好の機会を与えます. 実行時にペンサンタを見よう！...

モーダルの作成、美しいテキスト効果の作成、バイキングシールドの作成、さらにハート型の作成など、CSSを使用して多くのことができます。 CSS3 Box Shadowsを使ってできることはたくさんあります。この記事では、これから説明します。 いくつかのデザイナーがCSSシャドウを使っていくつかの素晴らしい結果を生み出す様子を見てください。. このリストであなたは見るでしょう CSSシャドウ使用 チックカウンター、テキストへの3D効果、ピクセルアート、シンプルなアニメーションなどの作成に。同じ作品をもっと見るには、デザイナーのポートフォリオをチェックしてください。 CSS Shadowsの他の優れた使い方を知っていますか？コメント欄でお知らせください. 不機嫌そうな切り替えボタン Roiklesによる長い影 Hugoによる平らな長い影 オーバルボックスシャドウBy Jcorpus Abderrahmaneによる衝突ボール 257 3DによるCreme Apple Store icon作者Joshbader ゴーストボタンのボックスシャドウグラデーション バットマンメイドインCSSボックスシャドウBy Nickmblain Frosty Beer by Nickmblain Zitrusfrischによる3Dテキスト アニメーション化されたテキストの影By...

しばらく前からフロントエンドのWeb開発者であれば、何かをコーディングする方法を見つけようとしていて、ちょっとグーグルした後に気付いた瞬間がある可能性が高いです。 “そのためのCSSがあります”. そうでなかったら、まああなたはにしようとしている. この記事はそのようなCSSコードを集めたもので、要素をスティッキーにしたり、下線を引いた機能を強調したり、ページのテキストを特別な形にしたり、視差効果を与えたりすることができます。それらの中には広くサポートされているものもあれば、すべてのブラウザで完全にサポートされようとしているものもあります。. 番号付け見出しと小見出し ドキュメントに一連の見出しと小見出しがあり、それらを手動またはスクリプトで番号付けしているとします。代わりに、CSSカウンタを使ってこれを行うことができます。ここにはすでに詳細な投稿があります。そしてそれはCSS2仕様からのものなので、おそらくIE 6を除いて、それはすべてのブラウザでサポートされていると思うでしょう。. CodePenのPreethiによるPen GJRLWj（@rpsthecoder）を参照してください。. 下線をスパイスアップ 実線ではなく、素敵な点線または破線で下線を付けたい場合があります。そのための選択肢はありませんので、 ボーダーボトム. しかし ボーダーボトム 下線を引いているテキストが折り返されている場合、これは適切な解決策ではありません。. CSS3はテキスト装飾のために1つではなく3つの新しいプロパティを指定しました テキスト装飾色, テキスト装飾行, そして テキスト装飾スタイル これは古き良きものに短くすることができます テキスト装飾. これらを使用して、下線、​​上線のスタイル、テキストの点滅などを設定できます。 2015年4月現在、Firefoxのみがこのプロパティをサポートしていますが、有効にすることができます。 “実験的Webプラットフォーム機能” Chromeで使用する. CodePenのPreethiによるPen YXzMQw（@rpsthecoder）を参照してください。. 引用を引用する まず第一に、そのためのHTMLがあるので、短い引用のために正しい中括弧をタイプすることを気にする必要はありません。...

あなたが岩の下に住んでいない限り、あなたはHTML5について聞いたことがあるでしょう。アップルのプロモーションのおかげで、今はいたるところにあります 最高経営責任者（CEO 元CEOのSteve Jobsと、HTML5がFlashを引き継ぐことができると信じる特定の開発者. 実のところ、このような状況がまだ起こっているとは思えませんが、HTML 5は、そのビデオ機能、キャンバスのイラスト、およびアニメーションがスムーズに機能するという点で、非常に魅力的です。実際のところ、HTML 5の境界をテストする方法として作成された場所全体にプロジェクトが出現していることは非常に有望です。. 信じられないかもしれませんが、HTML5を最大限に活用する15の啓発実験を紹介し、重力、音楽ベースのアニメーション、そして生き物のように動作する生き物のレンダリングを体験できることを推測します。楽しい時間を過ごして、最新バージョンのMozilla FirefoxとGoogle Chromeをお楽しみください。. あなたがこれらのHTML5の楽しみに満足していないのを念のために、私たちはあなたのためにもっと持っています! HTML5：48のFlash-Killingデモの可能性 HTML5：19のWebアプリケーション キャンバスサイクル アーティストのMark FerrariとコーダーのJoseph Huckabyがコラボレーションしたこの作品は、冬の森、海の景色、荒れ模様の山々など、動きのある自然シーンの素晴らしいコレクションです。彼らは写真を見ながらリラックスしていて本当に素晴らしいです。仕事から離れてリラックスするのに少し時間が必要な場合は、これらの写真を見て、あなたの緊張を解消してください。. Google Gravity もう一人は、驚くべきDoob氏によるものです。これは最初のものよりインタラクティブではありませんが、それでもクールです。それはグーグルのメインサーチページの基本的なコピーを与える。しかし、あなたがカーソルをポイントすると、それらのすべてが一番下でクラッシュするまで、ページ全体が「落ち」始めます。 Googleのロゴは、ページを更新するアクティブリンクとして機能します。グーグルが嫌いな大企業のための良いゲームは、. キャンバスの木 Kenneth Jorgensonによって作られた、これはあなたが「もっとおいしい木のためにリフレッシュする:)」というフレーズを見ることができる唯一の場所かもしれません。それはまさにそれが言うことです：あなたはウェブサイトをクリックして、それはあなたを白い背景に連れて行きます。木の黒インクの描画は、いくつの枝が進行中であるかを考慮しながら「成長」し始めます。あなたは何度でも見るためにリフレッシュすることができます. 磁気 これはあなたが楽しむためのもう一つの楽しさと中毒性のものです。あなたは基本的に画面の周りにドラッグすることができる2つの「磁石」から始めます。光の粒子はそれらの周りを周回します、そして、あなたが位置を変えるならば、あなたは彼らが作る形を変えることができます。もっと多くの磁石や粒子が必要な場合は、ダブルクリックしてそれらを必要な場所にドラッグするだけです。はい、それは磁石と物理学についてのすべてです! セレブ収益グラフ エピソードごとにテレビの有名人がどれだけ稼いでいるかを視覚的に表現したいですか。これは、特定の有名人がテレビ番組のテーピングごとにどれだけの量を作成するか（またはCharlie Sheenのような場合には作成されるか）を表すカラーバーのスタックを示すクールで小さなグラフです。それはダニエル・ラップによる多くのプロジェクトと実験のうちの1つとして作られました. キャンバスリボン...

Web開発者として、あなたは頻繁に DOM, ブラウザが使用するオブジェクトモデル 論理構造を指定する そしてこの構造に基づいて HTML要素を画面にレンダリングする. HTMLは デフォルトのDOM構造. しかし多くの場合、JavaScriptでこれを操作することをお勧めします。 機能を追加する サイトへ. 画像：Google Developersこの記事では、のリストがあります 15の基本的なJavaScriptメソッド それ DOM操作を支援する. あなたはおそらくこれらのメソッドをあなたのコードの中で頻繁に使うでしょう、そして私たちのJavaScriptチュートリアルでそれらにぶつかるでしょう. 1. querySelector（） の querySelector（） 方法 1つ以上のCSSセレクタに一致する最初の要素を返します. 一致が見つからない場合は、 ヌル. 前 querySelector（） が導入され、開発者は広く getElementById（） 方法...

IFTTT （の略 これなら、それなら）無料サービスです 異なるオンラインサービスに接続する, ソーシャルメディアサイトなど, IoT, オンライン生産性向上ツール それら全体の典型的なタスクを自動化する. たとえば、IFTTTを使用すると、Facebookの新しいステータスの更新すべてを自動的にツイートすることができます。. IFTTTで利用可能なサービスはと呼ばれます チャンネル, あなたがそれらを横断して作成する自動化されたルーチンは レシピ. Dropbox、Slack、Gmail、Twitterなど、世界で最も人気のあるサイトはすべてIFTTTチャンネルとして存在していますが、他にもたくさんあることはあまり知られていません Githubに便利なIFTTTレシピ 開発ワークフローを管理するのに役立ちます. IFTTTを使用するには、以下が必要です。 それを申し込む, そしてまた サービスにサインインする レシピを作りたい以下のリストで, 画像をクリック レシピのリンクをたどる. 1. Instapush経由で新しい問題に関する即時通知を受け取る インスタプッシュ iOSとAndroidの両方で利用可能なサービスです。 プッシュ通知を受け取る IFTTT、Zapier、または独自のカスタムアプリなどの他のサービスから。あなたはそれを使用することができます 新しい問題が発生したときにプッシュ通知を受け取る...

美しいテキストや文字体裁はあなたのデザインを魅力的に見せるでしょう。 Webデザインでは、CSSは、テキストや活版印刷のさまざまな効果を含めて、デザインにスタイルを提供するのに役立ちます。 CSSでは、クリッピングを使用してテキストにアニメーションを追加して、物事を少し盛り上げることができます。. そしてこれを説明するために、私達は集めました CSSで可能になる15の見事でクールなテキスト効果 （Javascriptコードから少し助けを借りたものもあります）. CSSを使ってできることについては、以下をチェックしてください。 信じられない18のすばらしいことは、CSSを使用して構築されたことです 知っておくべき30のjQueryテキスト効果ライブラリ CSSでハートを作る方法 Animate.css - アニメーションを簡単に作成するためのCSS3ライブラリ 弾性ストロークアニメーション Yokselは、クールな配色でテキストのストロークをアニメートします。この効果はCSSとSVGで作られています。結果は最高です! SVGグリッチ 壊れたアナログテレビのような効果を作りたいですか？ Dirk WeberはCSSとSVGフィルタを使ってこの素晴らしいグリッチ効果を作りました. ショップトークのロゴ Shop TalkのロゴはHugoによってCSSのみを使用して再作成されています。ロゴはオリジナルと似ていますが、適切な質感があります。. スラッシュ効果 Robet Messerleによるこのアイデアは、70行未満のCSSで行われるナイフスライス効果をもたらします。. エレガントな影効果 Long Shadow効果は、CSSを使用して作られたテキストになります。作成者のJuan Brujoは他に4つの効果をもたらしましたが、これは最も印象的なものです。. 霧のテキスト効果...

Javascriptの縮小化は、 スクリプトをはるかに小さなフットプリントに圧縮します。. 人間の可読性を失いますが、かなりの帯域幅を節約します - 最終的には, Javascriptはあなたのブラウザではなくあなたのユーザ向けのものです. ほとんどのプロダクションWebサイトはJavascriptの縮小を使用しますが、これを達成する方法は大きく異なります。単純なオンラインコンバータから、より包括的なGUIツール、コマンドラインインターフェイスまで、私たちの選択肢は多種多様です。この記事では見ていきます Javascriptの縮小の仕組み, どのようにしてそれを私たちのワークフローに組み込むことができるのか、そして縮小することの長所と短所は何ですか。. 縮小のしくみ コードを縮小したときに何が起こるかを学ぶための最善の方法はUglifyJS Githubリポジトリを見てみることです。このスクリプトは、GruntのようなGUIツールやコマンドラインツールと同様に、多くのオンラインコンバーターで使用されています。コードを短くするために適用される変換をいくつか示します。 不要なスペースを削除 変数名を通常は1文字に短縮します 連続するvar宣言を結合します 可能な場合は配列をオブジェクトに変換します if文を最適化します 単純な定数式を計算します 等. 簡単な例として、これは与えられたテキストを書き出す関数です。. 関数hello（テキスト）document.write（テキスト）; こんにちは（ '記事へようこそ'）; これを小さくするとどうなるか見てみましょう。スペースとインデントの削除とテキスト変数の短縮に注意してください。. function hello（e）document.write（e） hello（ "Welcome to the...