Pyxofy - Pyxofy (Page 6)

Sign in Subscribe

Pyxofy

Empower Digital Natives thru Education and Technology

CSS Art – How to Make a Space Shuttle – Orbiter

CSS Art – How to Make a Space Shuttle – Orbiter

Space shuttle orbiters are amazing machines. Can we make it with CSS? You bet! Join us making it step-by-step.

スクラッチプログラミング - たっきゅうゲームのつくりかた - Part 2

スクラッチプログラミング - たっきゅうゲームのつくりかた - Part 2

Part 1でつくった卓球(たっきゅう)ゲームのプログラムを完成(かんせい)させます。得点(とくてん)をかぞえたり、ボールのはやさをかえたり、スマッシュできるようにして、ゲームをおもしろくしましょう。

スクラッチプログラミング - たっきゅうゲームのつくりかた - Part 1

スクラッチプログラミング - たっきゅうゲームのつくりかた - Part 1

コンピューターと対戦(たいせん)する卓球(たっきゅう)ゲームをつくってみましょう。ラケットのプログラムは簡単(かんたん)です。ボールをいろいろな方向(ほうこう)にうごくようにするのが、プログラミングのポイントになります。

CSS Art – How to Make Vector Shapes with path()

CSS Art – How to Make Vector Shapes with path()

Make basic and advanced shapes with CSS path() function and Scalable Vector Graphics (SVGs). Find out how in this step-by-step article.

スクラッチプログラミング - タブレットでもあそべる！タッチスクリーンそうさ

スクラッチプログラミング - タブレットでもあそべる！タッチスクリーンそうさ

キーボードをつかわなくてもスプライトを操作(そうさ)できるプログラムのつくりかたを紹介(しょうかい)します。画面(がめん)をゆびでさわることで、タブレットでもゲームをたのしむことができるようになりますよ。

CSS Art – How to Make a Space Shuttle – Rocket

CSS Art – How to Make a Space Shuttle – Rocket

Yes, you can create a space shuttle rocket with CSS. Join us in this two part step-by-step article series to find out how.

CSS Art – How to Make Advanced Shapes with clip-path

CSS Art – How to Make Advanced Shapes with clip-path

Make any shape you can imagine with CSS clip-path. In this article let’s make stars, triangles, circles and even letters step-by-step.

スクラッチプログラミング - やじるしキーでうごかすよこスクロール

スクラッチプログラミング - やじるしキーでうごかすよこスクロール

アクションゲーム(プラットフォーマー)などにつかわれる、よこスクロールする背景(はいけい)のつくりかたをしょうかいします。プログラムのポイントとなるブロックは、「クローン」「変数(へんすう)」「演算(えんざん)」です。

CSS Art is Awesome!

CSS Art – How to Make Image Masks and Knockout Text

Ever wondered how colorful CSS gradients can be combined with mask and text. Step-by-step article to create CSS mask and knockout text.

スクラッチプログラミング - 上下左右にスクロール！はいけいをうごかそう

スクラッチプログラミング - 上下左右にスクロール！はいけいをうごかそう

プレイヤーのうごきにあわせて画面(がめん)をうごかすプログラムをつくります。つかうはいけいはひとつだけの、かんたんなスクロールです。ゲームづくりに応用(おうよう)してみてくださいね。

CSS Art – How to Make a Sunset Scene

In this step-by-step article, we’ll combine CSS linear, radial, conic gradient and mask image to make a sunset scene.

CSS Art – How to Make Gradients

CSS Art – How to Make Gradients

Gradients are powerful tools for your CSS art tool belt. We’ll learn about linear, radial and conic gradients. Then let’s make repeating patterns.

スクラッチプログラミング - セリフを一文字ずつひょうじしよう

スクラッチプログラミング - セリフを一文字ずつひょうじしよう

スプライトがいうセリフの文字を、キーボードで入力(にゅうりょく)されているかのように、ひとつずつ表示(ひょうじ)する方法(ほうほう)をしょうかいします。「ブロック定義(ていぎ)」と「変数(へんすう)」をつかってプログラミングします。

スクラッチプログラミング - レースゲームのつくりかた

スクラッチプログラミング - レースゲームのつくりかた

車のスピードをリアルにかんじられるカーレースゲームをつくってみましょう。変数(へんすう)をつかってプログラミングすることで、3Dのような遠近感(えんきんかん)を出す方法(ほうほう)をしょうかいします。

CSS Art – How to Make Shadows and Angles

CSS Art – How to Make Shadows and Angles

We will learn how to implement HTML and text shadows in CSS. Then we’ll explore how to make right, obtuse and acute angles in this article.

スクラッチプログラミング - プラットフォーマーのつくりかた【上へすすむ】

スクラッチプログラミング - プラットフォーマーのつくりかた【上へすすむ】

上へすすむとステージがかわるプラットフォームゲームをつくりましょう。スプライトを左右にうごかしたり、障害物(しょうがいぶつ)にぶつかってジャンプがとまるようにするプログラムを、ブロックていぎをつかってつくります。

Turntable illustration

CSS Art – How to Make a Turntable

In this article you will learn how to use Hex colors and CSS pseudo-elements. Then we’ll make a simple turntable step-by-step.

スクラッチプログラミング - プラットフォーマーのつくりかた【ヒットボックス】

スクラッチプログラミング - プラットフォーマーのつくりかた【ヒットボックス】

ヒットボックスとは、あたりはんていにつかうための四角(しかく)のことです。スプライトのはじっこだけがプラットフォームにふれてしまうのをふせぐために、ヒットボックスをつかってみましょう。

CSS Art – How to Make and Manipulate Basic CSS Shapes

CSS Art – How to Make and Manipulate Basic CSS Shapes

We’ll learn how to make basic CSS shapes such as circle, squares and triangles. Then let’s rotate, scale, skew and move them around the screen.

スクラッチプログラミング - プラットフォーマーのつくりかた【じゅうりょくジャンプ】

スクラッチプログラミング - プラットフォーマーのつくりかた【じゅうりょくジャンプ】

プラットフォームゲームのジャンプをくふうしてみましょう。スプライトが着地(ちゃくち)するときに、地面(じめん)にしずんでしまうことがあります。それをふせぐプログラムをつくっていきますよ。

Simple House Illustration

CSS Art – How to Make a Simple House

Let’s make a simple house using CSS and HTML. We'll break down the house into basic shapes. Step by step guide, showing you how to make CSS Art.

スクラッチプログラミング - マウストレイルのつくりかた

スクラッチプログラミング - マウストレイルのつくりかた

「マウストレイル」は、マウスをうごかした「あと」のことです。ほしのスプライトでマウストレイルをつくると、ながれぼしのように見せることができます。いろいろな見た目のトレイル(あと)をプログラミングしてみましょう。

Setting up tools for CSS Art

Setting up tools for CSS Art

In this article, we will set up an offline text editor and local development environment. Then we’ll show you how to set up an account to use an online IDE.

Tools for creating CSS Art

Tools for creating CSS Art

In this article, we will discuss what tools you will need to make CSS art.

HTML and CSS primer for CSS Art

HTML and CSS primer for CSS Art

In this article we will give you an overview of CSS and HTML, the technologies required to create CSS art.