Tobias Ahlin
Blog. Responsive type scales with composable CSS utilities Read more With the help of calc(), clamp() and CSS vars, we can create composable, responsive, and fluid type scales that smoothly adapts to viewport and container widths. Hiding empty elements with CSS :empty and :has() Read more You might be used to toggling classes on elements to handle state styles. What if we could just write CSS that
インスピレーションを刺激させたい時に大抵見てまわるWebサイト集
インスピレーションを向上させたい 時に僕が見てまわるWebサイトを ご紹介。というか基本的に殆ど閃く 事は皆無に等しいレベルでナンセ ンスな人間なのでドーピング的に 綺麗なものを見るようにしています。 というわけで、発想力の有る方には全く役に立たないエントリーです。個人的には勉強を兼ねたWebデザイン、フォトグラフィのためのインスピレーション向上が目的ですが、「発想力を上げる」というのは様々な業種の方にも通ずるものがあるのではないかと思っています。 パッと見、一貫性の無いまとめですが、どのサイトからもアイデアを貰ったことがあるのでそういったWebサイト集になります。順不同。 Dribbble 世界中のデザイナーの作品が見れるサイトです。新しく作ったコンテンツを公開してくれます。色やカテゴリで探せますが、どれも素敵なのでダラダラ見てるのも楽しいです。 Dribbble We heart it
コンプレックス配色をうまく使った、素敵なWebデザイン例
様々な配色の中でも個人的に 気に入っているのがコンプレッ クス配色という配色です。自然 の中ではあまり見られない配色 で都会的なイメージや見る人に 印象を与えるのに大きく貢献して くれます。 様々な配色の中でも個人的に 気に入っているのがコンプレッ クス配色という配色です。自然 の中ではあまり見られない配色 で都会的なイメージや見る人に 印象を与えるのに大きく貢献して くれます。 不調和ゆえのの調和配色と言われるコンプレックス配色を利用したWebデザイン例。個人的に必要になりそうなのでメモとして残します。コンプレックス配色に関しては以前記事にしましたので宜しければ合わせてご覧下さい。 The English Network グレーに、やや紫がかったレッドカラーが印象的です。統一感もあって見やすい。 The English Network globaltradeqatar こちらもレッド&グ
60 Minimal and Super Clean Web Designs to Inspire You - Web Design Ledger
2 Pings & Trackbacks Pingback: 60 Excellent Examples of Illustration in Web Design | Inspiration Pingback: 35 Colorful Web Designs to Inspire You | Inspiration 54 Comments A wonderful collection of minimalist designs. Well done. Nice and quite fresh showcase….Root looks great. 🙂 Great list for inspiration, I love minimalist web design…thanks for share. Thanks for this bunch of fresh inspiration.
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.1
先日、勢いで Macromedia Fireworks 8 を購入しました。私はどうも Photoshop や Illustrator が苦手、というか使いこなせません。メニューが豊富すぎてわけがわかんない。が、Fireworks はバージョン2 ぐらいから会社で使っていて、相性がいいのです。 で、せっかく買ったので、Web2.0っぽいデザインにチャレンジしてみました。まずは第一弾。「mirror reflection（反射）」です。 こういうやつ。 反射させたいオブジェクト（A）をコピー＆ペーストで複製（B）します。 複製したオブジェクト（B）を選択して、[修正]-[変形]-[縦反転]で反転させます。 反転させたオブジェクト（B）を元のオブジェクト（A）の下に移動させます。 反転させたオブジェクト（B）を選択して、[コマンド]-[クリエイティブ]-[イメージのフェード]を選び、メニューか
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.4
今回は、Mac OS X のDashboard っぽいバーを作ってみます。（ちなみに、私は根っからのWindowsユーザーで、Dashboard を触ったことはありません・・・） まず、角の丸みが100%の角丸矩形を描きます。塗りの色は#000000、ストロークは「なし」にしておきます。 描画した矩形をコピー＆ペーストで複製します。（下の図ではわかりやすいように複製したほうの塗りの色を変えています。）元の矩形を「base」、複製したほうを「gradation」とします。 次に「gradation」の大きさを変えておきます。幅と高さをそれぞれ2pxずつ小さくしてください。 矩形ツールで「gradation」の半分の高さの長方形を描き、「gradation」の上辺と揃えます。長方形の塗りの色を#000000、透明度を50%ぐらいにすると、重なり部分が見えるので調整しやすいです。 ここで、Par
Web 2.0 Badges - Useful collection of stylish web 2.0 badges and badge generator.
Entering college is an exhilarating milestone in your life, marking the beginning of a period filled with new experiences, knowledge, and personal growth. As you stand on the threshold of this transformative period, it’s natural to feel a mix of excitement and anxiety. For those who have attended top educational institutions like A level schools in Singapore, the transition can be both thrilling a
有名な企業のロゴをWeb2.0風にする - GIGAZINE
Web2.0風に仕上げた画像の特徴と言えば、 ・角が丸い ・グラデーション効果 ・鏡面に映りこむ ・フォントが大きい ・色彩がカラフル ・あるいはパステルカラー ・つやつやぴかぴかしている などがあるわけですが、それらの要素を放り込んで既存企業のロゴを「Web2.0」風にしようというもの。なかなか愉快なロゴが多いです。 Famous Logos Redone In Web 2.0 Format http://www.aberrant.us/mirror/redesign/ http://livewavecam.com/redesign20.htm Yay Hooray | yh collab: redesign famous logos in web 2.0 format! 一番下の番号をクリックすればどんどん先に進むことができます。今もなお追加されている最中です。 あとWeb2.0の特徴
Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE
Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
楽天が「Pin It」ボタンを導入--Pinterestとの連携強化
楽天は7月4日、ネットショッピングモール「楽天市場」、総合旅行サイト「楽天トラベル」、料理レシピ投稿サイト「楽天レシピ」に、ユーザーがお気に入りの画像を、SNS「Pinterest」に収集・共有できる「Pin It」ボタンを設置したことを発表した。 Pinterestは、ネット上で写真を収集・共有できるSNS。スクラップブック感覚で、簡単におしゃれな画像を共有できるのが特徴だ。楽天は5月17日に、複数の投資会社とともに同社に出資していた。また、この増資には楽天のみが事業会社として参画している。 楽天はPinterestとの提携の第一弾の取り組みとして、各サイトにPin Itボタンを設置。ユーザーはPin Itボタンをクリックするだけで、自分が見ている楽天市場、楽天トラベル、楽天レシピの商品画像をPinterestの自分のボードに収集したり、友人に共有できる。 これまで、楽天のサービスには、
[6/20に発生した大規模障害に関するお詫びとお知らせ：一部サービスにおける情報漏えいについて] ファーストサーバ株式会社
6月20日（水）17時ごろ発生した大規模障害の復旧作業において実施したデータ復旧作業にて、お客様に提供した復元データの中に、別の顧客領域のデータが混在し参照ができる可能性があることを確認いたしました。 このような事態を発生させたことにより、多大なご迷惑とご心配をおかけし深くお詫び申し上げます。 6月20日（水）17時ごろ発生した障害によりデータが消失した後、6月21日（木）9時ごろにデータ復旧プログラムにより消失データを復旧し、復元データとしてお客様に提供いたしました。 その後、専用サーバーをご利用の一部のお客様から、アクセス権限が無いデータが閲覧できるとの問い合わせがあったため、調査をしたところお客様環境内の別ユーザーのデータが閲覧できる状態となっておりました。 直ちに復元データの提供を中止し、他の顧客領域でも同様の事象が発生する可能性を調査したところ、お客様に提供した復元データの中に
From Head to Foot: Showcase of Beautiful Header and Footer Designs
From Head to Foot: Showcase of Beautiful Header and Footer Designs Studies show that the website header is one of the first things a visitor sees on your website. That is mainly due to the way we are used to browser information on the computer presented from top to bottom, and due to the way HTML is built with the header being the first thing it's loading on the page. Thus the importance of the he
HTML5 Canvas Experiment: A cool flame/fire effect using particles
HTML5 Canvas Experiment: A cool flame/fire effect using particles Description This is a simple flame effect, created using particles. Random particles colored using fading out gradients originate from mouse coordinates(or the center of the canvas by default) to create the effect. The colored particles are blended together using the canvas's globalCompositeOperation property.
Facebookは非課税、ヤフーなら増税。消費税と電子取引の抜け穴 | 企業ホームページ運営の心得
コンテンツは現場にあふれている。会議室で話し合うより職人を呼べ。営業マンと話をさせろ。Web 2.0だ、CGMだ、Ajaxだと騒いでいるのは「インターネット業界」だけ。中小企業の「商売用」ホームページにはそれ以前にもっともっと大切なものがある。企業ホームページの最初の一歩がわからずにボタンを掛け違えているWeb担当者に心得を授ける実践現場主義コラム。 宮脇 睦（有限会社アズモード） 楽天がカナダの電子書籍出版企業「Kobo」を買収しました。海外企業の買収自体はさして珍しくありませんが、それによりめざましい成果を上げたという話は寡聞にして知りません。それより楽天市場の海外進出は「現地化」で苦戦していると、楽天の元ECコンサルタント（顧客担当者）から聞いたことがあります。辞めた社員の話ですから、うのみにはできませんが、今年の4月に撤退した中国市場の苦戦は言い当てていました。 「現地化」とは地域
iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう
iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述について紹介します。 iPhoneサイト制作（スマートフォンサイト制作）にreset.cssは必要？ そもそもreset.cssは各ブラウザ(IE・FireFox・safariなど)のブラウザ間のデフォルトのCSSの違いをなくすために読み込むものであり、必ずしもコーディングの際に必要となるものではありません。 PCサイトの場合は様々なブラウザやそのバージョンによって独自のデフォルトスタイルがあるため、r
IO 9elements
Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design. Building a Rock Solid Auto GridExplore a customizable CSS auto-grid layout in our latest post. Adjust column widths, gaps, and max column count for flexible web designs. Ideal for any web project. Hosting a ComfyUI Workflow via APIBasic WebSoc
[はじめてのjquery]ブログにあるととっても便利！「ページのトップに戻る」ボタンを実装してみた！！
jQuery Summit Notes / Robert Banh jqueryのお勉強ﾅｰ!! @OZPA です。 ようやくドットインストールでのjavascriptの講座を見終わったので、こちらの講座を参考に、ずっと実装しようと思っていた「ページのトップに戻る」ボタンを実装してみました。 実装したのはブログの右下部分のこちらのボタン。 ある程度スクロールするとボタンがフェードイン、クリックするとページのトップに0.7秒かけて戻る、というスクリプト。 コード 以下備忘録。 [html] <head> （中略） <script type="text/javascript" src="/jquery-1.7.1.js"></script> （中略） </head> [/html] ↑ヘッダーでjqueryを読み込みます。 そして、＜/body＞の直前に以下のコードを実装。 [html] <!
![[はじめてのjquery]ブログにあるととっても便利！「ページのトップに戻る」ボタンを実装してみた！！](https://cdn-ak-scissors.b.st-hatena.com/image/square/1714fe7feecca5b778d4aaa65a030235eec32c5d/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2F4119057479_c09101901b2.jpg)
フッターデザイン.com -Webデザインの“フッター”を集めたサイト-
はてブ ツイートする シェアする 他のギャラリー ファビコンギャラリー 見出しデザイン ウェブコレクション このサイトについて いろんなWEBサイトのフッター（ページ下部も含む）部分を集めました。デザインの参考に。掲載サイトがリニューアルした場合はご紹介のフッターが使用されていない場合があります。 連絡先：manage.hp+footer@gmail.com copyright © footer-design.com All Rights Reserved.
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Info Graphics
Info Graphics
ねこキャット - 猫の写真・動画ダラ見サービス
TRAVELER’S COMPANY - トラベラーズカンパニー
http://e0166nt.com/blog-entry-26.html
