среда, 20 мая 2009 г.

CSS-спрайтово скругленные углы

Сделал блок текста со скругленными углами с использованием элементов техники CSS-sprites. Пример работает для блоков фиксированного размера. Но предполагаю впоследствии сделать и для произвольной величины.


Как выглядит


CSS rounded


Из чего состоит


  1. Файл изображения


  2. Стили CSS

  3. .rounded {
    width: 300px;
    margin: 16px;
    background-color: #DFE5ED;
    color: #000;
    }
    .rounded p {
    padding:5px 10px;
    }
    .rc {
    background-image: url('public/rounded.gif');
    background-repeat:no-repeat;
    height: 150px;
    }
    .tl {
    background-position: -15px -15px;
    }
    .bl {
    background-position: -15px 135px;
    }
    .tr {
    background-position: 285px -15px;
    }
    .br {
    background-position: 285px 135px;
    }

  4. Код HTML

  5. <div class="rounded">
    <div class="rc tl">
    <div class="rc tr">
    <div class="rc bl">
    <div class="rc br">
    <p>Блок фиксированной ширины</p>
    <p>CSS-блок со скругленными краями c использованием CSS-спрайтов.</p>
    </div>
    </div>
    </div>
    </div>
    </div>


Работает в Firefox, IE 6, Chrome, Opera, Safari.


Что дальше?


Я предполагаю CSS скругленные углы для блоков произвольного размера.


3 Комментариев :

pavel.odintsov комментирует...

Спасибо, пригодилось :)

Анонимный комментирует...

прикольно, вот тут про скругленные углы немного больше написано

Croaker комментирует...

Спасибо, дорогой Аноним :). Про скругление с помощью CSS уже давал пост.
В текущем проекте делал скругление на чистых div-ах, даже helper сделал для дальнейшего использования. Как будет время – поделюсь.

Отправить комментарий

Жги!