CSSだけでアニメのロゴを作る

•

0 recomendaciones•1,652 vistas

spring_raining

<a>OUCC LTの会</a>で発表したスライドです。

Ingeniería

CSSだけで
アニメのロゴを作る
2015/7/11
はるさめ @spring_raining

なんかHTMLの見た目を変える
アレ
• h1 { font-size: 100px; }
• #akaimoji { color: red; }

font-family: Futura
font-stretch: condensed
font-weight: bold
letter-spacing: -2px

Recomendados

a-blog cms Training Camp 2014 Autumn「来年作るべきCMSのテーマとは？」Seiko Kuchida

イマドキのスライス事情Sou Lab

Adobe Animate CCを触ってみたYusuke Kano

日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び：本編Seiko Kuchida

WooCommerce & AWSHidetaka Okamoto

HTML5 の Web制作を確実に楽にする最新のアドビWeb制作ツール for HTML5 Carnival FukuokaKeisuke Todoroki

CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」Atsushi Kaga

メニューは管理画面で設定できるようにしようMayuko Moriyama

DMMの闇に触れた話Katsunori Tanaka

a-sap 07セッション「Movable Typeとa-blog cmsの今」Seiko Kuchida

テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする文樹高橋

I want Make full svg websiteHidetsugu Takahashi

Cssアニメーションとその制御Muyuu Fujita

WordBench京都9月号Koji Asaga

国産オープンソースCMS「ZOMEKI」の紹介Masaki Ozawa

WordPress ユーザーのための a-blog cms 入門Akiko Kasaya

20150531 phpcon kansaikumamidori

ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼Mignon Style

一歩踏み込むWordPress正樹平野

WordPressとサーバーお金の話Tomoyuki Sugita

SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」Seiko Kuchida

doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)Atsushi Ando

DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night石橋啓太

Yat-wbnara201602YAT blog

インデントで構造を表現する言語motoyan-qwt1

CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルにMasunaga Ray

React.js + Fluxdsuke Takaoka

使う前に知っておきたいSVGのことKasumi Morita

OUCC 第1回AfterEffects勉強会spring_raining

React.jsでクライアントサイドなWebアプリ入門spring_raining

Más contenido relacionado

La actualidad más candente

DMMの闇に触れた話Katsunori Tanaka

a-sap 07セッション「Movable Typeとa-blog cmsの今」Seiko Kuchida

テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする文樹高橋

I want Make full svg websiteHidetsugu Takahashi

Cssアニメーションとその制御Muyuu Fujita

WordBench京都9月号Koji Asaga

国産オープンソースCMS「ZOMEKI」の紹介Masaki Ozawa

WordPress ユーザーのための a-blog cms 入門Akiko Kasaya

20150531 phpcon kansaikumamidori

ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼Mignon Style

一歩踏み込むWordPress正樹平野

WordPressとサーバーお金の話Tomoyuki Sugita

SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」Seiko Kuchida

doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)Atsushi Ando

DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night石橋啓太

Yat-wbnara201602YAT blog

インデントで構造を表現する言語motoyan-qwt1

CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルにMasunaga Ray

React.js + Fluxdsuke Takaoka

使う前に知っておきたいSVGのことKasumi Morita

La actualidad más candente (20)

DMMの闇に触れた話

a-sap 07セッション「Movable Typeとa-blog cmsの今」

テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする

I want Make full svg website

Cssアニメーションとその制御

WordBench京都9月号

国産オープンソースCMS「ZOMEKI」の紹介

WordPress ユーザーのための a-blog cms 入門

20150531 phpcon kansai

ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼

一歩踏み込むWordPress

WordPressとサーバーお金の話

SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」

doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)

DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night

Yat-wbnara201602

インデントで構造を表現する言語

CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに

React.js + Flux

使う前に知っておきたいSVGのこと

Destacado

OUCC 第1回AfterEffects勉強会spring_raining

React.jsでクライアントサイドなWebアプリ入門spring_raining

OUCC クソコラ勉強会spring_raining

TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門Shumpei Shiraishi

The President’s Speech in Cairo: A New Beginning - HebrewObama White House

Heroku Buttonの紹介treby

Rbi master circular lending to micro, small & medium enterprises (msme) secto...Kale Law Office

Tfsの中のお宝を探そう__Black

Quon maiFMBIRD

OpenDocument interoperability test workshop after storyMakoto Takizawa

Pequeño azul y pequeño amarilloJuanjo Escudero

English: Ramadan Message Of President Obama Obama White House

Audience Responsesybz

Insights on What Connects in Comedy via @ConanOBrien #CannesLions / #OgilvyCa...Ogilvy

～ Cloud First から Cloud Optimized へ～ .NET on Cloud が描くモダナイゼーションAkira Inoue

FOTOinformator 1/2017Zbigniew Wlodarski

Crew documents 020334 - 020392Obama White House

New world order - Shape of the matterabhijitdas80

Equal Employment Opportunity Commission Preliminary Regulatory Reform PlanObama White House

Kojenerasyon fiyat listesi 400kw_2000kw_NEWCADE, NEVKADENEWCADE/NEVKADE

Destacado (20)

OUCC 第1回AfterEffects勉強会

React.jsでクライアントサイドなWebアプリ入門

OUCC クソコラ勉強会

TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門

The President’s Speech in Cairo: A New Beginning - Hebrew

Heroku Buttonの紹介

Rbi master circular lending to micro, small & medium enterprises (msme) secto...

Tfsの中のお宝を探そう

Quon mai

OpenDocument interoperability test workshop after story

Pequeño azul y pequeño amarillo

English: Ramadan Message Of President Obama

Audience Response

Insights on What Connects in Comedy via @ConanOBrien #CannesLions / #OgilvyCa...

～ Cloud First から Cloud Optimized へ～ .NET on Cloud が描くモダナイゼーション

FOTOinformator 1/2017

Crew documents 020334 - 020392

New world order - Shape of the matter

Equal Employment Opportunity Commission Preliminary Regulatory Reform Plan

Kojenerasyon fiyat listesi 400kw_2000kw_NEWCADE, NEVKADE

CSSだけでアニメのロゴを作る

1. CSSだけでアニメのロゴを作る 2015/7/11 はるさめ @spring_raining

3. CSSの印象

4. なんかHTMLの見た目を変えるアレ • h1 { font-size: 100px; } • #akaimoji { color: red; }

5. そんなものではない！！！

6. 画像を使わず JavaScriptを使わず SVGを使わず

7. アニメのロゴを作成します

9. jsdo.it/spring_raining/f7p7

10.

11.

12.

13.

14.

15. font-family: Futura font-stretch: condensed font-weight: bold letter-spacing: -2px

16. 余談

17. jsdo.it/norahiko/m1WT