Скрытая сила border-radius

Здесь была ссылка на клевую статью про border-radius в клеом бложике. Но его захватили гребаные сеошники(

Саму статью удалось найди в вебархиве, ее копия ниже:

Circles and Curvy Shapes with CSS3

In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images.

The property

.round
{
    border-radius: 5px; /* all corners have a radius of 5px */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    border-radius: 5px 4px 3px 2px; /* corner values go clockwise so, first value is the top left, second, the top right, third, bottom right and fourth, bottom left */
}

Circles

A filled circle

To render a circle using the border-radius property, simply set the border-radius value to half the width/height. Both width and height should be the same.

A beautifully rendered circle.

A beautifully rendered circle.

#circle
{
		width: 200px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 100px;
}

http://web.archive.org/web/20100214161409/http://blog.creativityden.com/the-hidden-power-of-border-radius-2/

Запись опубликована в рубрике html & css с метками , . Добавьте в закладки постоянную ссылку.

3 комментария: Скрытая сила border-radius

  1. Аноним говорит:

    Действительно интересно. Побольше бы таких статей.

  2. Аноним говорит:

    Очень интересная статья. Скажите, а могу ли я ее повесить на один из своих сайтов? Соотвественно с гиперсылкой на вас.

  3. Марина говорит:

    http://step-web.ru/online-service/css-border-radius.php онлайн генератор border-radius, для лентяев.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *