Send the link below via email or IMCopy
Present to your audienceStart 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
Prezi & CSS: Code Like a Champ - Ambassador Edition
Transcript of Prezi & CSS: Code Like a Champ - Ambassador Edition
What is CSS?
Cascading Style Sheets
Look and formatting
Opening the CSS Editor
Fonts and Stuff
Prezi has 3 main font classes: head, strong, and body
Fonts can be changed by altering the URL in parentheses. Don't forget the apostrophes!
CrimsonText.swf (plus -I, -B, -BI)
GentiumBasic.swf (plus -B, -BI)
JosefinSlab-B.swf (plus JosefinSlab, -BI)
PTSans.swf (plus -I)
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.
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.
Just replace what comes after the hash (#)
Ex. If I want to change the canvas to black:
To change the color of your text, simply change the color property nested under text.title/subtitle/body to the hexadecimal or
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, came new classes to control this text background for the title, subtitle, and body:
"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.
"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:
There are three frames:
Circle and bracket frames have the same general properties, including:
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.
this property manages the color to the bottom.
this property is the transparency of the outlying bracket or circle from the top.
this property manages the color from the top.
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.
since frames do have a border that changes in respect to aspect, you can set the thickness to vary
Rectangle frames have a few slight differences:
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: 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.
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.
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.
this value represents the color of the line.
gradEndColor: this property does not apply to lines.
gradStartColor: this property does not apply to lines.
Let's make this.
First, we need to understand the code.
represents the opacity of your circle's border on a range from 0-1.
represents the interior opacity of the circle from the bottom.
represents the interior opacity of the circle from the top.
do not touch.
controls the rounding radius of the circle.
controls the thickness of the circle. Decreasing this value opens up the interior of the circle, so the specified colors become a border.
represents the opacity of your shape's border on a range from 0-1.
represents the interior opacity of your shape from the bottom.
represents the interior opacity of your shape from the top.
do not touch.
controls the rounding radius of your shapes.
controls the thickness of your shape.
shape.style1 - shape.style5
this value is the border color.
represents the border thickness, which changes relative to how you change your object. I usually leave this value alone.
ever since introducing gradients, this value doesn't do much. I usually leave this value alone as well.
this represents the color spanning from the bottom of the shape or circle.
this represents the color spanning from the top of the shape or circle.
CODE LIKE A CHAMP
1000 FONTS, BUT HOW?
Check out these 1000 additinal fonts: http://www.vandijkcomputeropleidingen.nl/prezi-fonts
Prezi has a new feature. For example,
you'll see that I have Raleway Bold set as my "body" font. Prezi recognizes font families of the strong and body classes, and auto-populates the other font-face classes in order for us to be able to use BOLD, ITALICS, and REGULAR fonts.
Note: This is only for Subtitle and Body
this property controls the transparency of the border
this property manages the color of the border
this property manages the thickness of the border