With the new CSS property @font-face you can use the remotely hosted custom fonts in the web design. The font will be displayed properly on every computer even if it is not installed.
Brand new support forums
Hello there! We have a support forum set up for our users. From now on, the support will be provided through the support forum. Questions in the comment section may be overlooked so please use the support forum, its easier to use, searchable and other users can help and be helped.
Please visit our forum, create a free account and post your questions in forum, we will be right with you!
Embedding web fonts with @font-face
Clean and Stylish CSS3 Form
This article is about creating a form using some of CSS3 properties. You can easily customize the style.
Creating text effects with CSS text-shadow
The text-shadow is not new property in CSS3, infact it was introduced in CSS 2, however the browsers have implemented it recently. As the name refers, the text-shadow property allows to create text shadow. Following is the syntax of the text-shadow.
Syntax
Using CSS3 Transforms
With the CSS3 Transform property we can transform the appearance of elements. The transform property allows to translate, rotate, scale, and skew.
Each property is explained below:
Translate
With translate property, we an move an element from its original position by x-axis from the left side and y-axis from the top side. The Syntax of translate is
translate (x, y)
Creating CSS3 buttons in easy way
This tutorial demonstrates how to create simple scalable button using some of CSS3 properties such as border-radius and linear-gradient.
CSS3: Creating Radial Gradients
In my previous post, I explained how to make linear gradients in CSS3. In this post, I will explain how to create radial gradients in CSS3 with radial-gradient property without using any image.
CSS3: Creating Linear Gradients
We can create gradients in CSS3 without using any image. The gradients are supported by Mozilla(Firefox) and Webkit(Safari, Chrome etc) based browsers. Unfortunately Internet explorer does not support gradient feature yet. In this tutorial, I will explain how we can use linear gradients in the webkit and mozilla based browsers.
CSS3: Creating Rounded Corners
We can create nice rounded corners without using any images or JavaScript with CSS3 by using the property border-radius.
The basic use of border-radius is:
border-radius: 10px;
We can use % as well, for example:
border-radius: 10%;
However, as we need to add the vendor prefixes at the moment, we can use this property as following:
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
CSS3: box-shadow and inset-shadow
With the box-shadow property of CSS3, we can add shadows to the different elements on web page, such as div, span or images.
Following is the syntax for box-shad
box-shadow: <horizontal> <vertical> <blur> <color> <inset>
Horizontal offset: A positive value places the shadow on the right of the box, while the negative value will place the shadow on the left of the box.
Vertical offset: A positive value places the shadow below the element, while the negative value will place the shadow above the element.
Blur(Optional): A positive value of blur increases the blur and make the box shadow softer. The negatives are not allowed for the blur. If value of blur is not specified, it uses the default value 0, which mean no blur.
Color(Optional): The color value for the shadow. We can either use RGB colors or Hexadecimal colors.
Inset(Optional): The inset property creates an inner shadow effect which means that the gradient effect will be inside of the div.
