1) Click the timeline to add a new keyframe 2) Click the circle button to build your animation's css 3) Click the x button to delete the active keyframe Properties Base Style width: 250px; height: 250px; position: absolute; background-color: rgba(255,34,5,0.8); top: 50%; left: 50%; margin-top: -125px; margin-left: -125px; border-radius: 250px; Name Duration Timing Function Delay Iteration Count Di
BEMを使ったCSSのクラス設計(MindBEMding)ですが、これをSassでやろうとすると、結構泣けてきます。 たとえばこんな感じになるんでしょうかね。 $block: ".block"; #{$block} { display: block; } #{$block}__element { border: 1px solid #CCC; } #{$block}__element_modifier { border-color: #FFF; } また、Sass 3.3以降だと、 .block { display: block; @at-root { #{&}__element { border: 1px solid #CCC; @at-root { #{&}--modifier { border-color: #FFF; } } } } //もしくはこんな感じ @at-root { #
PSDのレイヤーに配置した要素のサイズやエフェクトやフォントなどの情報を1クリックでドキュメント化するPhotoshopのプラグインを紹介します。 機能拡張は無料で利用でき、Photoshop CC/CS6に対応しています。 サイズやフォントの情報など、1クリックで作成してくれます。 Inkの特長 Inkのインストール Inkの使い方 Inkの特長 ウェブページなどのレイアウトやさまざまな要素のサイズ、形、カラー、エフェクト、フォントの種類・サイズなど、指定したレイヤー上にある情報を1クリックでPSD上にドキュメント化します。 Ink スタイルガイドなどでルールをしっかり決めておくと、デザインのアウトプットにぶれがなくなり、最終のプロダクトも想定通りに仕上がります。 Inkのインストール まずは、インストーラーをサイトからダウンロードします。 Ink CS 6にインストールしたので、その手
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、AmebaのSimplogでWEBデザイナーをしているリュウタロウと申します。 以前新卒デザイナー同士の勉強会がありまして、そこでの私の発表内容がすごく好評でした。 以降より多くの人に向けて発信したいと考え、この場をお借りして記事を執筆させて頂く事になりました。 これから綴るのは、デザインの細かいテクニックやハウツーではありません。 様々なジャンルのクリエイティブに通じる、基本的なモノの見方、考え方の話です。 「ワタシ、デザインワカラナイワ」 というビジネスパーソンも、普段やっている仕事や趣味とリンクさせながら理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く