Grids (#3)
* De-tabled titlescreen * A little more detail in the comments * Created, sets tab width to 4 spaces instead of 8 * Added alias, so it actually works? * Added alt text for image * Replaced tables with grids. * Updated all ID and class info for new grid layout * Added diagram to show where IDs and classes are * Add a left-out tag to the diagram
This commit is contained in:
GitHub
parent
247a68e8a3
commit
6635334271
|
|
@ -0,0 +1,5 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = tab
|
||||
indent_size = 4
|
||||
165
base.css
165
base.css
|
|
@ -1,62 +1,169 @@
|
|||
h1, h2 {
|
||||
font-size:1em;
|
||||
font-style:italic;
|
||||
margin: 0 1em;
|
||||
text-align:center;
|
||||
text-transform:uppercase;
|
||||
/*
|
||||
General styles
|
||||
|
||||
some practically general ones will be in the
|
||||
Board styling section
|
||||
|
||||
*/
|
||||
|
||||
abbr {
|
||||
cursor:help;
|
||||
}
|
||||
|
||||
iframe {
|
||||
height:15em;
|
||||
margin:2px;
|
||||
width:31em;
|
||||
body {
|
||||
margin:0;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
img {
|
||||
height:100%; /* resize to fill their container */
|
||||
width:100%; /* resize to fill their container */
|
||||
vertical-align: bottom;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
|
||||
table #windows {
|
||||
border-spacing:0.5em;
|
||||
/* - - - - - - - - - - - - - -
|
||||
Board styling
|
||||
|
||||
See readme.txt for a layout diagram
|
||||
with IDs and classes labeled
|
||||
*/
|
||||
|
||||
main#board {
|
||||
display:grid;
|
||||
grid-gap:2px;
|
||||
grid-template-columns:32em 32em;
|
||||
grid-template-rows:auto;
|
||||
grid-template-areas:
|
||||
"perp view"
|
||||
"msg view";
|
||||
}
|
||||
main#board section.window {
|
||||
background-color:lightgray;
|
||||
border:2px outset lightgrey;
|
||||
padding:2px;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align:top; /* doing this removes space under images */
|
||||
main#board h1,
|
||||
main#board h2 {
|
||||
border:2px groove lightgray;
|
||||
display:inline-block;
|
||||
font-size:1em;
|
||||
margin:0;
|
||||
margin-bottom:2px;
|
||||
padding:0 1em;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
main#board h1 {
|
||||
text-align:center;
|
||||
}
|
||||
main#board h2 {}
|
||||
|
||||
td:not(.window) {
|
||||
/* - - - - - - - - - - - - - -
|
||||
*/
|
||||
|
||||
main#board section#view {
|
||||
grid-area:view;
|
||||
text-align:center;
|
||||
}
|
||||
main#board section#view section#map {
|
||||
display:grid;
|
||||
grid-gap:2px;
|
||||
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows:1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
main#board section#view section#map section.cell {
|
||||
background-size:6em 6em;
|
||||
border:1px inset lightgray;
|
||||
height:6em;
|
||||
padding:0;
|
||||
width:6em;
|
||||
}
|
||||
|
||||
td .window, .heading {
|
||||
border-style:groove;
|
||||
/* - - - - - - - - - - - - - -
|
||||
*/
|
||||
|
||||
main#board section#perception {
|
||||
grid-area:perp;
|
||||
}
|
||||
main#board section#perception section#senses {
|
||||
display:grid;
|
||||
grid-gap:2px;
|
||||
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows:1fr 1fr;
|
||||
}
|
||||
|
||||
td .senses {
|
||||
main#board section#perception section#senses section.icon {
|
||||
border:1px outset lightgray;
|
||||
}
|
||||
|
||||
td .sensed {
|
||||
main#board section#perception section#senses section.description {
|
||||
border:1px inset lightgray;
|
||||
color:black;
|
||||
}
|
||||
|
||||
#splashimage {
|
||||
border:0; /* Removes border from cell */
|
||||
padding:1em;
|
||||
/* - - - - - - - - - - - - - -
|
||||
*/
|
||||
|
||||
main#board section#message {
|
||||
grid-area:msg;
|
||||
}
|
||||
main#board iframe {
|
||||
border:1px inset lightgray;
|
||||
height:15em;
|
||||
margin:0;
|
||||
padding:0;
|
||||
width:31.4em;
|
||||
}
|
||||
|
||||
/* - - - - - - - - - - - - - -
|
||||
Title screen styling
|
||||
*/
|
||||
|
||||
main#titlescreen {
|
||||
margin:0;
|
||||
padding:0;
|
||||
width:32em;
|
||||
}
|
||||
|
||||
main#titlescreen h1,
|
||||
main#titlescreen h2 {
|
||||
font-size:1em;
|
||||
margin:0 1em;
|
||||
text-align:center;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
main#titlescreen h1 {
|
||||
font-style:italic;
|
||||
}
|
||||
main#titlescreen h2 {}
|
||||
main#titlescreen h3 {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
main#titlescreen header,
|
||||
main#titlescreen hr,
|
||||
main#titlescreen section {
|
||||
margin:2px 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
main#titlescreen hr {
|
||||
height:3px;
|
||||
}
|
||||
|
||||
main#titlescreen section#credit {}
|
||||
|
||||
main#titlescreen section#notes ul {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
main#titlescreen section#splash {
|
||||
padding:0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Some generic manipulation classes
|
||||
/* - - - - - - - - - - - - - -
|
||||
Some generic manipulation classes
|
||||
|
||||
Use these to easily rotate, flip, etc., images
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -10,134 +10,91 @@
|
|||
/* You may wish to relocate some of these to
|
||||
'base.css' if they will be consistant /
|
||||
mostly consistant throughout your game.
|
||||
Anything placed here will override things
|
||||
already set in 'base.css'
|
||||
Have fun with it!
|
||||
*/
|
||||
a {
|
||||
/* Hyperlink colour */
|
||||
color:white
|
||||
color:white /* Hyperlink colour */
|
||||
}
|
||||
body {
|
||||
/* main bg colour */
|
||||
background-color:lightgray;
|
||||
/* main bg image */
|
||||
background-image:url("../images/background.jpg");
|
||||
/* main text colour */
|
||||
color:blue;
|
||||
background-color:lightgray; /* main bg colour */
|
||||
background-image:url("../images/background.jpg"); /* main bg image */
|
||||
color:blue; /* main text colour */
|
||||
}
|
||||
iframe {
|
||||
/* message border style */
|
||||
border:1px inset lightgray;
|
||||
}
|
||||
td {
|
||||
/* panel background colour */
|
||||
background-color:lightgray;
|
||||
/* panel border style */
|
||||
border:2px outset lightgray;
|
||||
}
|
||||
#board td {
|
||||
/* board cells bg colour */
|
||||
background-color:lightgray;
|
||||
/* board cells bg image */
|
||||
background-image:url("../images/floor.gif");
|
||||
background-size:6em 6em;
|
||||
/* board cells border style */
|
||||
border:1px inset lightgray;
|
||||
section#view section#map section.cell {
|
||||
background-color:lightgray; /* board cells bg colour */
|
||||
background-image:url("../images/floor.gif"); /* board cells bg image */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table id="windows">
|
||||
<tr>
|
||||
<!-- SENSES / PERCEPTION WINDOW ------------------>
|
||||
<td id="person" class="window">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="window heading">
|
||||
<h2>perception</h2>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table id="sense">
|
||||
<tr>
|
||||
<td class="senses"><img src="../images/eye_01.gif"></td>
|
||||
<td class="senses"><img src="../images/nose_01.gif"></td>
|
||||
<td class="senses"><img src="../images/ear_01.gif"></td>
|
||||
<td class="senses"><img src="../images/tongue_01.gif"></td>
|
||||
<td class="senses"><img src="../images/hand_01.gif"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sensed">MOUSE,<br>EXIT</td>
|
||||
<td class="sensed">MUSK, OFFAL</td>
|
||||
<td class="sensed">CHURNING</td>
|
||||
<td class="sensed">WET</td>
|
||||
<td class="sensed">. . .</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<!-- GAME WINDOW ---------------------------------->
|
||||
<td class="window" rowspan="2">
|
||||
<table class="title">
|
||||
<tr>
|
||||
<td class="window heading">
|
||||
<h1>example game</h1>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- GAME BOARD -->
|
||||
<table id="board">
|
||||
<tr>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td><a href="../messages/room_001_skates.html"><img src="../images/skates.png"></td>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td class="align_right"><a target="message_frame" href="../messages/room_001_mouse.txt">Ҩ ̡⁐̤ᕐᐷ</a></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
<td><img src="../images/wall.jpg"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<main id="board">
|
||||
|
||||
<!-- VIEWPOINT WINDOW ---------------------------------->
|
||||
<section id="view" class="window">
|
||||
<h1>example game</h1>
|
||||
<section id="map">
|
||||
<!-- Row 1 -->
|
||||
<!-- Columns ordered 1-5 -->
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<!-- Row 2 -->
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell"></section>
|
||||
<section class="cell"></section>
|
||||
<section class="cell"></section>
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<!-- Row 3 -->
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell"></section>
|
||||
<section class="cell"></section>
|
||||
<section class="cell"><a href="../messages/room_001_skates.html"><img src="../images/skates.png" alt="a brighly coloured hight-heeled roller-skate, with blurred laser-blue wheels and a decorative orange sparkle on the toe."></a></section>
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<!-- Row 4 -->
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell align_right"><a target="message_frame" href="../messages/room_001_mouse.txt">Ҩ ̡⁐̤ᕐᐷ</a></section>
|
||||
<section class="cell"></section>
|
||||
<section class="cell"></section>
|
||||
<section class="cell"></section>
|
||||
<!-- Row 5 -->
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
<section class="cell"><img src="../images/wall.jpg" alt="a damp stone wall"></section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- PERCEPTION WINDOW -------------------------->
|
||||
<section id="perception" class="window">
|
||||
<h2>perception</h2>
|
||||
<section id="senses">
|
||||
<!-- Icons for senses -->
|
||||
<section class="icon"><img src="../images/eye_01.gif" alt="a blinking, looking eye"></section>
|
||||
<section class="icon"><img src="../images/nose_01.gif" alt="a smelling dog nose"></section>
|
||||
<section class="icon"><img src="../images/ear_01.gif" alt="alistening ear"></section>
|
||||
<section class="icon"><img src="../images/tongue_01.gif" alt="a tongue curling"></section>
|
||||
<section class="icon"><img src="../images/hand_01.gif" alt="a gloved hand pointing"></section>
|
||||
<!-- Descriptions for senses -->
|
||||
<section class="description">MOUSE,<br>EXIT</section>
|
||||
<section class="description">MUSK, OFFAL</section>
|
||||
<section class="description">CHURNING</section>
|
||||
<section class="description">WET</section>
|
||||
<section class="description">. . .</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- MESSAGE WINDOW ------------------------------>
|
||||
<td id="message" class="window">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="window heading">
|
||||
<h2>message</h2>
|
||||
</td>
|
||||
<td class="window">
|
||||
<a href="../messages/room_001.txt">↸</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<iframe name="message_frame" src="../messages/room_001.txt"></iframe>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<section id="message" class="window">
|
||||
<h2>message</h2>
|
||||
<a href="../messages/room_001.txt">↸</a>
|
||||
<iframe name="message_frame" src="../messages/room_001.txt"></iframe>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
64
index.html
64
index.html
|
|
@ -6,50 +6,46 @@
|
|||
<meta name="author" content="Blueberry Soft">
|
||||
<meta name="description" content="Example game for OBSHAGCE">
|
||||
<base target="_self">
|
||||
<link rel="stylesheet" type="text/css" href="base.css">
|
||||
<link type="text/css" rel="stylesheet" href="base.css">
|
||||
<style>
|
||||
body {
|
||||
background-color:white; /* main bg colour */
|
||||
color:cyan; /* main text colour */
|
||||
background-color:pink; /* main bg colour */
|
||||
color:red; /* main text colour */
|
||||
}
|
||||
td {
|
||||
background-color:darkgreen; /* panel background colour */
|
||||
border:2px outset darkgreen; /* panel border style */
|
||||
}
|
||||
#board td {
|
||||
background-color:lightgray; /* board cells bg colour */
|
||||
border:1px inset lightgray; /* board cells border style */
|
||||
header,
|
||||
hr,
|
||||
section {
|
||||
background-color:orange; /* panel background colour */
|
||||
border:2px outset orange; /* panel border - size | style | colour */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table id="windows">
|
||||
<tr>
|
||||
<td class="window">
|
||||
<h1>EXAMPLE GAME :)</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="window"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="window">
|
||||
<h2>A Game by <a target="_blank" href="http://blueberrysoft.ryliejamesthomas.net/">Blueberry Soft</a>.</h2>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="splashimage"><a href="boards/room_01.html"><img class="no_scale" src="images/splash.gif" alt="A cartoonish image of a splash. Click to continue."></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="window">
|
||||
<p>Notes:</p>
|
||||
<main id="titlescreen">
|
||||
|
||||
<header>
|
||||
<h1>Example Game :)</h1>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<section id="credit">
|
||||
<h2>A Game by <a target="_blank" href="http://blueberrysoft.ryliejamesthomas.net/">Blueberry Soft</a>.</h2>
|
||||
</section>
|
||||
|
||||
<section id="splash">
|
||||
<a href="boards/room_01.html"><img class="no_scale" src="images/splash.gif" alt="An animated, growing spiral. Click to continue."></a>
|
||||
</section>
|
||||
|
||||
<section id="notes">
|
||||
<h3>Notes:</h3>
|
||||
<ul>
|
||||
<li>Example game for OBSHAGCE.</li>
|
||||
<li>Example game for <abbr title="Official Blueberry Soft Hypermedia Adventure Game Construction Engine">OBSHAGCE</abbr>.</li>
|
||||
<li>Click on things to play.</li>
|
||||
<li>All included media is free to use!</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="room_001_skates.html"><img src="../images/skates_tap.png"></a>
|
||||
<a href="room_001_skates.html"><img src="../images/skates_tap.png" alt="the rollerscate turned upside-down, with the text 'tap! tap! tap!'"></a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
76
readme.txt
76
readme.txt
|
|
@ -33,7 +33,7 @@
|
|||
Goals
|
||||
----------- ----------- ----------- ----------- -----------
|
||||
|
||||
- Easy to read markup (with comments).
|
||||
- Easy to read markup (semantic, and with comments).
|
||||
- Be a useful earning tool for HTML and CSS.
|
||||
- No Java Script
|
||||
(but feel free to fork if you're into that).
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
You make a title/intro screen in index.html
|
||||
This points to HTML files in 'boards'
|
||||
These files have graphics and text and things you can
|
||||
click on in the cells on the right (what I call the board)
|
||||
click on in the cells on the right (what I call the map)
|
||||
and these open text, or HTML, or sounds, or whatever in
|
||||
the message widow in the lower left.
|
||||
You can also add some stuff to describe what is 'seen',
|
||||
|
|
@ -81,32 +81,74 @@
|
|||
Trying to explain the purpose / use of the IDs and
|
||||
classes used.
|
||||
|
||||
Most of the CSS is in base.css, but some is kept in the
|
||||
HTML files so you can easily tweak things per-board, the
|
||||
colours, for example.
|
||||
|
||||
----------- ----------- ----------- ----------- -----------
|
||||
|
||||
Here's a diagram to show which section IDs and classes
|
||||
are effecting on the board pages.
|
||||
|
||||
# signifies an ID
|
||||
. signifies a class
|
||||
|
||||
┌───────────────────────────────────────────────────────┐
|
||||
│ #board │
|
||||
│ │
|
||||
│ ┌────────────────────────┐ ┌────────────────────────┐ │
|
||||
│ │ #perception .window │ │ #view .window │ │
|
||||
│ │ │ │ │ │
|
||||
│ │┌──────────────────────┐│ │┌──────────────────────┐│ │
|
||||
│ ││ #senses ││ ││ #map ││ │
|
||||
│ ││ ││ ││ ││ │
|
||||
│ ││┌───┬───┬───┬───┬───┐ ││ ││┌───┬───┬───┬───┬───┐ ││ │
|
||||
│ │││ │ .icon │ │ ││ │││ │ │ │ │ │ ││ │
|
||||
│ ││├───┼───┼───┼───┼───┤ ││ ││├───┼───┼───┼───┼───┤ ││ │
|
||||
│ │││ .description │ ││ │││ │ │ │ │ │ ││ │
|
||||
│ ││└───┴───┴───┴───┴───┘ ││ ││├───┼───┼───┼───┼───┤ ││ │
|
||||
│ │└──────────────────────┘│ │││ │ .cell │ │ ││ │
|
||||
│ └────────────────────────┘ ││├───┼───┼───┼───┼───┤ ││ │
|
||||
│ ┌────────────────────────┐ │││ │ │ │ │ │ ││ │
|
||||
│ │ #message .window │ ││├───┼───┼───┼───┼───┤ ││ │
|
||||
│ │ │ │││ │ │ │ │ │ ││ │
|
||||
│ │ │ ││└───┴───┴───┴───┴───┘ ││ │
|
||||
│ │ │ │└──────────────────────┘│ │
|
||||
│ └────────────────────────┘ └────────────────────────┘ │
|
||||
└───────────────────────────────────────────────────────┘
|
||||
----------- ----------- ----------- ----------- -----------
|
||||
IDs:
|
||||
|
||||
'splashimage' For title screen images. You may or may
|
||||
'board' For all elements on the game boards.
|
||||
'titlescreen' For all elements on the titlescreen.
|
||||
|
||||
'view' The window containing the map.
|
||||
'map' The actual map grid.
|
||||
|
||||
'perception' The window containing sense information.
|
||||
'senses' The grid containing the icons and
|
||||
descriptions for the senses.
|
||||
|
||||
'message' The window where messages appear.
|
||||
|
||||
'credit' For credits on the titlescreen.
|
||||
'notes' For the notes section on the titlescreen.
|
||||
'splash' For titlescreen images. You may or may
|
||||
not want the border.
|
||||
|
||||
'windows' Contains all the game windows
|
||||
|
||||
'message' The window where messages appear
|
||||
|
||||
'person' The window containing sense information
|
||||
|
||||
----------- ----------- ----------- ----------- -----------
|
||||
Classes:
|
||||
|
||||
'board' References the main game board.
|
||||
'cell' The individual cells that contain map
|
||||
content.
|
||||
|
||||
'heading' Headings for all the windows
|
||||
'icon' The cells that contain the sense icons.
|
||||
|
||||
'senses' The cells that contain the sense icons
|
||||
|
||||
'sensed' The cells that contain the sense
|
||||
descriptions
|
||||
'description' The cells that contain the sense
|
||||
descriptions.
|
||||
|
||||
'title' Title above game board. Game title or
|
||||
board title or ???
|
||||
board title or ???.
|
||||
|
||||
'window' References elements that make up the main
|
||||
three windows, but exludes their contents.
|
||||
|
|
@ -130,7 +172,7 @@
|
|||
'flip_*' Flips the element on the vertical or
|
||||
horizonal axis.
|
||||
|
||||
'shape_*' Changes elements shape.
|
||||
'shape_*' Changes elements' shape.
|
||||
|
||||
And some classes for animated effects :)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue