Красивая граница с тенью

Рубрика: Секреты верстки;
Метки:

Красивая граница с тенью.

Привет друзья.

Сегодня от нефиг делать решил записать для вас малюсенький урок smile

Границу мы эту будем тестировать на картинках, но в принципе - ее можно применить к любому блоку.

Да, и я рассмотрю два способа задания такой границы.

1 способ. Он заключается в том, что мы будем использовать свойства border и box-shadow.

2 способ. Мы будем использовать свойства padding и border.

Тренинг по вёрстке сайта на HTML5 и CSS3

Демо


Как вы знаете - тень в старых браузерах не поддерживается. Поэтому 1 способ хоть и правильный - но не совсем универсальный.

Во втором же способе - ваша граница будет одинаково отображаться во всех браузерах!

Так то.

Идея конечно не нова, я ее уже давно использую. И давно уже хотел поделиться с вами. Но все почему то забывал.

Эх... Голова моя дырявая. rolleyes

Да, кстати, на эту идею меня навела одна из статей этого сайта: как создать свой сайт самому. Название точно такоеже, как и у моего smile

Если будет свободное время, рекомендую там полазать.

В общем - отдаю эту идею на ваш строгий суд grin



Скачать архив файла-заготовки.

PS: жду вашего вердикта, космические засЛанцы LOL

PSS: кто не нажмет на кнопку ниже, тот букву "Л" в слове выше - смело может менять на "Р" surprised

Комментариев: 13 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 13
  •  freemusic | 18 августа 2012 в 17:13:47

    Спасибо полезная инфа

  •  Серёга | 19 августа 2012 в 17:49:27

    Пожалуйста, в принципе - здесь ничего такого и нет.

    Просто подумал кому то может пригодиться.

  •  sm0k3 | 21 августа 2012 в 21:49:37

    +1 angel

  •  sm0k3 | 22 августа 2012 в 14:01:35

    Серёга случаем не заблокировал трафик от белорусских провайдеров?)

    А по поводу первого коммента - щаз так модно продвигать свои сайты, написал пару слов и оставил ссылку. На самом деле, им эта инфа ничего не даст, с сайтом музыки на юкозе и базой на ~250 его любимых песенок... не взлетит имхо 300%

  •  Серёга | 22 августа 2012 в 14:24:48

    Это не я блокировал. Хостинг тупит чего то.

    Сам не мог долезть до своих сайтов.

  •  sm0k3 | 22 августа 2012 в 18:29:24

    OpenVPN + Private Tunnel для таких крайних случаев подходит) 100 метров в месяц бесплатно, хотя я их юзаю если айпишники вдсок палить не особо хочется по мелочам, либо CGI Proxy.

  •  Серёга | 22 августа 2012 в 19:47:43

    Мне важно что бы мои сайты были доступны для любых айпишников.

  •  Александр | 19 сентября 2012 в 11:14:27

    Доброго времени суток, рад увидеть еще один урок. Молодец, так держать!!)) единственное добавлю, можно было вместо картинок использовать блок, закрасить его и вписать нужные строки, желательно их тоже оформить) (таким образом быстрее будет загружаться сайт, будет меньше запросов на сервер, улучшается индексация сайта и текст в блоке проще отредактировать, чем постоянно менять картинку) А в общем твое мастерство мне нравится) успехов!

  •  Серёга | 19 сентября 2012 в 12:10:35

    Хорошая мысля приходит апосля smile

    Полностью согласен, но тогда преследовалась другая цель, посему об этом даже не думал smile

  •  Дмитрий | 6 января 2013 в 00:16:35

    архив не содержит css

  •  Серёга | 6 января 2013 в 14:49:19

    А он и не должен по моему.

  •  svkchains97 | 18 августа 2015 в 19:26:04

    ссылка на демо битая