CSS

CSS3 Gradients


!available since version 4.0.0.513

 

with CSS3 gradients you can define background gradients for any css based element in ezgenerator

CSS3 gradients are supported by all modern browsers (including  IE10), for IE6-IE9, only simple 2 steps horizontal and vertical gradients are supported

 

gradients

 

to use CSS3 gradients,

- select gradient type (vertical, horizontal, diagonal or radial) in BACKGROUND section of css properties  (1)

- by default, gradient use 2 stops (2) (0% and 100%), but with right click on gradient bar you can also work with 4 stops gradients

- select one of the stops (2) and move it with mouse to desired position, selected stop have Red color arrow

- you can change color (including opacity) for selected stop with color selector (3)


- you can see instant preview (4) of  gradient in most dialogs, but as ezgenerator use IE for internal previews, you will have to update your internet explorer to version IE10 to see all types of gradients correctly inside ezgenerator

Internet Explorer 10 is default browser on Windows 8, but is also available for Windows 7 from here


Print  posted by miro   CSS tags:  • CSS3 • gradients   permalink
0 0

How to use custom Fonts


By default EzGenerator include standard collection of web-fonts and Google Fonts in dialogs and screens, but it's also possible to manually include Font-Face fonts.

 

1. add rules for each fonts in project css (project template --> template editor --> template css)

example of font-face rule (for font with name : DeliciousRoman) :

 

1.a (when font is stored on external server)

@font-face{font-family: DeliciousRoman ; src: url('http://www.font-face.com/fonts/Delicious-Roman.eot'); src: url('http://www.font-face.com/fonts/Delicious-Roman.ttf') format('truetype'); font-weight: normal; font-style: normal;}


1.b (when font is stored on your own server)

@font-face{font-family: DeliciousRoman; src: url('fonts/Delicious-Roman.eot'); src: url('fonts/Delicious-Roman.ttf') format('truetype'); font-weight: normal; font-style: normal;}

 

2. create file with name font_faces.ini in ezgenerator /webtemplates /___shared / font_faces.ini folder

edit this file with notepad, add name of each font you want to include on separate line :

 

3. in case you store fonts on your own server (1b) , make new folder in your project: 

project /web /documents /fonts and copy fonts files to this folder

 

DeliciousRoman

 

 

4. next time you open ezgenerator, your fonts should be available in list of fonts (at the bottom of list)

 

notice:

Internet Explorer only supports .eot type fonts

Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

 

if you need to support all browsers :

visit http://www.fontsquirrel.com/

with this service you can create all different font files and css rules

after this, copy font files to fonts folder (3.) and css rules to (1)

 

   


Print  posted by miro   CSS tags:  • font-face • fonts   permalink
5 1


[home] 1-2 of 2


CATEGORIES



TAGS


RECENT ENTRIES