Skip to Content
Author's profile photo Former Member

Some CSS3 codes in Design Studio 1.4

CSS3 gradients let you display smooth transitions between two specified colors.


Linear Gradient – Top to Bottom

The following example shows a linear gradient that starts at the top. It starts lightgray, transitioning to white:

Untitled1.png

Add a PANEL -> Click CSS Style;

background: linear-gradient(lightgray, white);

CSS3 Text Shadow

In CSS3, the text-shadow property applies shadow to text.

Untitled2.png


Add a Sample Text-> Click CSS Style;


     text-shadow: 5px 5px 5px blue;

CSS3 2D Transforms

With CSS3 transform, we can move, scale, turn, spin, and stretch elements. We are going to learn about the 2d transform methods: rotate(); skew(); scale(); matrix();

We will use “rotate()”;

Untitled3.png

Click Sample Text -> CSS Style ->

Add: transform: rotate(-90deg);

If you want to try the other methods, let me show you syntax of them:

transform: scale(3,5);

transform: skew(20deg,30deg);

transform: matrix(0.866,0.5,-0.5,0.866,0,0);

Source: http://www.w3schools.com/

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Ridvan

      I thinks it's very usefull.

      Regards