Category Archives: CSS

CSS snippets, tips, tricks, and techniques.

CSS3 2D Transforms

Use CSS3 transform property to apply a two-dimensional transformation

Creative CSS

CSS3 2D Transforms allow for various transformation to be applied to elements, such as scaling or rotating, in two-dimensional space. It is possible to apply one or many transforms to a single element. This allows for effects such as rotating text or images at an angle, and can be combined with transitions to apply interactive effects such as scaling up elements when the users interacts with them.

Posted in CSS | Tagged , , , , , | 1 Response

CSS3 Transitions

Use CSS3 transition property to change CSS values

Creative CSS

For richer user interfaces it is often desirable to include some animation to make an effect more appealing. CSS3 Transitions allows property changes in CSS values to occur in animations over a specified duration.

Posted in CSS | Tagged , , , , , , , | Leave a comment

CSS3 User Interface Box Outline Offset

Use CSS3 outline-offset property to offset the outline rendition

Creative CSS

Setting an element outline is already available in CSS2, but in CSS3 outline has been expanded to include the outline-offset property. This allows to offset the outline by a specified number of pixels. By default, the outline is drawn starting just outside the edge or border of an element.

Posted in CSS | Tagged , , , , , | 1 Response

CSS3 User Interface Box Sizing

Use CSS3 box-sizing property to alter the default CSS box model

Creative CSS

The CSS3 box-sizing property allows you to determine whether you want an element to render it’s borders and padding within its specified width, or outside of it. By default, box-sizing property is set to content-box. By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and place the border and padding inside the box.

Posted in CSS | Tagged , , , , , , , | Leave a comment

CSS3 User Interface Box Resize

Use CSS3 resize property to allow end user to resize an element

Creative CSS

CSS3 offers some great new properties relating to resizing elements such as text areas, outlining, box sizing, and more. We have already discussed some of these features. In this article and subsequent few more we will focus on some of the most significant ways you can enhance user interface features in CSS3.

Posted in CSS | Tagged , , , , , | Leave a comment

CSS3 Box with Multiple Columns

Create multiple columns with CSS3 column-count and column-gap properties

Creative CSS

You may have multi-column layouts using CSS3 which allows content to flow into multiple columns with a gap and a rule between them.

Posted in CSS | Tagged , , , , , , , | 1 Response

CSS3 Text with Shadow

Create text shadow with CSS3 text-shadow property

Creative CSS

CSS3 gives you a simple text shadow with text-shadow property. However, this feature is not new in CSS3; it was originally proposed in CSS2.

Posted in CSS | Tagged , , , , | 1 Response

CSS3 Box with Shadow

Create box shadow with CSS3 box-shadow property

Creative CSS

Box-shadow is one of CSS3′s best new features. CSS3 gives you a nice box shadow with box-shadow property.

Posted in CSS | Tagged , , , , | 1 Response

CSS3 Box with Rounded Corners

Create rounded corners with CSS3 border-radius property

Creative CSS

The CSS3 border-radius property allows web designers and developers to create rounded corners easily in their design elements, without the need for corner images or the use of multiple div tags. At present boder-radius property enjoys widespread browser support.

Posted in CSS | Tagged , , , , | 3 Responses

Creative CSS – An Introduction

An introduction to CSS tips, tricks, techniques, and snippets

Creative CSS

This article is a small introduction to two new series about Cascading Style Sheets (CSS) – CSS Tips, Tricks and Techniques and CSS Snippets. The aim of this introductory article is to familiarize those who are totally new to CSS with some of the basics. The series to be published on our blog would enrich and supplement your knowledge of CSS.

Posted in CSS | Tagged , , , , , | Leave a comment