8 Replies Latest reply on Jul 2, 2013 2:48 PM by resdesign

    how to add css to Edge

    Rezu Level 1

      Howdy

       

      EA 1.0

       

      I'm looking for a site that will show the different ways one can add CSS to an object in Edge.

       

      Found this code on one site...

       

      sym.$(manOne).css({"width":"275", "height":"280"});

       

      Found this code on another...

       

      sym.$(manOne).css({"width", 275});

       

      Commas...no commas...add a colon...no colon...

       

      What is the standard way for expressing CSS code in the Actions panel. Specifically, I'm looking to scale an object's x & y, but would love to know what the common language for adding CSS to Edge looks like.

       

      Thanks,

       

      k

        • 1. Re: how to add css to Edge
          resdesign Adobe Community Professional & MVP

          There are 2 ways:

          One value

          1

          sym.$('text").css('width',800);

          2

          sym.$('text").css({'width':800});

           

          More than one value

          1

          sym.$('text").css('width',800).css('eight',200);

          2

          sym.$('text").css({'width':800, 'height':200});

           

          Note you can use the value 200 without quotations or '200px' with quotations.

           

           

          To scale:

           

          sym.$('Rectangle').css('transform', 'scale(2,4)');

           

          or

           

          sym.$('Rectangle').css({'transform': 'scale(2,4)');

          • 2. Re: how to add css to Edge
            Rezu Level 1

            You Rock, resdesign! This type of nomenclature was exactly what I needed!

             

            What about properties that need to be massaged for different browsers?

             

            div

            {

            transform: rotate(45deg);

            transform-origin:20% 40%;

            -ms-transform: rotate(45deg); /* IE 9 */

            -ms-transform-origin:20% 40%; /* IE 9 */

            -webkit-transform: rotate(45deg); /* Safari and Chrome */

            -webkit-transform-origin:20% 40%; /* Safari and Chrome */

            }

             

            Or what about properties that have multiple parameters?

             

            div

            {

            box-shadow: 10px 10px 5px #888888;

            }

             

             

            Does Edge have a site that shows all of the different permiations or ways to insert the CSS properties into Actions?

             

             

            cheers,

             

            kave

            • 3. Re: how to add css to Edge
              resdesign Adobe Community Professional & MVP

              yes you need to add the prefixes.

              -moz-

              -webkit-

              etc..

              1 person found this helpful
              • 4. Re: how to add css to Edge
                resdesign Adobe Community Professional & MVP

                sym.$('text").css({

                     'width':800,

                      'height':200,

                     'color':'red'

                });

                 

                If it is CSS3 it all works. Use browser specific prefixes and it will work:

                 

                Example for a star war style intro

                 

                 

                // FF

                sym.$('gradient').css('background', '-moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');

                sym.$('container').css('-moz-transform-origin', '50% 100%');

                sym.$('container').css('-moz-transform', 'perspective(250px) rotateX(25deg)');

                 

                 

                // Chrome and others

                sym.$('gradient').css('background', '-webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');

                sym.$('container').css('-webkit-transform-origin', '50% 100%');

                sym.$('container').css('-webkit-transform', 'perspective(250px) rotateX(25deg)');

                 

                 

                // Internet Explorer

                sym.$('gradient').css('background', '-ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');

                sym.$('container').css('-ms-transform-origin', '50% 100%');

                sym.$('container').css('-ms-transform', 'perspective(250px) rotateX(25deg)');


                 

                 


                1 person found this helpful
                • 5. Re: how to add css to Edge
                  resdesign Adobe Community Professional & MVP

                  for example background repeat:

                   

                   

                  sym.$('Stage').css({

                           "background-image": "url('images/kennedy.jpg')",

                           "background-repeat": "repeat-x"

                           });

                  1 person found this helpful
                  • 6. Re: how to add css to Edge
                    resdesign Adobe Community Professional & MVP
                    Does Edge have a site that shows all of the different permiations or ways to insert the CSS properties into Actions?

                     

                     

                    I do not know. Comes with practice. If I do not remember how to do something, I just google it.

                     

                    http://www.w3schools.com

                    is great.

                     

                    Basically you can use:

                     

                    ({'property':'value'});

                    or

                    ('property','value'),

                    1 person found this helpful
                    • 7. Re: how to add css to Edge
                      Rezu Level 1

                      Thanks, I use w3schools.com all the time, it's just taking a bit to get up to speed with how CSS is formatted in Edge.

                       

                      Cheers!

                       

                      kave

                      • 8. Re: how to add css to Edge
                        resdesign Adobe Community Professional & MVP

                        No probelm! Glad to help.

                        Cheers!