Информация в блоке с загнутым уголком
 | |
| Разделим информацию в блоке под все цветовые гаммы, так как можно выставить. Но рассмотрим их них 2 по разному дизайн, это с углами и без них. Тут все очень просто, кто то скажет, что нужно добавить border-radius и все закруглится. Но не нужно забывать, что один угол у нас будет загнутый и его не как нельзя по стилям закруглить, но здесь все сделаем. Выбрал два оттенка, которые больше встречаются, но как уже сказано, вы сами доведете до нужной гаммы, чтоб подошло под ваш дизайн. Так как до этого был простой скрипт каркас, для информации, но уже с тенями. Вам будет предоставлено DEMO на каждый материал, чтоб поняли, где можно его лучше на сайте применить. Это может как описание, или простое замечание, или написано по вверх правило, так что как оказывается, место можно найти, тут теперь главное разобраться, что и сделаем. Установка: Давайте по зеленому оттенку и закругленными углами, что идет главным изображением, там просто загнутый угол и все углы также есть. Но вы можете здесь задать ширину, но высота будет автоматическая. Каркас: Код <div class="note red rounded"> <h1>ZorNet.Ru» - про uCoz</h1> <p>Статья для начинающих веб мастеров и пишем то что вам нужно.</p> </div> CSS: Код .note { position:relative; width:580px; 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 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 p {margin:0;} .note p + p {margin:1.5em 0 0;} .note.red {background:#09961B;} .note.red:before {border-color:#fff #fff #97010A #97010A; background:#09961B;} .note.rounded { -webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px; border-radius:5px 0 5px 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; } Но думаю все понятно, но можете еще со стилями поиграться и сделать что то оригинальное, хотя все стильно оформлено.  Теперь красный оттенок, где также загнутый правый верхний угол. Можно сказать простой информационный блог в оттенке.  Каркас: Код <div class="note"> <h1>ZorNet.Ru» - про uCoz, вебмастеру uCoz</h1> <p>Статья для начинающих веб мастеров и что то свое там пишем сколько нужно.</p> </div> CSS: Код .note { position:relative; width:580px; padding:1em 1.5em; margin:2em auto; color:#fff; background:#CC0202; 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 #940B0B #658E15; /* A bit more verbose to work with .rounded too */ background:#658E15; /* For 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 p {margin:0;} .note p + p {margin:1.5em 0 0;} На этом можно заканчивать, все можно сказать выведено на стилях, что грузить не будет сайт. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
