<h1>Hey!</h2>
<p>Let's check out some
[[HTML]] & [[CSS tricks]]</p>HTML
How to use
[[span tags]],
[[creating italics]],
[[working with lists]],
[[working with images]]
[[working with links]]
[[Home|Twine Styles]]CSS
[[making our background an image]],
[[gradient colors cheat]]
[[hover effects]]
[[Home|Twine Styles]]The <span> </span> tag acts as a container that allows us to apply styles to individual elements or a group of elements like a word in a paragraph instead of the whole paragraph
We'll need to give the tag a class or id attribute so that we can apply the style to that specific span tag or group of span tags in our css
Example:
If I add the span tags to the text below, with the class attribute "favs"
Some of my favorite things right now are playing <span class="favs">Baldur's Gate</span>, my cat, <span class="favs">Miso</span>, and going on <span class="favs">hikes</span> in the gorge.
then in my stylesheet, I can change the color of the text for all the span tags with the favs attribute to pink
<pre>
<code>
.favs {
color: #00ee77;
}
</code>
</pre>
and my story text will show up as
Some of my favorite things right now are playing <span class="favs">Baldur's Gate</span>, my cat, <span class="favs">Miso</span>, and going on <span class="favs">hikes</span> in the gorge.
[[Home|Twine Styles]]There are a couple of ways to create italic text in html
You can use either tag but each one needs the opening tag right before the text you want to italicize and the closing tag right after the last word
emphasis tag - <em> </em>
or
i tag - <i> </i>
This is <em>italicized text</em> using the <em>tag
This is <i>italicized text</i> using the <i> tag
[[Home|Twine Styles]]There are two types of lists in html, ordered and unorderd
Ordered lists add the number in front of each list element
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
Unordered lists don't use numbers and can also be made to act like navigation menus for your game
To make an unordered list in html, you start it with the <ul> tag, then an opening and closing <li></li> tag for each list item, and then a closing </ul> tag at the end
<ul>
<li> list item 1 </li>
<li> list item 2 </li>
<li> list item 3 </li>
</ul>
It will render as
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
You can get rid of the bullet points using css in your stylesheet with the code
<pre>
<code>
ul {
list-style-type: none;
}
</code>
</pre>
It will render as
<ul class="noListStyle">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
~~If you target the li elements in the list, using css, you can display them horizontally instead of vertically ~~not working in twine~~
~~ <pre>
<code>
ul li {
display: inline;
}
</code>
</pre>
~~
This will render the list as
<div id="inLine">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
[[Home|Twine Styles]]
To add images to your twine story, we can use the html <img</ tag.
It consists of an opening image tag <img, then the (text-style:"bold")[src] attribute with path name or link to our image. image tags are little different as they don't need a close tag but you do need to remember to add the closing </ after the path to the image.
The ''alt'' attribute is a best practice to add so the people with vision impairments can use accessibilty tools, like screen readers, that can read the alt text to them to describe what the image.
<pre>
<code class ="codeFormat">
<img src="https://meganmckissack.neocities.org/images/cat.png" alt="cute kitten">
</code>
</pre>
The code above renders
<img src="https://meganmckissack.neocities.org/images/cat.png" alt="cute kitten">
[[Home|Twine Styles]]<div id="textBox">
The background image is a little tricky, normall in css, we would use our body tag and then set the background image to the url where our image is hosted <em>(don't forget to add the image to neocities)</em> and then set the background size property to cover.
<pre>
<code class ="codeFormat">
body {
background-image:url("https://meganmckissack.neocities.org/images/dotted_background.jpg");
background-size:cover;
opacity: 0.5;
}
</code>
</pre>
In twine, these styles, conflict with the tw-story styles, so one way around it, is to add a tag to the page that you want to have an image as the background and then apply almost the same styles you normaly would in the stylesheet, but we'll use the tw-story element and then the specific tag as shown below
<pre>
<code>
tw-story[tags~="backgroundPage"] {
background-image:url("https://meganmckissack.neocities.org/images/dotted_background.jpg");
background-size:cover;
}
</code>
</pre>
</div>
[[Home|Twine Styles]]<div id="gradientBox">
Similarly to making an image our background, normally in css, we would use our body tag and then set the background or background color with the css code we get from the css gradient website.
For twine, we'll want to create a tag and then apply the same css code within our tw-story attribute, referencing our tag
<pre>
<code>
tw-story[tags~="gradient"] {
background: rgb(235,106,192);
background: linear-gradient(90deg, rgba(235,106,192,1) 0%,
<br>
rgba(121,9,110,0.9262079831932774) 49%,
<br>
rgba(223,28,109,0.727328431372549) 100%);
}
</code>
</pre>
</div>
[[Home|Twine Styles]]Links can be utilized in differnt ways depending on the context of how you need to using them
You're already familiar with linking to other passages in Twine by using the [[]] opening and closing double brackes witht the passing name in the inner brackets
You can also link to other websites or urls by using
<pre>
The twine way
<code class ="codeFormat">
(link: "click here")[(goto-url: 'http://www...')]
</code>
The html way
<code class ="codeFormat">
<a href="https://wikiroulette.co/">This is a link<a/>
</code>
</pre>
Linking to a random wikipedia article
(link:"random wiki")[(goto-url:"https://wikiroulette.co/")]
You can make a button a link with html
<pre>
<code class ="codeFormat">
<a href="https://wikiroulette.co/">
<button>Click Me</button>
<a/>
</code>
</pre>
And it renders as
<a href="https://wikiroulette.co/">
<button>Click Me</button>
</a>
You can also create a "fake button" by adding styles to your link element to give it a different look, not using the html button element
<pre>
html
<code class ="codeFormat">
<a class="buttonStyle" href="https://wikiroulette.co/">
I'm a button>
<a/>
</code>
CSS
<code class ="codeFormat">
.buttonStyle {
background-color: #00ee77;
border-radius: 10px;
color: white;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 10px 10px;
cursor: pointer;
}
</code>
</pre>
The code above renders as
<a class="buttonStyle" href="https://wikiroulette.co/">
Click Me
</a>
You can make list items links too, similar to making web page naviation links, you just have to add the link tags to your list items
<pre>
<code class ="codeFormat">
<ul>
<li><a href="url">link 1</a></li>
<li><a href="url">link 2</a></li>
<li><a href="url">link 3</a></li>
</ul>
</code>
</pre>
It renders as
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content">Mozilla Developer Network HTML reference</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">Mozilla Developer Network anchor element reference</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics">Mozilla Developer Network CSS reference</a></li>
</ul>hover is a psuedo class in css that can apply styles to html elements when a use moves their mouse/trackpad/cursor over the element
An example that's already built in: when you mouse over a link, the link color can change or the text might expand, it's a way to let someone using your site or game know that there's an action they can take or a place they can go
We can use the span tag example and change the color of the words when someone hovers their cursor over it.
The span tag placements and using the "favs" class from before
Some of my favorite things right now are playing <span class="favs">Baldur's Gate</span>, my cat, <span class="favs">Miso</span>, and going on <span class="favs">hikes</span> in the gorge.
In our CSS stylesheet we can add
<pre>
css for the span tagged word color
<code>
.favs {
color: #00ee77;
}
</code>
CSS for the hover effect
<code>
.favs:hover {
color: #00c6ee;
transition: background-color 0.5s;
}
</code>
</pre>
The text rendered below. If you move your cursor over the pink words, they should change color
Some of my favorite things right now are playing <span class="favs">Baldur's Gate</span>, my cat, <span class="favs">Miso</span>, and going on <span class="favs">hikes</span> in the gorge.
[[Home|Twine Styles]]