27 января 2008 ~ 16 Комментариев

Простое оформление css блоков

Css

Untitled-1

Хочу поделиться с новичками парой рецептов простейшего оформления тестовых блоков с помощью css.

Закругленные блоки

pic1

Смысл создания просто создаем блок с фоном закругленного уголка, этот блок помещаем в другой блок с закругленным уголком — при совмещении это выглядит как показано на рисунке выше.

Html код блока:


<div class="round-a-gray"><div>Простейший блок с закругленными уголками</div>
</div>

Css код оформления блока:


.round-a-gray {
background:#444444 url(img/round_gray-left.png) left top no-repeat;
color:#FFFFFF;
text-align:center;
} 

.round-a-gray div {
background:url(img/round_gray-right.png) right bottom no-repeat;
padding:4px;
}

Блоки с диалоговым уголком

pic2

Смысл создания этого блока так же прост как и у предыдущего — создаем блок с текстом, помещаем в него еще один блок с фоном уголка который визуально будет располагаться внизу этого блока.

Html код блока:


<div class="tooltips-gray">Самый простой блок с диалоговым уголком<div>
</div></div>

Css код оформления блока:


.tooltips-gray {
background:#444444;
color:#FFFFFF;
text-align:center;
padding-top:4px;
} 

.tooltips-gray div {
background:url(img/tips_gray.png) left bottom no-repeat;
padding-top:4px;
height:18px;
}

Посмотреть демо

Скачать демо

Навеяно http://woork.blogspot.com/2008/03/css-message-box-collection.html

16 Комментариев для “Простое оформление css блоков”

  1. Sam 27 марта 2008 at 21:08 Permalink

    Недавно делал подобное, только было небольшое дополнительное условие: уголки были в PNG24 с прозрачностью.

    Так вот… Решение не подходит для случая с неоднородным фоном. Хотя для однородного – очень даже.

    Ответить
  2. Я собственной персоной 27 марта 2008 at 21:30 Permalink

    Ну проблему с png можно очень даже несложно решить. Да и еще не отменяли прозрачность гифов :idea:

    Ответить
  3. Zeldar 27 марта 2008 at 22:57 Permalink

    Симпотично.
    Расскажите пожалуйста про эфект HOVER для кнопки POST размещения коментариев, который используеться в вашем блоге.

    Ответить
  4. Я собственной персоной 27 марта 2008 at 23:10 Permalink

    Zeldar, а что там собственно рассказывать, сами посмотрите код и все станет предельно ясно ;)

    Ответить
  5. hyperborean 27 марта 2008 at 23:54 Permalink

    и все-таки он «преогромный»

    Ответить
  6. Я собственной персоной 28 марта 2008 at 0:54 Permalink

    hyperborean хехе, вполне может быть, но для примера пойдет :)

    Ответить
  7. андрэ_0T 28 марта 2008 at 20:41 Permalink

    спасибо, пригодица заюзаем :)

    Ответить
  8. axel 28 марта 2008 at 23:18 Permalink

    Спасибо…. дельные советы!
    Подписываюсь на RSS :)

    Ответить
  9. Zeldar 29 марта 2008 at 22:36 Permalink

    >Zeldar, а что там собственно рассказывать, сами посмотрите код и все станет предельно ясно

    Да уж посмотрел и своровал, гы….Просто тоже самое пытался реализовать через другие библиотеки но в и итоге не корректно работало в IE6 и при котлюченной графике alt не работал, а здесь прямо все как нужно.

    Ответить
  10. stasparshin 30 марта 2008 at 20:33 Permalink

    Спасибо за «для новичков» – полезная штука. И вообще отличный блог!! Подписываюсь.

    Ответить
  11. Mons 4 апреля 2008 at 4:53 Permalink

    Воспользуюсь. Где то то я видел еще способы..

    Ответить
  12. Артур 20 ноября 2008 at 21:04 Permalink

    Сейчас дорабатываю свой проект и обязательно быложу ссылку на Ваш блог! Автор, молодец!

    Ответить
  13. RodgerFox 3 февраля 2010 at 5:45 Permalink

    мне…. надо забыть про картинки html5 и css3

    Ответить
  14. css 1 апреля 2010 at 14:22 Permalink

    прикольные блоки но для хинта они больше похожи ….

    Ответить
  15. kl;kl;kl 24 июня 2011 at 17:10 Permalink

    lk;

    Ответить

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