Эффект загнутых уголков с использованием только CSS


Эффект загнутых уголков с использованием только CSS

1878
6 из 10
Проголосовало: 4




В данном уроке мы создадим эффект загнутых уголков без использования изображений и дополнительной разметки. Он отлично работает во всех современных браузерах и хорошо подходит для дизайна сайта с простыми цветовыми решениями.

Окончательный вид кода

Code
<div class="note">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

<style>
.note {
  position:relative;
  width:30%;
  padding:1em 1.5em;
  margin:2em auto;
  color:#fff;
  background:#97C02F;
}

.note:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:#fff #fff #658E15 #658E15;
  background:#658E15;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  display:block; width:0; /* Преодоление ограничений Firefox 3.0 */
}

.note.rounded {
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.note.rounded:before {
  border-width:8px;
  border-color:#fff #fff transparent transparent;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;
}
</style>
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://nicolasgallagher.com/pure-css-folded-corner-effect/
  • Всего комментариев: 1

-=$@30K=-
0
-=$@30K=- написал: Написано 25 Декабря 2011 в 20:12
Комментарий №1
а куда добавлять то???

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2106
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 430
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • Спасибо... А вот насчет "Но вот баги" можно поконкретнее???
  • CbIPoK2513 написал:
  • Интересная задумка и реализация.. Но вот баги.. А так хорошо.
  • LeKcUs написал:
  • Запомни раз и на всегда... Все файлы ВСЕ с окончанием .swf пишутся в Adobe Flash. Я лично пишу в Adobe Flash CS6 cool Я скоро выложу новый шаблон более интересный...
  • Winston888 написал:
  • Я с флешь не сталкивался поэтому интересно файл main.swf ты сам писал ? Если да то через что ?
  • LeKcUs написал:
  • Я думаю что следующая версия будет по дизайну лучше! Ждите.... cool
    Последние темы
    Опрос
    416
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 2
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: