「出会えたことに感謝したいCSSベスト3」まとめ - Togetter

2018/04/08 540 users Togetter Flex None border-box

box-sizing: border-box; →出会えた時の感動 content: “”; →::before ::afterとの組み合わせ display: none; →blockとのコンビネーションが好き flexは殿堂入りぽいからそれ以外にしてみました #出会えたことに感謝したいCSSベスト3 続きを読む

HTMLとCSSのコピペですぐに実装できる見出しデザイン14選 | UX MILK

2016/09/14 824 users CSS コピペ UX MILK HTML 見出しデザイン

WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば... 続きを読む

たった数年でシリアの街並みがどれほど激変したのか…内戦の前後を比較したビフォー・アフター写真:らばQ

2016/04/13 254 users 内戦 before ＩＳＩＳ シリア 街並み

こちらはISISによって破壊された、シリアの古代遺跡（ベル神殿）の前後を比較したもの。 2011年から内戦・紛争が始まったシリアでは、避難生活を強いられる難民の数は1100万人以上（全国民の半数）と言われ、国外に逃れた難民だけでも400万人を超えています。 この数年でシリアの街並みがどのように破壊されたのか、実感できるビフォー・アフター写真をご覧ください。 Before 「2008年」 After... 続きを読む

After Effects 全エフェクト - YouTube

2015/08/08 572 users YouTube original 解像度 業種 フル解像度

After Effectsの全エフェクトを解説（1日1本ずつアップロードを行って行きます。） オススメ★は個人的な意見となりますので、業種、価値観によりことなりますので目安程度とお考えください。 （※解像度をOriginalに変更頂く事でフル解像度の画面でご覧頂けます） フリーで学べる動画講座 Adobe Authorized Training Center 電報児(DENPO-ZI) After... 続きを読む

CSSの content プロパティーを使いこなそう！ | Webクリエイターボックス

2015/04/08 405 users CSS before Webクリエイターボックス 擬似要素

CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像... 続きを読む

ペパボエンジニア研修 ~前半戦~ - ポンコツWebエンジニアがぱるると一緒にセンターを目指す diary

2014/12/06 101 users diary before ペパボ 前半戦 動機

2014-12-06 ペパボエンジニア研修 ~前半戦~ 目的や動機 Webアプリケーション制作未経験者が研修を通して何を感じたのかを伝えたい (Before, After) ペパボの研修内容はどんなことをやっているのか 本格的にエンジニアの研修が始まったのは７月からでしたが、自分が４ヶ月間でどんな成長をしたのかを一度整理する時間を設けたかった 入社前に自分もペパボの研修ブログを書いていた人のブログ... 続きを読む

floatを解除する方法のまとめ: 小粋空間

2013/03/27 678 users float 小粋空間 CSS 擬似要素 まとめ

CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高... 続きを読む

CSSの擬似要素を使った見出しデザイン｜Webpark

2013/01/27 633 users before Webpark ボーダー 見出し 都度

このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「... 続きを読む

CSS3のみで書かれたアイコンセットがすごいな | IDEA*IDEA

2012/11/11 279 users CSSDeck アイコンセット before IDEA 執念

これ、全部CSS3のみですって。 ↑ なんか執念を感じる。 ↑ :before, :afterを駆使して作られているようです。 画像を使いたくない場合や、CSS3のお勉強をしてみたい方はいかがですかね・・・。 » CSS3 Monochrome Icon Set | CSSDeck 続きを読む

たった一つのdiv要素とCSS3を使ってiPhone 4Sを描いてみた、がすごいな | IDEA*IDEA

2012/09/09 112 users IDEA div要素 右下 iPhone 4S CSS3

このスクリーンキャスト（っていうのか？）が凄いですよ。たった一つのdiv要素だけでiPhone 4Sを描いちゃっています。 ↑ 右下にあるプレイボタンでコーディングしている様子を再現することができます。 変態的なテクニックが満載ですな・・・。やっぱり:beforeと:afterを使いこなせるようにならないとなー。ご興味がある方は以下からどうぞ。 » Creating Single Element ... 続きを読む

[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス

2012/07/18 574 users コリス before hover チュートリアル CSS

HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。 擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3で... 続きを読む

JavaScriptのコードサイズを圧縮するための変態テクニック集がすごい | IDEA*IDEA

2011/05/30 394 users IDEA function 強火 犠牲 可読性

「強火で進め」で紹介されていた「Byte-saving Techniques」がすごいっす。可読性を犠牲にしてでも、とにかくサイズを圧縮したい！という人のための変態テクニック集ですｗ。 いろいろ参考になったのですが「へぇ」というものを中心に紹介してみます。 function(t,d,v,i,f){...} // before function(a,b,c,d,e){...} // after ↑ ... 続きを読む

[CSS]「:before」「:after」でタブのディテールを強化するスタイルシート | コリス

2011/05/15 121 users コリス Safari Firefox Chrome ディテール

対応ブラウザは「:before」「:after」はCSS2ですが、スタイルに角丸などのCSS3を使用しているため、CSS3対応ブラウザ（Firefox, Chrome, Safari, IE9）でご覧ください。 HTML リスト要素を使用して、実装します。 Home Abou... 続きを読む

あなたのサイトも最高2倍速に？！Google純正のサイト高速化モジュール『mod_pagespeed』だと・・・ - IDEA*IDEA ～ 百式管理人のライフハックブログ

2010/11/03 763 users before Apache IDEA モジュール ＨＯＭＥ

Home > Google関連 | 開発ツール・技術 > あなたのサイトも最高2倍速に？！Google純正のサイト高速化モジュール『mod_pagespeed』だと・・・ Older GoogleからApacheのモジュールが出たようですよ。その名もmod_pagespeed。名前のとおり、サイトの表示速度をちょっ速にしてくれるものらしいです。 ↑ before & afterの動画。うーむ。 実... 続きを読む

絶妙な二重枠線をCSSだけで実現する方法… - IDEA*IDEA ～ 百式管理人のライフハックブログ

2010/06/22 240 users before IDEA 盲点 CSS ボックス

これは目から鱗。今度使わねば。 なんらかのボックスを表示するとき、二重枠線になっていると綺麗ですよね。立体感も出ますし。 ↑ こういうやつ。 これって以前はボックスを二重に配置して実現していたりしましたが、:beforeと:afterを使えばうまいことできるらしいですよ。盲点でしたね、確かに。 ↑ 動画でもご紹介。 :before、:afterが使えるブラウザに限られるのがあれですが（最近は対応し... 続きを読む

色の組み合わせでもう迷わないためのカラーセオリー : ライフハッカー［日本版］, 仕事も生活も上手くこなすライフハック情報満載のブログ・メディア

2010/02/22 344 users カラーセオリー ライフハッカー 組み合わせ before 仕事

Webツール , デザイン 色の組み合わせでもう迷わないためのカラーセオリー 掲載日時：2010.02.22 22:00   コメント [0] , トラックバック [0] Webデザインでも企画書でも、色使いや色選びというのはなかなか悩ましいものです。デザインブログ「Before & After」に、デザインのプロでなくても上手な色選びができる、PDFのカラーセオリーのパンフレットがありました。 ... 続きを読む

[CSS]floatを解除する「clearfix」のIE6/7に対応した改良版 | コリス

2009/12/09 384 users clearfix コリス float visibility

floatを解除する際にclearを使用せずに解除する「clearfix」の改良版をPerishable Pressから紹介します。 The New Clearfix Method いわゆる旧タイプのclearfixはMac IEも対応ブラウザに含まれているため、スタイルシートは下記のようになります。 旧タイプのclearfix .clearfix:after { visibility: hidd... 続きを読む

PNG画像をいい感じに最適化してくれる『punypng』 - IDEA*IDEA ～ 百式管理人のライフハックブログ

2009/08/18 218 users PunyPNG IDEA before おー PNG画像

PNG画像の最適化手法についてはたまに話題に上りますが（ここらへん）、そうした処理を自動でやってくれるっぽいツールのご紹介。 punypngを使えば画像をアップするだけでささっと変換してくれますよ。 ↑ 変換中。 ↑ おー、確かに。 実際やってみたのでBefore＆Afterをば。上にもあるように約8%圧縮されています。 ↑ Before。 ↑ After。 まったく遜色ないですね。覚えておいて損... 続きを読む

俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag

2007/05/26 166 users clearfix visibility Lucky Bag

clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _he... 続きを読む

Image * After - currently 20610 free textures and images available

2006/06/03 117 users image

Image*After is a large online free photo collection. You can download and use any image or texture from our site and use it in your own work, either personal or commercial. Like our site? Why not Tip ... 続きを読む

Image * After - currently 26837 free textures and images available

2006/06/03 596 users image

Free high resolution images and textures for commercial and personal use. Daily additions. Free hi-res stock photography, with abstract graphics search.Image*After is a large online free photo collect... 続きを読む

GIGAZINE - 1万3000枚以上の写真をロイヤリティフリーで提供する「Image * After」

2006/06/03 360 users ロイヤリティフリー GIGAZINE image 写真

個人での利用はもちろん商用でも無料。素材をそのままネットで再販しない限りはOK。ユーザー登録不要でダウンロードできます。 ブログなどの作成時に記事にちょっとしたイメージ画像を付けるといい感じになるのですが、よい画像が見つからないときに便利。また、サイズも大きいのでちょっとした印刷レベルで大丈夫。暑中見舞いや年賀状にも使えるかも。 Image * After http://imageafter.co... 続きを読む