プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
画像表示を高速化してサイトパフォーマンスを向上させる5つのTIPS
[対象: 中〜上級] ウェブサイトのパフォーマンアップ、平たく言うとページ表示の高速化は多くの読者さんにとって興味がある分野のようです。 僕も同じでスピードアップのためにいろいろ調べています。 そこでここまでの収穫として、今日は、画像ファイルの表示を高速化してサイトのパフォーマンスを向上するTIPSを5つ紹介します。 一応、簡単に実装できそうなものから順に並べてあります。 画像ファイル表示を高速化してサイトのパフォーマンスを向上させる5つのTIPS 1. 画像のファイルサイズの縮小 いちばん簡単にできて効果が期待できるのは画像のファイルサイズを小さくすることです。 画像編集ソフトを使ってサイズを縮小できますが、画質を損ねることなく小さくすることは普通の人にはさじ加減が難しいところです。 そんなときはツールを使いましょう。 画像のファイル縮小ツールはたくさん出回っていますが、インストールする
私がweb制作でよく使うサイト47+α 作業ごとリスト
web制作でお世話になっている便利サイト 今回は画像もなしに一覧にしてしまおうと思います。使うときにパッと一覧するような実用性を考えているので、詰めてあった方がいいですよね。 webcre8がwebサイトの制作をしているとき頻繁にアクセスするサイトリストです。これらは大半、webcre8がこれまで「*役に立つ」タグをつけてブクマ管理していたものですが、他にも漏れがあったり他のタグに入っていたり、何故か毎回検索して使っていたサイトも多いので今回ひとまとめにしてついでにシェアしてみようかなって感じです★要はリンク集ですね。 これらのサイトをぐるぐる回っているうちにみるみるwebサイトが…出来てくると良いですねｗ 素材サイト まずはよくある素材サイト集。当然全てフリーで商用可です。webcre8は写真をバナーや商用サイトに使う事が多いので、有料素材が用意出来る場合を除き普段からクレジット不要のこ
Google画像検索で無料で使える画像を絞り込む方法 – @attrip
↑この画像は、無料で使える。武田梨奈さんの写真 Google画像検索で無料で使える画像を絞り込む方法 まず、Googleで画像検索をする。 https://www.google.co.jp/imghp ここで検索したいキーワードをいれる。 右側にこんな設定ボタンがあるので押す。 検索オプションを選択し、一番したにライセンスの部分で自由に使用または共有できるを選択。 これで無料で使える画像を簡単に選択することができますよ。 試してみてね！ なお、googleのサポートの内容には、 http://support.google.com/websearch/bin/answer.py?hl=ja&answer=29508 “検索したコンテンツを再利用する前に、ライセンスが正当であるか、および再利用に関する規約をご自分で確認してください “ と書いてあるので、確認してからどうぞ。 とはいえ確認するの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインも豊富、カスタマイズも可、ローディング用のGIFアニメーションをさくっと作成できる -Loader Generator