Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Prezi & CSS: Code Like a Beast - Ambassador Edition

Prezi & CSS Webinar
by

Andrew Washuta

on 17 June 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Prezi & CSS: Code Like a Beast - Ambassador Edition

Prezi & CSS
What is CSS?
Welcome Ambassadors!
Cascading Style Sheets
Look and formatting
Let's get started, shall we?
Opening the CSS Editor
Fonts and Stuff
Prezi has 3 font classes:
body, head, strong
head
strong
body

Title
Subtitle
Body
Fonts can be changed by altering the URL in parentheses. Don't forget the apostrophes!
AnnieUseYourTelescope.swf
Calluna-Regular.swf
Crial-Black.swf
CrimsonText.swf AnnieUseYourTelescope.swf
Calluna-Regular.swf
Crial-Black.swf
CrimsonText.swf (plus -I, -B, -BI)
danielbd.swf
DancingScript.swf
DancingScript-B.swf
existence-unicaselight.swf
fertigopro.swf
Fontin.swf
Fontin-I.swf
Fontin-B.swf
freeserif.swf
GentiumBasic.swf (plus -B, -BI)
GentiumBasic-I.swf
GentiumPlus-I.swf
GentiumPlus-R.swf
HelveticaNeueLTPro-Blk.swf
HelveticaNeueLTPro-Lt.swf
Inconsolata.swf
jd.swf
JosefinSlab-B.swf (plus JosefinSlab, -BI)
JosefinSlab-I.swf
kochi-gothic-subst.swf


LiberationSerif-Bold.swf
LiberationSerif-Regular.swf
LobsterTwo.swf
LoveYaLikeASister.swf
myriadpro.swf
NanumGothicBold_Prezi.swf
Nunito.swf
Nunito-Light.swf
Nunito-B.swf
OpenSans.swf
OpenSans-B.swf
OpenSans-BI.swf
OpenSans-I.swf
OpenSans-Light.swf
OpenSans-XB.swf
Optimum-Roman.swf
pincoyablack.swf
PTSans.swf (plus -I)
PTSans-B.swf
PTSans-BI.swf
PublicGothicSquare.swf
SerifaStd-Light.swf
VAL.swf
VeraMono.swf
VL-PGothic-Regular.swf
YanoneKaffeesatz.swf
YanoneKaffeesatz-B.swf
{
Here's a nice little list of fonts that are still in the Prezi database. To add them, just replace the current URL with the one you want to use.
Background
gradStart : controls the canvas color from the top
gradEnd : controls the canvas color to the bottom
Note: If these two values are different, your background will have a gradient, or two colors that blend together.
Any hexadecimal
R
G
B
will work!

Just replace what comes after the hash (#)

Ex. If I want to change the canvas to black:
gradEnd: #000000;
gradStart: #000000;
To change the color of your text, simply change the color property nested under text.title/subtitle/body to the hexadecimal or
R
G
B
of your choice. This is very helpful when matching colors that are not defaults in Prezi's database.
}
With the introduction of Prezi's background color for text, comes new classes to control this text background for the title, subtitle, and body:
background-alpha: 0.7

"Alpha" refers to opacity, essentially whether or not the object is transparent. Currently, 0.7 means it's at 70% opacity, which you can see in the example to the right. If the alpha property is set to 1, the background would be black and fully opaque. In this instance you can see the grid lines showing through.
background-padding: 6

"Padding" refers to the distance between the window and the object, in this case the text and the outside of its background / highlight. The greater this number, the more space there will be between the boundary background and the text. Currently, I have it set at 6, which is a lot of padding, just as an example.
}
Ex. If I want a canvas that is a black-white gradient it would read as such:
gradStart: #000000;
gradEnd: #FFFFFF;
Frames
There are three frames:
Circle and bracket frames have the same general properties, including:
gradEndAlpha: this property is the transparency of the outlying bracket or circle to the bottom and the range is 0 to 1, representing opacity, 1 being fully opaque.
gradEndColor: this property manages the color to the bottom.
gradStartAlpha: this property is the transparency of the outlying bracket or circle from the top.
gradStartColor: this property manages the color from the top.
padding: similar to the text-background, this is the distance between the object and the window, in the case of a frame this means text or other multimedia.
Note: I rarely touch their padding, since it is a property that may change based on your prezi's needs.
thickness: since frames do have a border that changes in respect to aspect, you can set the thickness to vary
gradEndAlpha
gradEndColor
gradStartAlpha
gradStartColor
thickness
Rectangle frames have a few slight differences:
radius: this manages whether the rectangle is rounded or not. If this value is 0 you have sharp corners, ie. a rectangle. In my example on the left, I have my radius set to 10 so I have a rounded rectangle.
gradStartColor / gradEndColor: by now you should understand what these represent. In the circle and bracket frames it is the stroke color. In the rectangle frame it represents the background colors instead.
Note: Play with the colors and the opacity. You can get some really cool effects and transitional values with gradients and transparent frames.
&
Now we get to the cool stuff including a couple of hidden arrow properties.
Arrows and lines have 5 styles that apply to both objects: line-arrow.style1 - line-arrow.style5.
ARROW
LINE
borderAlpha: this is the opacity of the border of the arrow. Range is 0-1.
borderThickness: this is the thickness of the border color, which is defined by the color property under the style.
gradEndAlpha: as per usual, this represents the opacity of the interior color from the bottom of the arrow.
gradStartAlpha: this represents the opacity of the interior color from the top of the arrow.
lockTintAlpha: do not touch this property.
Note: Arrows can be gradients.
Note: Lines cannot be gradients.
line-arrow.style1
color:
this value represents the border color.
gradEndColor: interior color from the head of the arrow.
gradStartColor: interior color from the tail of the arrow.
color: default color. This can be absolutely anything because when you create a line it is assigned one of the five default styles.
lockTintAlpha: do not touch this property.
line-arrow.style1
color:
this value represents the color of the line.
gradEndColor: this property does not apply to lines.
gradStartColor: this property does not apply to lines.
{
These are hidden properties.
Shapes
Let's make this.
First, we need to understand the code.
circle
shape
borderAlpha: represents the opacity of your circle's border on a range from 0-1.
gradEndAlpha: represents the interior opacity of the circle from the bottom.
gradStartAlpha: represents the interior opacity of the circle from the top.
lockTintAlpha: do not touch.
radius: controls the rounding radius of the circle.
thickness: controls the thickness of the circle.
borderAlpha: represents the opacity of your shape's border on a range from 0-1.
gradEndAlpha: represents the interior opacity of your shape from the bottom.
gradStartAlpha: represents the interior opacity of your shape from the top.
lockTintAlpha: do not touch.
radius: controls the rounding radius of your shapes.
thickness: controls the thickness of your shape.
shape.style1 - shape.style5
borderColor: this value is the border color.
borderThickness: represents the border thickness, which changes relative to how you change your object. I usually leave this value alone.
color: ever since introducing gradients, this value doesn't do much. I usually leave this value alone as well.
gradEndColor: this represents the color spanning from the bottom of the shape or circle.
gradStartColor: this represents the color spanning from the top of the shape or circle.
click!
(ctrl+shift+c,
Thanks for watching!
Any questions?
Prezi
&CSS

CODE LIKE A BEAST
:
UPDATE
Check out these 1000 additinal fonts: http://www.vandijkcomputeropleidingen.nl/prezi-fonts
Full transcript