/html/help-popup.html

 1<div id="help-popup" class="popup hidden">
 2    <div class="popup-inner">
 3        <h2>
 4            <a href="#" id="help-popup-close" class="icon icon-close">Close</a>
 5            Welcome to CSS FilterLab!
 6        </h2>
 7        <p>CSS FilterLab is a great way to explore <a href="http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html" target="_blank">CSS Filters</a>.</p>
 8
 9        <span class="button-group" id="help-nav">
10            <a href="#what-explore" class="button large start selected">Explore</a>
11            <a href="#what-animate" class="button large inside">Animate</a>
12            <!-- Disable CSS Custom Filters
13            <a href="#what-create" class="button large inside">Create</a>
14            <a href="#what-share" class="button large inside">Share</a>
15            -->
16            <a href="#what-contribute" class="button large end">Contribute</a>
17        </span>
18
19        <article>
20            <div id="what-explore">
21                <h3>Getting Started</h3>
22                <p>Click on the <strong>Add Filter</strong> button on the top left corner to start exploring available filters you can apply on the sample content.</p>
23
24                <!-- Disable CSS Custom Filters
25                <ul>
26                    <li><strong>Built-in filters</strong> are those that are available by default in your browser.</li>
27                    <li><strong>Custom filters</strong> use GLSL shaders and provide textures &amp; effects that are not possible with built-in filters.</li>
28                    <li><strong>Forked custom filters</strong> are filters that you create, stored locally. If you think they are worthy of being available as custom filters for everyone to use, please contribute!</li>
29                    <li><strong>Import via Gist</strong> allows you to open a GitHub gist file that contains a shader and see how it works on the sample content.</li>
30                </ul>
31                -->
32
33                <p>Apply filters by clicking on them. You can tweak them for cool effects using the controls they display once activated. Controls to reorder filters, toggle them on or off, and to remove them are available next to their names.</p>
34                <p>Once you're happy with your tweaks, use the <strong>Save as Preset</strong> button, located above the sample content, to save them for later.</p>
35            </div>
36
37            <div id="what-animate">
38                <h3>Animating Filters</h3>
39                <p>Check out the <strong>Timeline</strong> controls on the lower end of the screen. You can use them to create animations with filters.</p>
40                <ul>
41                    <li>Make sure to apply at least one filter using the <strong>Add Filter</strong> menu.</li>
42                    <li>Click anywhere along the timeline to move the playhead to that position.</li>
43                    <li>Now, make some changes to the applied filter parameters. <br />This creates a new <strong>keyframe</strong> on the timeline.</li>
44                    <li>Click the play button from <strong>Timeline</strong> panel to view your animation. Use the input field next to the timeline to change the animation's duration.</li>
45                    <li>The controls next to the play button allow you to navigate through keyframes and toggle them on or off.</li>
46                </ul>
47
48                <h3>CSS Output</h3>
49
50                <p>As you make changes to the filters you'll see the corresponding CSS output in the <strong>CSS Syntax</strong> panel. The same goes for animations and the <strong>CSS Animation Syntax</strong> panel.</p>
51                <p>This is valid CSS code you can reuse in your own projects.</p>
52            </div>
53
54            <!-- Disable CSS Custom Filters
55            <div id="what-create">
56                <h3>Creating Custom Filters</h3>
57                <ul>
58                    <li>Click on <strong>Add Filter</strong>, select the <strong>Custom</strong> filters tab and fork one of the filters.</li>
59                    <li>Your forked filter will appear under the <strong>Forked Custom</strong> filters tab. Click the edit icon next to it to reveal the editor and make changes.</li>
60                    <li>You can change the filter's parameters or even edit the <strong>Vertex</strong> and <strong>Fragment</strong> shaders. The <strong>Error Panel</strong> helps you identify errors.</li>
61                    <li>Shaders are written in <a href="http://www.opengl.org/documentation/glsl/" target="_blank">GLSL (OpenGL Shading Language)</a>.</li>
62                    <li>Your changes are saved automatically and stored locally.</li>
63                </ul>
64            </div>
65
66            <div id="what-share">
67                <h3>Sharing your filters</h3>
68                <ul>
69                    <li>Use the <strong>Publish as Gist</strong> button from the editor panel to share your filter as a <a href="https://gist.github.com/" target="_blank">gist on GitHub</a>.</li>
70                    <li>Share that gist URL with others.</li>
71                    <li>Other people can use that gist URL to import your filter using <strong>Import via Gist</strong> from the <strong>Add Filter</strong> menu.</li>
72                </ul>
73            </div>
74            -->
75
76            <div id="what-contribute">
77                <h3>Contributing to CSS FilterLab</h3>
78                <p>If you would like to contribute to CSS FilterLab, please submit a pull request to <a href="https://github.com/adobe/cssfilterlab" target="_blank">our GitHub repository</a>.</p>
79                <p>We do require you to sign a <a href="<%= project.homepage %>dev/cssfilterlab-cla.html" target="_blank">Contributor's License Agreement</a>.</p>
80                <!-- Disable CSS Custom Filters
81                <p>If you would like to get your filter in the Custom Filters directory, please submit a pull request to <a href="https://github.com/adobe/cssfilterlab" target="_blank">our GitHub repository</a>.</p>
82                -->
83            </div>
84        </article>
85    </div>
86</div>