今年もCSSの進化がすごいです! 次のプロジェクトに使ってみたくなるようなワクワクする素晴らしいアイデア満載のスタイルシートのテクニックを紹介します。 CSSアニメーションはより洗練され、単に要素を動かして楽しむだけでなく、意味のある動きとしてより効果的に利用されるものが目立ちました。 まずは、アニメーションの表現もここまでできるのかと驚いた「Marvel Logo animation」から。 ※一部は、実際に動作するデモのコードを埋め込んでいます(全部をコードにしたらページが重すぎました)。
![CSSの素晴らしいアイデアが満載!2015年スタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/97a91c64f542c2a87a676dd297ae719b217a54b8/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015120905-03.gif)
未組立プラモ写真家。稀に組む。山登る。からぱたへのお問い合わせ、文章・写真・DJ・飲酒のオファーはTwitter @kalapattar からどうぞ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 1.画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 2.画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css 3.float を使わ
編集編 1. 使えるものはOffice Picture Managerでも使え Lightroom, Photoscapeその他いろいろありますが、使えるものはなんでも使いましょう。撮って出しなんて中級者になってから考えればよいのです。 クソ写真も編集次第でどうとでもなります。 wonodas.hatenadiary.com 構図編 2. 自信がないなら3分割交点構図 三分割交点構図は七難を隠します。いたるところでおすすめされているのはそんなわけです。 デジカメならたいていガイドが付いているのでそれに従ってとればよいだけ!簡単です。 (Nikon D90/Nikkor 50mm f1.4) 3. 日の丸構図は真上または真正面から。水平と垂直をきっちりとること 実は難しい日の丸構図。撮るなら真上、真下。水平と垂直は必ず出す。なお画像内に直線が含まれる場合、収差の少ないレンズを選ぶ必要がありま
今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます! こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです!!予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました! 気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ! CSSテーブルデザインテクニック01 HTML テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
ブログや日記、メールなどを作成している際についつい「正しい文章」を書いてしまい、読んでいる人を辟易させたことはありませんか? 日本語が乱れがちな現代社会。 没個性を重んじる風潮が強いこの国において、”この人は正しい日本語が扱えるきっちりした人だ”と言う印象を与えることは、あなたのイメージを損ねる原因となりかねません。 そこで本日は、読んでいて気持ちの悪い「間抜けな文章」を書くために知っておくべき6つのテクニックをご紹介しましょう。 間抜けな文章を書くために では実際に気持ちの悪い文章テクニックと文例を見ていきましょう。 最初に出ている青枠は気持ちの悪い(今回の講座においては正しい)文章、赤枠はきっちりと構成された大変に読み応えのない悪い例です。 1.敬体と常体を入り混ぜましょう。統一性が無くなるからだ。 私は篠崎愛ちゃんが大好きだ。 彼女の豊満な体にばかり目がいきがちですが、注目すべきはそ
2013年01月06日22:58 by tkfire85 デジタル一眼レフカメラ初心者が知っておきたい、基礎&応用のまとめ。 カテゴリ管理人 雑談 tkfire85 今まで、富士フィルムのコンデジ「FinePix F100fd」を使っていましたが、初のデジタル一眼である「α NEX-C3」を購入しました(正確に言うとミラーレスというやつです)。ぼかしであったり、ISO感度の設定、シャッタースピードなど、コンデジに比べると設定範囲は広いです。できれば綺麗な写真が撮りたい!今回はデジタル一眼カメラを使う上で参考にしておきたいサイトや記事を紹介します。 ●基本 何事も基本が大切です。本当に初歩の初歩から学ぶ事も大切だと思います。 IMG_6633 / y_uno ・デジタル一眼レフカメラ入門初心者講座 ・カメラ遊遊塾|デジタル一眼レフ入門 ・デジタル一眼レフカメラ写真撮影方法や上手な写真の撮り方
知っておきたい写真が劇的に上手になる25のテクニック デジタルカメラのおかげで気軽に何枚でも撮影できるようになり、素人でも写真を撮る機会や人に見せる機会が増えました。 ちょっとしたコツ、ちょっとした心がけひとつで、写真が劇的に良くなるならば試してみたいものですよね。 そんな劇的に写真が上手になる、25のテクニックをご紹介します。 1. 太陽の撮影は望遠レンズを使う。 悪い例 良い例 2. 人物写真は望遠レンズを使うか、ズームレンズの望遠側を使おう。悪い例 良い例 3. 旅行写真にはアクションを入れる。 悪い例 良い例 4. 夜景は日が沈んでから20分後に撮影する。 悪い例 良い例 5. 葉の撮影は色の種類を抑え、メインの被写体をハイライトする。 悪い例 良い例 6. 人を水平に撮るときは足を中心にするのを避ける。 悪い例 良い例 7. 生物のマクロ撮影は植物のレベルまでに近づく。 悪い例
「どうやって撮ったの?」斬新なテクニックで撮影された「打ち上げ花火」の写真いろいろ 夏の風物詩と言えば花火。はかなく消えて行く様は、いくら見ていても飽きないものですよね。 普通の花火の写真なら見慣れていると思いますが、「こんなのどうやって撮ったの?」と驚くような作品がありました。 ユニークな撮影法による写真をご覧ください。 1. すごいことになってる! 2. 写真家のDavid Johnson氏が撮影したもので、カナダのオタワで打ち上げられた花火だとのことです。 3. さて、いったいどうやって撮影しているんだろうって思いますよね。 4. 撮影の方法ですが、まずフォーカスを外し、露光時間は1秒(いくつかの写真は2秒)。そして花火の音が聞こえたらフォーカスし直しているとのことです。 5. いつも見ている花火とは全く違うものですね。 6. 深海生物みたいな色と形。 7. パイナップル。 8. 森
アンドロイドのバッテリーを伸ばすためのアプリと、テクニックを紹介します。どうやらバッテリーを一番消費するのはディスプレーと3G回線らしい。 スマホのバッテリーを長持ちさせるには、「Wi-Fiをオフにする」「バッテリー節約アプリをインストールする」など都市伝説的な似通ったようなことをいくらでも見てきた、という人が多いと思います。 Sponsored Link こちらの画像は、「SONY Xperia Z3」の待受けの状態でどれくらいバッテリーがもつか計測した時の1時間毎のバッテリーの残量です。 なんと24時間経過して、77%。48時間経過して66%もバッテリーが残っていました。 平均すると1日あたり11%減。つまり、9日間ぐらいは待受けだけでもつ計算になります。 このページでは、本格的なバッテリーを長持ちさせる方法と検証。そして、なぜバッテリーが減ってしまうのか、などを紹介したいと思います。
こんにちは Latin です。 「Retina」 ではありません。ラテンの「Latin」です。 もうすぐ夏が終わりそうというのに、ウチのビルの喫煙所はサウナのように蒸し暑いです。 ダイエット中の方はぜひご活用ください! さて今回ですが、デザイン分野での記事を Postします。 何かと制作機会の多い「アクセスマップの作成」の時短テクニック!(?) みなさんの時間短縮テクニックなどもありましたらぜひご意見頂けると幸いです。 2012.08.27 記事の内容を一部訂正いたしました。 目次 Illustrator の時間短縮!ウェブやチラシで使うアクセスマップの作り方 Point.1 Google Maps を使って時間短縮 Point.2 スクリーンショット画像に沿ってトレース Point.3 お好みでトッピングを追加 Point.4 仕上げにクリッピングマスク そもそも地図の図案を起こすのも、
ちょっと前に雑誌作りをしていて(全200ページくらいorz) 大量な人物補正をしなくてはいけませんでした。 その時に学んだPhotoshopの人物補正テクを分かりやすくご紹介したいと思います。 by:dancing+bambi 補正とは? 画像劣化について 人物補正3つのテクニック step1.明るさ・コントラスト step2.トーンカーブ step3.部分補正 -応用編-色黒美人を色白美人に 補正とは? 意味としては”足りないところを補って、誤っている部分を正す”みたいな感じです。 せっかくとった写真、もうちょっとこうだったらなぁ〜っていうのを直していきます。 そしてまず初めに画像劣化についてかるく知っておきましょう。 画像劣化について JPEGデータは補正をすればするほど劣化していってしまいます。 つまり今からやろうとしていることは画像を劣化させてしまう行為なんです。 といっても補正し
何度もお知らせしていたので、もうとっくに発売されていたかと思われそうですが、2011年11月4日、『朝活手帳2012』がやっと発売しました! 発売日に合わせ、自分が朝活手帳の内容を10分程度でプレゼンするとしたらどんな資料を作るかという観点から専用サイトにてパワーポイント資料を紙芝居形式で公開しています。 今回はこの、専用サイトに掲載した資料を使って、プロとアマチュアを分ける画像テクニックについてお伝えします。 どうせプレゼンするならかっこいい資料を作りたい、でも、そもそもどこをどうやったらかっこいいのかが分からない、という方は多いのではないでしょうか。 私が考える、プロとアマチュアの差は「統一感」です。 統一感を表すためのテクニックはたくさんありますが、簡単で効果が高い手法のひとつが、今回紹介する「プレゼンイメージに合う画像を背景として使う」ものです。 今回の資料では、表紙のバックに、「
説得力のあるコピーを書いて、読者の共感を得ながら、多くの売上を上げたくありませんか? ムダな質問でしたね。もちろん、あなたの答えはYesだと思います。 単刀直入に言うと「説得」とは、Win-Winの関係性を作り上げることです。読者が自然と同意してくれるようなコピーの書き方を心がけることで、断りようのないオファーが可能になります。 そして、コピーの書き方の中でも、重要なのはターゲットを絞ることです。全ての人をターゲットとしても、良い結果が生まれることはありません。 また、もちろん、あなたのオファーをより魅力的に見せて、売上を上げるためのテクニックがあります。今回は、説得力のあるコピーの書き方を身につけるための10のテクニックを紹介します。 1.評判 販売心理学を良く知っている人ほど、評判の重要性を認識しています。もちろん、評判は、説得力のあるコピーの書き方の重要なポイントの1つです。 あなた
愛知県名古屋市の大学向けシステムパッケージ販売、開発、導入をしている、IT企業で働く社員たちのお話です。 車(新車)を購入したことがありますか? あまり知られていませんが、車の販売は、芸術的ともいえる戦略が駆使されています。 洗練されたCMや新聞、雑誌広告で人々を魅了し、緻密なまでに計算されつくされた細かな心理テクニックで車屋(ディーラー)がお客に「買わせる」。 車は18歳の若者から、仕事バリバリのサラリーマン、60歳越えの老人まで、多種多様な人たちを販売戦略のターゲットとしていますが、高額商品の中で、ここまで幅広いターゲットに買わせ続けているって、すごいです。 この一連の販売プロセスは、日本を代表する大企業が何十年にもわたって取得してきた「買わせる」データをエリート中のエリート達が、戦略として練り上げた最高の「買わせるシステム」だと思います。 ※ちなみに当記事で「売る」ではなく「買わせる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く