動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
櫻田潤 | インフォグラフィック・エディター
ニュースレターに登録 ビジュアルシンキングの新着コンテンツや最新動向、気になった話題をメールでお届けします。
OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
世界各国のWebデザインと日本のWebデザインの特徴
2013年10月29日 Webデザイン, 海外情報 私は今まで日本、カナダ、オーストラリア、イギリスと、4カ国での滞在経験があるためか、各国のデザインの違いについて尋ねられる事があります。しかし日本以外のすべての国は英語圏。Webデザインでいえば違いを感じたことはあまりありませんでした。そこで今回は今まで触れる機会のなかった言語圏のWebサイトを比較しました。アメリカ、フランス、サウジアラビア（中東）、中国、そして日本。それぞれのデザイン事情の違いを知って、日本のWebデザインについても考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ マクドナルド アメリカ 現在は全体的に濃い青をメインに使っていますが、これはキャンペーンによって変更されます。ナビゲーションバーやページしたのバナーエリアは基本的に固定。 例えば別のプロモーションページではこんな感じ。一番見せたいものをひと
954 free SVG and PNG icons easily customizable for games or apps | Game-icons.net
Already 4149 free icons for your games Last Update Apr 7, 2024 | Popular ones with random colors About the projectAn ever growing collection of free game iconsDozen new symbols are added weekly and organized in intuitive categories to offer both a comfy browsing and let room for serendipity. Stay up to date by following the project on twitter or just fetching the RSS feed. Easy styling thanks to S
Compress PNG Images Online
Click UPLOAD FILES to choose up to 20 PNG images you want to compress. Wait for the upload and compression processes to complete. If you need more control over the PNG compression quality please use thumbnails to activate the manual mode. Click DOWNLOAD ALL to get all the compressed files at once, grouped in a ZIP archive. Or you can download each image individually. PNG Compression In relation to
How to Create a Clean Calendar in CSS3 & jQuery
Jef Vlamings had an idea to build a calendar app called LiveCal, which was supposed to become a platform where you could share calendars. The whole idea was that calendars would become something you subscribe to. Due to the complexity of the idea and the lack of knowledge, the project never really took off. However, he made a CSS3 calendar with some jQuery animation while he was working on the pro
洗練されたデザインのUIエレメントのPSD素材のまとめ
そのまま使ってもよし、デザインの勉強にもよしの洗練されたデザインのUIエレメントのPSD素材を紹介します。 素材は全て商用でも無料で利用できますが、ライセンスがそれぞれ異なるのでご利用の際にはご確認ください。
インスピレーションを刺激させたい時に大抵見てまわるWebサイト集
インスピレーションを向上させたい 時に僕が見てまわるWebサイトを ご紹介。というか基本的に殆ど閃く 事は皆無に等しいレベルでナンセ ンスな人間なのでドーピング的に 綺麗なものを見るようにしています。 というわけで、発想力の有る方には全く役に立たないエントリーです。個人的には勉強を兼ねたWebデザイン、フォトグラフィのためのインスピレーション向上が目的ですが、「発想力を上げる」というのは様々な業種の方にも通ずるものがあるのではないかと思っています。 パッと見、一貫性の無いまとめですが、どのサイトからもアイデアを貰ったことがあるのでそういったWebサイト集になります。順不同。 Dribbble 世界中のデザイナーの作品が見れるサイトです。新しく作ったコンテンツを公開してくれます。色やカテゴリで探せますが、どれも素敵なのでダラダラ見てるのも楽しいです。 Dribbble We heart it
Apple - Safari - Introducing Safari 4 - See the web in a whole new way
Safari is the best way to experience the internet on all your Apple devices. It brings robust customization options, features powerful privacy protections, and optimizes battery life — so you can browse how you like, when you like. And when it comes to speed, it’s the world’s fastest browser.1 Learn how to make Safari your default browser Safari comes with industry-leading privacy protection techn
iPhone アプリと Web デザイン Part.3 - soundscapeout (仮)
「iPhone アプリと Web デザイン」というタイトルで、淡々と美しいサイトを紹介していくシリーズ。 今回は３回目なのですが、数が多かったので、Part.4 もすぐにアップする予定です。 iPhone アプリと Web デザイン Part.1 iPhone アプリと Web デザイン Part.2 もあわせてチェックしてみてください。 Wallpaper* City Guides Wallpaper* City Guides | Phaidon Store Pro Football News IndyStar.com | Indianapolis Colts iPhone Application | The Indianapolis Star Currencies Currencies - Currency conversion with style! Flickit Pro Flic
リンク先のFaviconを取得・表示できるWebサービス(API)とJavaScript・プラグインまとめ : WebとPCのメモ帳
自分用に外部リンクのFaviconを表示できるサービスを探す必要があったので、発見できたもので2009年11月現在でも使えるAPIサービス・JavaScript・プラグインを一通りピックアップ。通常のリンク先以外にも、コメントやトラックバック欄に表示したりと色々と使い道が多いはず。 Favicon Converter favicon (ファビコン) 画像変換サービス - Favicon Converter 日本のサービス。FaviconをPNGに変換した画像を呼び出すことができる。呼び出しURLの一部を変更することによって、「faviconを取得できなかったときのデフォルト画像」をファイルマーク、矢印、透明画像などから選べるのが特徴。 書式 http://favicon.qfor.info/f/[URL] [URL]部分に取得したいリンク先のURLを入れる。 例 http://favico
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
iPhoneデザインボックス
StackPath
新着記事
Business-Class Web Hosting by (mt) Media Temple
New Advanced WordPress Theme Deep Blue » HeadsetOptions
http://www.designwalker.com/2010/06/jquery-forms.html
Experiment: 3D CSS cube, use arrow keys to rotate — Paul Hayes