![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
giangtranguyen2017-08-09 10:45 am
Entry tags:
How To Use Spoiler Text
Just copy and paste the code into the passage, and then adjust it to your liking.
For example:
For example:
<del>Hello World!</del>
giangtranguyen2017-08-09 10:45 amgiangtranguyen2017-07-05 04:41 pmEntry tags:
How To Make Your Image Have A Shadow
Just copy and paste the code into the Story Stylesheets, then adjust it to your liking.
For example:
img {
For example:
img {
-webkit-filter: drop-shadow(8px 8px 10px red);
filter: drop-shadow(8px 8px 10px red);
filter: drop-shadow(8px 8px 10px red);
}
giangtranguyen2017-07-05 03:56 pmEntry tags:
How To Make Your Image No Longer Blurry When Hover
Just copy and paste the code into the Story Stylesheets, then adjust it to your liking.
For example:
img {
img:hover {
For example:
img {
-webkit-filter: blur(5px);
filter: blur(5px);
}img:hover {
-webkit-filter: blur(0px);
filter: blur(0px);
}giangtranguyen2017-07-04 09:48 pmEntry tags:
How To Make Your Image Circular
Just copy and paste the code into your Story Stylesheets, then adjust it to your liking.
For example:
img {
border-radius: 50%;
}
For example:
img {
border-radius: 50%;
}
giangtranguyen2017-07-02 01:14 pmEntry tags:
How To Make Your Image Spin
Just copy and paste the code into your Story Stylesheets, and adjust it to your liking.
For example:
For example:
img {
-webkit-transition: -webkit-transform .9s ease-in-out;
transition: transform .9s ease-in-out;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
giangtranguyen2017-07-01 03:11 pmEntry tags:
How To Make Your Image Flip
Just copy and paste the code into the Story Stylesheets, then adjust it to your liking.
For example:
img {
}
img:hover {
For example:
img {
}
img:hover {
transform: rotate(90deg/180deg/360deg);
-webkit-transform: rotate(90deg/180deg/360deg);
-moz-transform: rotate(90deg/180deg/360deg);
-webkit-transform: rotate(90deg/180deg/360deg);
-moz-transform: rotate(90deg/180deg/360deg);
-ms-transform: rotate(90deg/180deg/360deg);
-o-transform: rotate(90deg/180deg/360deg);
-o-transform: rotate(90deg/180deg/360deg);
}
giangtranguyen2017-07-01 11:22 amEntry tags:
How To Make Your Font Gradually Change Colour
Just copy and paste the code into the Story Stylesheets, then adjust it to your liking.
For example:
body, tw-story {
body:hover, tw-story:hover {
For example:
body, tw-story {
color: #000000;
transition: 3.0s;
-o-transition-transition: 3.0s;
-webkit-transition-duration: 3.0s;
-moz-transition-duration: 3.0s;
}-webkit-transition-duration: 3.0s;
-moz-transition-duration: 3.0s;
body:hover, tw-story:hover {
color: #efefef;
transition: 3.0s;
-o-transition-transition: 3.0s;
-webkit-transition-duration: 3.0s;
-moz-transition-duration: 3.0s;
}-webkit-transition-duration: 3.0s;
-moz-transition-duration: 3.0s;
giangtranguyen2017-07-01 10:32 amEntry tags:
How To Edit P
Just copy and paste the code into your Story Stylesheets, then adjust it to your liking.
For example:
p {
For example:
p {
border-color: #000000;
border-style: dashed/dotted/double/groove/hidden/inset/none/outset/solid/ridge;
border-width: thin/medium/thick;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: none;
color: #000000;
font-family: 'Arial', sans-serif;
font-size: 16pt;
font-style: normal/italic/oblique;
font-variant: normal/small-caps;
font-weight: normal/bold;
direction: rtl;
letter-spacing: 5px/-5px;
line-height: 0.5/5.0;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
text-align: left/center/right/justify;
text-decoration: none/overline/line-through/underline;
text-indent: 25px;
text-shadow: 5px 5px #000000;
text-transform: uppercase/lowercase/capitalize;
word-spacing: 5px/-5px;
}
p:hover {
}
Or
p {
border: 1px solid #000000;
p:hover {
border-color: #000000;
border-style: dashed/dotted/double/groove/hidden/inset/none/outset/solid/ridge;
border-width: thin/medium/thick;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: none;
color: #000000;
font-family: 'Arial', sans-serif;
font-size: 16pt;
font-style: normal/italic/oblique;
font-variant: normal/small-caps;
font-weight: normal/bold;
direction: rtl;
letter-spacing: 5px/-5px;
line-height: 0.5/5.0;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
text-align: left/center/right/justify;
text-decoration: none/overline/line-through/underline;
text-indent: 25px;
text-shadow: 5px 5px #000000;
text-transform: uppercase/lowercase/capitalize;
word-spacing: 5px/-5px;
Or
p {
border: 1px solid #000000;
color: #000000;
font-family: 'Arial', sans-serif;
font-size: 16pt;
font-style: normal/italic/oblique;
font-variant: normal/small-caps;
font-weight: normal/bold;
direction: rtl;
letter-spacing: 5px/-5px;
line-height: 0.5/5.0;
margin: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
text-align: left/center/right/justify;
text-decoration: none/overline/line-through/underline;
text-indent: 25px;
text-shadow: 5px 5px #000000;
text-transform: uppercase/lowercase/capitalize;
word-spacing: 5px/-5px;
}p:hover {
border: 1px solid #000000;
color: #000000;
font-family: 'Arial', sans-serif;
font-size: 16pt
font-style: normal/italic/oblique;
font-variant: normal/small-caps;
font-weight: normal/bold;
direction: rtl;
letter-spacing: 5px/-5px;
line-height: 0.5/5.0;
margin: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
text-align: left/center/right/justify;
text-decoration: none/overline/line-through/underline;
text-indent: 25px;
text-shadow: 5px 5px #000000;
text-transform: uppercase/lowercase/capitalize;
word-spacing: 5px/-5px;
}giangtranguyen2017-06-30 11:28 amEntry tags:
How To Edit HR
Just copy and paste the code into the Story Stylesheets, then adjust it to your liking.
For example:
hr {
border-color: #000000;
border-style: dashed/dotted/double/groove/hidden/inset/none/outset/solid/ridge;
For example:
hr {
border-color: #000000;
border-style: dashed/dotted/double/groove/hidden/inset/none/outset/solid/ridge;
border-width: thin/medium/thick;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: none;
display: block;
margin-bottom: 0px;display: block;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
}
Or
hr {
border: 1px solid #000000;
margin: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
}
hr:hover {
border-color: #000000;
border-style: dashed/dotted/double/groove/hidden/inset/none/outset/solid/ridge;
border-color: #000000;
border-style: dashed/dotted/double/groove/hidden/inset/none/outset/solid/ridge;
border-width: thin/medium/thick;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: none;
display: block;
margin-bottom: 0px;display: block;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
}
Or
hr {
border: 1px solid #000000;
margin: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
}
hr:hover {
border: 1px solid #000000;
margin: 0px;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
}
giangtranguyen2017-07-01 10:14 amEntry tags:
How To Edit I, Em, B, Strong
Just copy and paste the code into your Story Stylesheets, then adjust it to your liking.
For example:
color: #000000;
font-family: 'Arial', sans-serif;
font-size: 16pt;
font-style: normal/italic/oblique;
font-variant: normal/small-caps;
font-weight: normal/bold;
direction: rtl;
letter-spacing: 5px/-5px;
line-height: 0.5/5.0;
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
text-align: left/center/right/justify;
text-decoration: none/overline/line-through/underline;
text-shadow: 5px 5px #000000;
text-transform: uppercase/lowercase/capitalize;
word-spacing: 5px/-5px;
}
b:hover, em:hover, i:hover, strong:hover {
color: #000000;
font-family: 'Arial', sans-serif;
font-size: 16pt;
font-style: normal/italic/oblique;
font-variant: normal/small-caps;
font-weight: normal/bold;
direction: rtl;
letter-spacing: 5px/-5px;
line-height: 0.5/5.0;:
opacity: 0.1/0.2/0.3/0.4/0.5/0.6/0.7/0.8/0.9/1.0;
text-align: left/center/right/justify;
text-decoration: none/overline/line-through/underline;
text-shadow: 5px 5px #000000;
text-transform: uppercase/lowercase/capitalize;
word-spacing: 5px/-5px;
}
giangtranguyen2017-06-29 08:52 pmEntry tags:
How To Use Google Fonts
1. Type in the search engine Google Fonts and click the link that says Google Fonts
(Or copy https://fonts.google.com/ and paste it into the address bar)
2. To begin your search, just scroll down to find which one you want
(There is about 821 fonts to choose from)
3. To make it easier, head over to where the menu is and you can type the name of the font that you are looking for into the search bar
(Or click the check box on and off to display the style of the fonts you are looking for)
4. When you click the red circular button with the plus sign, it will be added to the black bar
(To add more fonts, just click the red circular button with the plus sign and it will be added to the black bar)
5. Click the black bar to see the fonts you added to the black bar and click the @Import link
6. Copy the @import url('') and paste it into Story Stylesheets in Twine
(Paste it either at the top or the bottom of Story Stylesheets to make it easier when making changes)
7. Copy the font-family and paste it into Story Stylesheets under tw-passage
(If you have more than one font, copy the name of the font and add it to the list of fonts called font-family)