今年も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%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015120905-03.gif)
本日12月1日より、プログラマやエンジニア、企業、学生、団体などの有志による2015年の技術系Advent Calendar(アドベントカレンダー)が各所ではじまり、一日目を担当する人の記事が公開されてきている。 一般的なAdvent Calendarは、12月25日のクリスマスを楽しみに待つために、12月1日から24日までのカレンダーの日付それぞれの部分が扉になっており、1日ずつその日の日付の部分を開くと天使や動物の絵などが見えるという仕組みになっている(もちろん、様々なバリエーションがある)。 これに発想をえて、技術系Advent Calendarでは基本的に、12月1日から25日までの25日間、特定のプログラミング言語縛りなどの緩やかなルールで、毎日別の人(日付を埋めるために同じ人が複数回担当することもある)が自分のblog等にて記事を書くという形式になっている(特設サイトを用意
Photo by Bernard Gagnon インドで廃れた仏教はアジア諸地域へ 前回の記事「仏像の姿形はどう変わっていったか」では、仏教発祥の地インドで、いかに仏教が広がり併せて仏像が発達・衰退していったかを書きました。 インドで消滅した仏教は、アジア諸地域に渡り当地で独自の仏教美術を開化させていきます。 今回は特に、南アジアと東南アジアでの仏教と仏教美術の特徴をまとめていきます。 1. 釈尊の死後の仏教 教団の分裂 釈尊が亡くなって約100年の間は、直弟子や直弟子に学んだ者たちが教団をまとめたため、釈尊の教えは変わらずに生き続けていました。この期間を初期仏教とか原始仏教とか言います。 ところが、100年ちょっと経ったころに教理や戒律の異説が生まれ、革新派のマハーサンギカと保守派のテーラヴァーダに分裂。前者は後の大乗仏教、後者は上座部仏教です。 この2派はどんどん分裂していき、前1世紀
まとめ YAPC::Asia Tokyo 2015 #yapcasia 全セッション総まとめ 前夜祭から大盛り上がりの様子を完全まとめしていきます。実況ツイートはトラック毎のハッシュタグ付き推奨! #yapcasia / 全体 #yapcasiaA / トラックA (国際会議場) #yapcasiaB / トラックB (701-702) #yapcasiaC / トラックC (703) #yapcasiaD / トラックD (605-606) #yapcasiaE / トラックE (607-608) #yapcasiaDinner / 懇親会 (レセプションホール) 16514 pv 94 39 users 57
A collection of identity style guides from around the worldSee the grids, layouts, and details designers include in brand identity style guides for clients worldwide. Browsing identity style guides helps me learn what to include for my clients, so I collated a number of samples for reference. I hope you find the resource helpful, too. Audi CI Belfast brand identity guidelines Berkeley brand identi
フロントエンドのデザインやコーディング時に調べたり、アイデアやインスピレーションがもらえるお役立ちサイトを紹介します。 最近リリースされた、特に便利なサイトをまとめました。
Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか? Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選1.良いデザインって?技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと こ
作成:2012/10/29 更新:2016/10/22 Tool > 低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか?そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。 ※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の2つご覧ください。(※ 2015/06/25 2015/06/28追記) Node.jsとgulpをインストールして使うまでの入門記事 これからGit を始めてみようという人のための使い方と入門フロー 特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。 もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました
作成:2015/05/11 更新:2016/06/29 Webデザイン > 海外のWebデザイン・技術情報を紹介している更新頻度の高い国内ブロガーさん達は一体どこからどうやって情報を収集しているのか。受け手でなく、そろそろ自分達も自ら最新情報を発信できないだろうか。 海外RSSフィードを購読することで、書籍では追えないようなトレンドや最先端の知識を拾うことができます。英語表記が苦手で面倒だとしても、毎日眺めていれば何となく分かるようになります。今回は「トレンドの動向を知り、自分が情報発信源となるために有効なRSS」をまとめてリストアップします。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション 1.Little Big Details 2.MaterialUp jQuery / CSS 3.CSS Author 4.CSS-Tricks
同じWeb制作者としてよいインスピレーションを受けるだけでなく、一緒に作ってみたいと思ったり、クライアントとして声をかけたくなるような注目しておきたい魅力的なWeb制作会社・クリエイター集団を紹介します。 そのクリエイティブなアイデア、クリエイティブなデザイン、クリエイティブなインタラクション、創造力をかきたてます! 世界中のかっこいいWebサイトをピックアップするAWWARDSのブログで日本の制作会社が特集されていたので、実績サイトと合わせて紹介します。 A Look at Japanese Web Design いくつかの会社では人材募集をしているので、気になった人は門を叩いてみるのもいいと思います! 株式会社 STARRYWORKS 昔からの伝統的な技能と新しいテクノロジー、どちらも理解した上でのもの作りにこだわった大阪の制作会社。「アシタノシカク」はCanvasを使って四角がうねう
ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます! ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン
TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル 1.アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ?」とか「この要素だけにスタイルを適応するCSS3は何だっけ…?」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました! CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
2023年2月17日 Webデザイナー1年生はもちろん、Web製作に携わるものなら絶対に知っておきたい神サイトを完全収録しました。 独学でWebデザインを勉強したい人、優秀な先駆者たちの知恵を吸収し飛躍したい人は要チェック。 WEBデザイナー必見の神サイト20コリスWebクリエイターボックスコムテブログかちびと.netバンクーバーのうぇぶ屋ホームページを作る人のネタ帳creive【クリーブ】BlackFlagDesignDevelopArchAteitexe アテークゼウェビメモWebparkNxWorldデザイナーのイラストノート株式会社LIGMdN Design InteractiveドットインストールProgateschooコリス コリス サイト制作に関する最新の情報をご紹介 サイト構築、WordPressのTipsを得られます。ただし、Webデザイナー1年制が、今からの更新情報を受
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く