Эффект загнутого уголка при помощи CSS

css png
Мне очень понравился этот трюк: создание блоков с загнутым уголоком только при помощи CSS3, а точнее, добавление и позиционирование цветного флажка из псевдо-элемента.
В эти блоки можно помещать фразы/цитаты, оформлять и выделять какие-либо важные части текста и т.п.
Всё это безобразие обещано работать в Firefox 3.5 +, Chrome 4 +, Safari 4 +, Opera 10 +, IE 8 +.
Не буду тянуть резину, кому интересен процесс, могут заглянуть в статью первоисточника.

А я сперва покажу готовый CSS код, который можете целиком или по частям скопировать к себе в шаблон Blogger (разумеется, цвета и закругления настраиваются).
Код копируется без тегов <style></style> в шаблон блога перед тегом ]]></b:skin>
.note {

    position:relative;

    width:480px;

    padding:1em 1.5em;

    margin:2em auto;

    color:#fff;

    background:#97C02F;

    overflow:hidden;

}



.note:before {

    content:"";

    position:absolute;

    top:0;

    right:0;

    border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */

    border-style:solid;

    border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */

    background:#658E15; /* For Opera when also applying a border-radius */

    display:block; width:0; /* Only for Firefox 3.0 damage limitation */

    /* Optional: shadow */

    -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);

}



.note.red {background:#C93213;}

.note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}



.note.blue {background:#53A3B4;}

.note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}



.note.taupe {background:#999868;}

.note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}



.note.rounded {

    -webkit-border-radius:5px;

    -moz-border-radius:5px;

    border-radius:5px;

}



.note.rounded:before {

    border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */

    border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */

    -webkit-border-bottom-left-radius:5px;

    -moz-border-radius:0 0 0 5px;

    border-radius:0 0 0 5px;

}
По завершению настроек от пробелов между строк лучше избавиться.

И уже в любом месте блога, будь то статья или виджет, можете использовать (в html режиме) такие блоки ↓
Классы оформления:
<div class="note">Здесь что-то интересное</div>

<div class="note red rounded">Лучше меньше, да лучше</div>

<div class="note blue">Съешь ещё этих мягких булок</div>

<div class="note taupe">Леночка, у нас есть wi-fi? Да, Виктор Геннадьевич, у нас есть wi-fi.</div>

По-моему, получилось очень даже симпотично.

5 комментариев:

  1. Вещь хорошая =) а ты незнаешь как можно соорудить блога уголок со ссылкой. Типа подобие как у Александра Борисова. Хотел про конкурс таким образом просвещать, но не смог соорудить

    ОтветитьУдалить
  2. На isif-life.ru? Посмотрим...

    ОтветитьУдалить
  3. прикольная реализация. Как-то не приходилось заморачиваться именно на CSS реализации, но в целом интересно.

    ОтветитьУдалить
  4. Не знаю, тот или не тот уголок, но я выкрал, который нашёл и опубликовал его здесь здесь.

    ОтветитьУдалить
  5. Отлично вообще! В избранное...

    ОтветитьУдалить