何マイルものインターフェースアイコンが1つのスプライトに詰め込まれています。 カスタムCSSスプライトを備えたソーシャルメディアボタン（画像の最適化）html用の色付きソーシャルメディアアイコン
折りたたみのオンラインリソース CSSスプライトたとえば、http：//spritepad.wearekiss.com/またはhttp://www.spritecow.com/。 Vtim、あなたは簡単にあなたに合ったものを知るでしょう。 ここで私は勝つ準備ができています CSSスプライト。 悪臭軸：
html構造
コンテナdivスペースコンテナdiv ソーシャルボタン移行。
内部告発スプライトのCSS構造
body（background：url（ "fon.png"）; color：＃1aa5ca;）.box（margin：250px; padding：25px; background：＃; text-indent：-9999px; display：inline-block;）.click （背景：url（ "click.png"）;幅：200px;高さ：86px;表示：ブロック;）.vk（背景：url（ "vc.png"）;幅：51px;高さ：52px;マージン：10px background-position：0 0px、transition：opacity 0.5s; -moz-transition：opacity 0.5s; opacity 0.5s; / * Opera * / opacity：0.6; float：left;）.vk：hover（background：url（ " vc.png "）;幅：51px;高さ：52px;不透明度：1;）.ya（background：url（" ya.png "）; width：50px; height：50px; margin：10px; background-position：0 0px; Transition：opacity 0.5s; 0.5s; / * Firefox 4 * / -webkit-transition：opacity 0.5s; /*SafariとChrome*/ -o-transition：opacity 0.5s;：hover（background：url（ " ya.png "）;幅：50px;高さ：50px;背景-位置：0 -50px;不透明度：1;）.ma（背景：url（" ma.png "）;幅：51px;高さ：52px;マージン：10px;背景位置：0 0px;遷移：不透明 y0.5秒; -moz-transition：不透明度0.5秒; / * Firefox 4 * / -webkit-transition：不透明度0.5s; /*SafariとChrome*/ -o-transition：不透明度0.5s; /*オペラ*/不透明度：0.6; フロート：左; ：url（ "ma.png"）; 幅：51px; 高さ：52px; 背景位置：0-51px; 不透明度：1 ）。可能です 背景位置：00px;敬意を忘れて、不透明度を0.6に設定しました。これは、少し透明度です。 ホバーした不透明度：1; すべてが取り込まれます（0.5秒） 遷移：不透明度0.5秒;ホバリングすると、画像の位置が変わりました 背景位置：0-51px;
Vikoristovuyuchitsyutekhnіkuは大幅にできます 画像を最適化する（サーバーへのzvernenが少ない）。
P.S. 書く食べ物が好き！
Zhovten 29、2019 投稿が更新されました
ユリニメッツ
サイトのソーシャルメディアボタンの有効性
そのイメージのソーシャルメディアボタンをどのように入手できると思いますか？ どちらにとっても、それはさらに美しく創造的に見えました。 したがって、別の方法でそれを行うことができます。 私は1つではなく、dekilkomをnavitします。 さらに正確に言うと、画像にカーソルを合わせたときにソーシャルメディアボタンにクールな効果を作成する12の方法があります。 一部のインタラクションでは、ポイントするだけでなく、マウスをクリックする必要があります。これにより、インタラクティブ機能も追加されます。 あなたのサイトを見るユニークな方法、画像にカーソルを合わせたときの代用と同じ効果。
以下の取り組みについて、12の例を使用してzavantazhivayteに驚嘆してください。
利用する
スピーチの前に、指摘されたときにそれがどれほど効果的であるか、このトピックに関するサイトにはもっと多くの記事があります：
効果を保証した-ウィンク！
たとえば、私の魂に落ちた、最初の効果。 下の画像にカーソルを合わせると、効果がわかります。
（画像を指す）
サイトと一方的なサイトの両方で最も重要な画像を表示するための最良の方法を入手してください。 エール、私がすでに書いたように、効果ははるかに大きいです（12！）。
Krok 1-HTML
あなたがボタンで見ることができるように、アイコンのために 社会的対策 FA（Font Awesome）が勝ちます。 ブロック間で1行に接続されたアイコン :
| 1 | <リンクrel="stylesheet" href = 「http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css」> |
さらに、あなたはすべてのvihіdnikiに魅了されたので、あなたが値する効果を選択する必要があります。 私の効果はファイルにあります index.html。 このファイルには、ホバー効果を作成するために必要なすべてのスタイルが含まれています。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class = "image-effect-fallback"> <div class = "sharelayer"> <a href = "＃" class = "share-button share-via-vk"> <i class = "fa fa vk"> と接触している</ a> <href = "＃" class = 「Facebookで共有ボタン共有」> <i class = "fa facebook"> フェイスブック</ a> <href = "＃" class = 「シェアボタンシェアバイツイッター」> <i class = "fa fa-twitter"> ツイッター</ a> </ div> <div class = "image-layer"> <img src = "images / tree.jpg" width = "500" alt = "（！LANG：（！LANG：California surf" > !}!} </ div> </ div> |
必要なすべての構造є。 CSSにもっと多くのスタイルを入れるのを失った。 それに、2番目のi、1時間、残りのワニに渡します。
Krok 2-CSS
スタイルはブロック間のスキンHTMLファイルにあります 。 したがって、さまざまな効果を持つスキンファイルでは、ドキュメントのこのブロックのスタイルが異なります。
これらのスタイルを取得して、スタイルファイルに配置する必要があります。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | .image-effect-fall-back（width：500px; height：300px; position：relative; margin：0 auto; -webkit-perspective：800px; Perspective：800px;）.image-effect-l-back（position：absolute ;上：0;左：0;高さ：300px; -webkit-遷移：0.6s;遷移：0.6s; z-インデックス：1;）.image-effect-fall-back：hover .image-layer（-webkit -transform：rotateX（70deg）; transform：rotateX（70deg）; overlay：visible;）.image-effect-fall-back .image-layer img（height：100％;）.image-effect-fall -back .image -layer：before（content： ""; position：absolute; top：0; left：0; width：100％; height：100％; -shadow：0 0 100px 50px rgba（0、0、0、0.5）;不透明度：0; -webkit-transition：すべて0.5秒;）translateY（110px）scale（0.75）; 変換：rotateX（114deg）translateZ（-26px）translateY（110px）scale（0.75）; -webkit-transform-origin：bottom; -ms-transform-origin：bottom; 変換元：下; ）.image-effect-fall-back：hover .image-layer：before（opacity：0.3;）.image-effect-fall-back .share-layer（position：absolute; bottom：100px; left：0; width： 100％;高さ：100px;不透明度：0; z-インデックス：10; -webkit-遷移：0.6s;遷移：0.6s; -effect-fall-back：hover .share-layer（不透明度：1; -webkit-変換：rotateX（0deg）translateY（-70px）;変換：rotateX（0deg）translateY（-70px）;） /*すべてのボタンのスタイル*/.share-button（display：inline-block; text-decoration：none; color：#ffffff; padding：12px; width：90px; border-radius：2px; margin：25px 10px;） /*ソーシャルメディアボタンの色*/.share-via-vk（background-color：＃4C75A3;）.share-via-facebook（background-color：＃3b5998;）.share-via-twitter（background-color：＃00aced;） |
事前にお知らせします。場合によってはjQueryが使用されるため、完全な効果を得るには画像をクリックする必要があります。 あなたはただあなたが尊敬されているお尻の側で勝利しているすべてのJSコードを取る必要があります。
尊敬！ CSSコードをスタイルファイルに貼り付けた後、ボタンがアプリケーションのボタンと同じように表示されない場合があります。 これは、スタイルファイルに、デモで紹介されている要素やクラスの他のスタイルがあるという事実に関連している可能性があります。
ヴィスノヴォク
原則として、創造性は常に上昇しています。 ここでは、12の効果から1つの効果を選択して、プロジェクトに勝つことができると思います。
私達は私達の場所を社交し続けます。 多くの場合、読者はお気に入りのソーシャルメディアでブログの更新を手動で選択する必要があります。 彼らにそのような報酬を与えましょう。 これらの社会福祉サービスに登録する必要がある人。 管理者プロファイルまたはサイトの作成者を作成するか、 パブリックサイドプロジェクトへの会社。 支払人がそれらを知ることができるように、サイトへの新しい更新を新しいプロファイルの行で定期的に公開する必要があります。 ツェ、スピーチの前に、私たちが以前にインストールした人々の助けを借りて手軽に働きます。 ソーシャルプロファイルへの投稿は、CSSスプライトまたはCSSスプライトを使用して行うことができます。
CSSスプライトとスプライトとは何ですか？
スプライト-1つにまとめられたような小さな写真のコレクション。 サーバーからcoristuvachのコンピューターに10〜20の小さな光の写真をキャプチャするのではなく、1つのストリームにキャプチャして、1つのファイルにマージするようにしてください。 スプライトはゲーム業界からウェブデザインに登場しました。そこでは、モンスターや何を撮影するかなど、アニメーション化された2Dグラフィックスを作成するために悪臭が勝利しました。
サイトのデザインは、いくつかの違いはありますが、次のように1つのファイルに結合することによって停止することもできます。
このアプリケーションを1つのファイルでどのように操作できますか。ソーシャルメディアのアイコンだけでなく、矢印や変更ボタンなどの他のデザイン要素も使用しました。 1つのスプライトのサイトのvikoristovuetsyaが正しくないため、Alepoddnuvatiは絶対にすべてのグラフィックスです。 要素をグループに分けて、歌うタイプのサイドに必要以上に追加することをお勧めします。
この小さなもので、私はロボットのcssスプライトの原理を概略的に示してみました。 ブロックが背景画像よりも大きい場合、cssスタイルでは繰り返しなしが設定されているため、ブロックは左上隅に配置されます。 ただし、背景画像の位置は可能な限り変更できます アッパークットブロック。 特に、たとえば、rozmіromdorivnyuєokremiyіkontsіのブロックのようなtsecorisno。 サイズ32x32レザーのこのアイコンがあります。 悪臭は水平に広げられますが、垂直に、灰の位置を変える必要はありません。 背景の赤ちゃんの位置を設定します-32ピクセルはブロックアイコンで、-64ピクセルはFacebookアイコンなどです。
ソーシャルメディアプロファイルにプッシュボタンを作成するにはどうすればよいですか？
関連するレコードに登録した後、プロファイルのメッセージとRSSページのアドレスを削除し、サブスクリプションフォームに送信して、更新をメールでキャンセルしました。 次に、次のコードを組み合わせて、WordPress管理パネルのテキストウィジェットに貼り付けます。
アンカーで、コードにタグを送信します : 。 アイコンが必要なこのブロックのまさに欠点。 背景画像zsvはスタイルファイルで指定されています style.css権威を通じて 背景位置:
/*サブスクリプションボタンを更新*/.spmenu（パディング：0px;マージン：0px;色：＃4682B4; text-align：left; font-size：100％;）.spmenu a、.spmenu a：hover（カーソル：ポインター; color：＃1E90FF; text-decoration：none; font-size：100％;）.spmenu span（display：inline-block; width：32px; height：32px;）no-repeat; ）.spmenu span.sprite_gplus（background-position：0px 0px;）。 .spmenu span.sprite_rss（background-position：-96px 0px;）.spmenu span.sprite_email（background-position：-128px 0px;）
このランクでは、スキン要素について クラスの途中で spmenu" 聞く 背景画像 icons.png、アイコンのセットです。 何を尊重する єrowvbudovanimelementіvforspecifіkatsієyuHTML、厳密なrazmіri（幅と高さ）を尋ねるために、私たちはyogoの表示方法をブロック状に変更する責任があります CSSパワーズ（行： 表示：インラインブロック）。 アイコンの形式に一致するように32x32ブロックを展開します。
多くの場合、zamіst
タグ
,
,
など、私はこのpidkhidが間違っていると思います。 これで、標準タグのスタイルを変更できるだけでなく、ユニバーサルにすることができます
。 タグ
あっという間にサーバーへのリクエストを作成します。zastosovayuchiスプライトは、これらのリクエストの量をスピードアップするのに役立ちます。
スプライトのアイコンはどこで入手できますか？
- 自分でペイントします。
- 写真の中から検索システムで検索します。
- Merezhyaには特別なdobirkiіkonがあります、yakіはしばしば費用なしでlunayutです。
- 多くのソーシャルメディアやサービスが公式のロゴやアイコンのウェブサイトに掲載されており、それらを補遺に使用することができます。
- ソーシャルメディアアイコンのスプライトファイルを自動的にスプライトするために、サービスでそれをスピードアップすることができます。 必要な順序でアイコンを選択し、スクリプトを使用してアーカイブを選択し、画像を解凍してbachimoします icons.png-準備ができたスプライトファイル。
アニメーションメニューを展開するときにウィンドウをスプライトして色付きのアイコンを表示します。メニュー項目にカーソルを合わせると、ワインが暗くなるか保存されます。 次に、スプライトファイルに2セットのボタンを保存し、マウスをホバーした後、JSを使用して背景の小さなボタンの位置を動的に変更します。
ボタンメニューボタンに注意してください-更新を削除するためにチャンネルに送信します、それは壊れています、記事の終わりまで。 最初からやり直す必要がある場合は、更新をサブスクライブします。
こんにちは、shovnyの友達。 今日の記事は、サービスやプラグインを使用せずにソーシャルボタンのブロックを作成することに専念します。 そして、このブロックの前でさえ、あなたがサイドを宣伝するためにサイトをサポートし、統計にメッセージを送ることを可能にするボタンが表示されます Eメールそしてあなたの記事に住宅ローンを作ります。 そのようなボタンは今日スキンサイトで見ることができます。 追加のサービスまたはプラグインには、悪臭の軸のみが実装されています。 そして、私はあなたに独立して成長する方法をお見せします。
私がクライアントのウェブサイトや自分のブログの勝利者であるようなサービス-私は。 Qiサービスを使用すると、設定されたタスクを簡単に実装できます。
サービスやプラグインの前にソーシャルボタンの力があるのはなぜですか
- 不可逆的で非周辺的な要因は、サイトへの関心の速さです。 したがって、たとえば、ブラウスの代用サービスであるPLUSOサービスは、スプレッドが短く、合計で633ミリ秒になります。
このブロックには、で結合されたソーシャルボタンの必要な画像はもうありません。 すべてのスタイルが最小限に抑えられます。 さらに、単純なhtmlフレームワーク。
- 私が言う方法は、自分に復讐しないことです こんにちは。 Hі、posilannyaє、しかしすべての悪臭は内部posilannyaのようになります。 bajannyaの場合、zavzhdiを実行できます。 あなたもそれらを見ることができなくなります。
- duje 簡単インストール。 サイト側の終了コードのブロックにhtmlコードを挿入し、スプライトを開始して、追加するだけで十分です。 cssスタイルそのインストールが完了しました。 ボタン画像を使用してファイルへのパスを編集する必要があります。
- この点、shvidsheは、ソーシャルボタンのブロックにとってプラスでもマイナスでもありません。 秘訣は、ブロックにボタンを押すためのリッチニックがないことです。 Іtseあなたはマイナスを考えることができます。 エール、反対側からは、スキンボタンを付けることができ、ボタンを押して視聴者のソーシャルネットワークと記事を共有した回数を正確に知ることができます。
- サービスによって収集された統計は、サイトのサードパーティに渡されなくなります。
終了コードにソーシャルボタンのブロックを挿入する
記事の後にボタンが展開されている場合、私たちは古典的なオプションのように見えます。
記事の公開のために送信する必要のあるファイル（single.php）を開いて、ソーシャルボタンのブロックを出力コードに追加することもできます。 または、ファイル関数のテーマ（functions.php）を介してzrobitiを実行できます。
私はあなたにオプションを示します、そしてあなたはあなたがあなた自身のために必要なものを選ぶことができます。
出力コードsingle.phpにブロックを挿入する
Properedzhennya：すべてのDIYスプラウトの穂軸の前 バックアップコピー single.phpファイル！
WordPress管理パネルを開きます。 « 星空の外観» — "編集者" — 「シングルエントリ（single.php）」.
終了コードで、場所を確認し、統計のレビューを終了して、コメントまたはナビゲーション後を開始します。 同じ場所にソーシャルボタンのブロックのhtmlコードを挿入する必要があります。
スクリーンショットを見て、コードに焦点を当てることは尊重されますそのコメント。 І以下にガイダンスコードを挿入します。
当然、テンプレートには多くの裁量がありますが、変更はありません。考えられることは何でも、折りたたみ可能なものはありません。 それまでは、バックアップコピーがあり、恐れることはありません。
そして、軸i自体は、ソーシャルボタンのブロックのhtmlコードです。
コードの背後にある説明： 1ブロックのDIVіzクラス。 滑らかなマージウィンドウで強制的に開くために、onClick=window.open関数が有効になります。 物品にかかる力の置換は、cimコードの軸によって設定されます。 フォースのスキンには独自のクラスがあり、それを介してボタンのイメージが想定されます。
出力コードを介した挿入が完了した相手。 私はあなたにcssスタイルを有効にするために必要なものを与えました。
テーマの機能を介してsingle.phpの出力コードにブロックを挿入する
事前に：穂軸の前に、functions.phpファイルのバックアップコピーを作成してください！
このオプションを獲得するには、functions.phpファイルを開き、最後にコードを追加する必要があります。
/*ソーシャルボタンを挿入します*/ add_action（ "comments_template"、 "soc_button"）; 関数soc_button（）（？> また、コードを挿入する場合は注意が必要です。他の記号を見逃しても問題はありません。 PHPコードを閉じる方が良いですか？>。 そうしないと、サイトが機能しなくなります。コードの背後にある説明：ソーシャルメディアボタンが配置される場所は、APIキーcomments_templateを介して設定されます。 cimキーの後ろには、コメントの前のスペースがあります。 ソーシャルボタン自体のコードは、phpコードとphpコードのリターンタグに配置されます。 コードで、私はそれらを赤い色で認識しました。 挿入のすべての狡猾さを持っている人 htmlコード PHPでは、テーマ関数を介して。
このようにして、このように完成したので、画像をサイトに取り込むことに移りましょう。
ボタンの画像をサーバーにアップロードする
たとえば、ソーシャルボタンの画像からスプライトスプライトを作成しました。 あなたはそれらを利用することができます。
スプライトは、お尻のようなバイコリストのように、それほど重要ではなく、3.97kbとより不必要なボタンです。 そして、それがスプライトの場合、スキンボタンではなく、ベースに1つだけかかります。
画像をキャプチャするか、独自の画像を準備してサイトでキャプチャします。 これらの問題を非難するのは私のせいではないと思います。 このスプライトにメッセージを送信することは、cssスタイルを介したボタンのデザインに必要です。
CSSスタイルの接続
このkrokはzvichayno、vikonatiを最初にすることができますが、私はvolіyuvikonatiをすべて折りたたんでいきます 技術的な仕事、次にcssスタイルからの受信に進みます。
また、サイトのデザインに使用されるstyle.cssファイルを追加します。 Іq軸スタイルを挿入します。
共有a（display：inline-block; vertical-align：inherit; margin：5px 0 0 2px; padding：0px; font-size：0px; width：40px; height：40px; background：url（ "http：// test ..png "）繰り返しなしスクロール0px 0px透明;）。share a.vkontakte（背景：url（" http：//test..png "）繰り返しなしスクロール-168px 0px透明;）。share a.google （背景：url（ "http：//test..png"）繰り返しなしスクロール-252px 0px透明;）.share a.livejournal（背景：url（ "http：//test..png"）繰り返しなしスクロール-336px0px透明;）.share a.twitter（背景：url（ "http：//test..png"）繰り返しなしスクロール-42px 0px透明;）。share a.mail（背景：url（ "http ：// test..png "）no-repeat scroll -294px 0pxtransparent;）.share a.odnoklassniki（background：url（" http：//test..png "）no-repeat scroll -126px 0pxtransparent;） .share a.pinterest（background：url（ "http：//test..png"）no-repeat scroll -210px 0pxtransparent;）.share a.liveinternet（background：url（ "http：//test..png "）繰り返しなしのスクロール -378px0px透明; ）.share a.evernote（background：url（ "http：//test..png"）no-repeat scroll -420px 0pxtransparent;）.share a.bookmark（background：url（ "http：//test。。 ）png "）繰り返しなしスクロール-462px0px透明; ）.share a.email（background：url（ "http：//test..png"）no-repeat scroll -504px 0pxtransparent;）.share a.print（background：url（ "http：//test。。 png "）繰り返しなしスクロール-546px 0px透明;）。share a.digg（背景：url（" http：//test..png "）繰り返しなしスクロール-588px 0px透明;）。share a.spring（背景：url（ "http：//test..png"）繰り返しなしスクロール-630px 0px透明;）
コードの背後にある説明： class.shareは、ブロックに明るい外観を割り当て、スキンボタンを展開し、単一の背景を設定します。 そして、さらにスキンパワーは独自のクラスを持つことができ、そのようなスキンパワーは、背景のパワーを通して、ボタンの外観が割り当てられます。 cssスプライトやスキンボタンなどのWiconボタンの幅と高さは40ピクセルで、その間に2ピクセルのマージンがあるため、スキンボタンの画像を正確に指定できます。 最初のボタンは0として表示され、他のボタンは42として表示されます。 コードqiでは、意味はオレンジ色でマークされています。 スプライトへの送信もオレンジ色で表示され、スプライトへの途中で変更できます。
これで、ソーシャルボタンのブロックを作成するプロセス全体が完了します。 大胆にリビジョンに進むことができます。
また、ビデオチュートリアルもあります。このチュートリアルでは、読み取りのプロセス全体が直接表示され、ボタン自体のロボットにポールが表示されます。 あなたのウェブサイトやブログでそれを驚かせてください。
Axisは口ひげを生やしました。 Z残りの頭を置きます。 新しい記事やビデオレッスンであなたに幸運と幸運を祈ります。
