Красивая ленточки с текстом изображение CSS3
 | |
| Здесь идет как скрипт и как изображение, это просто на картинке видим что то вреде надпись в красивом дизайн. И вот здесь вы можете понять как это можно сделать и тем украсить свой интернет портал. Так как часто встречается на ресурсах изображение и на ней ленточка, что ее украшает или просто что то написано по теме. Методы различные могут быть, но одно точно это оригинально. Но хочется уже добавить, что вся работа будет заключаться средствами CSS3 и не каких больше дополнений. Вариант №1 HTML Код <div class="visual"> <img src="http://zornet.ru/images/screenshot1.jpg"> <a href="http://zornet.ru/" class="corner"><span> </span>Zornet.ru/</a> </div> CSS Код <style> a { text-decoration: none; cursor: pointer; } /* Стили базового блока с картинкой */ .visual{ margin:0 auto; position: relative; width: 300px; } /* Стили картинки внутри блока */ .visual img { float: left; width: 100%; border: 1px solid #cacaca; box-shadow:2px 2px 5px #333030; } /* Стили ленты */ .corner { height: 0px; border: 14px solid rgba(12, 151, 0, 0.67); border-right-color: transparent; box-shadow: -0px 5px 5px -5px #000; font: 12px/0 'PT Sans', arial, sans-serif; color: #fef; top: 9px; left: -9px; position: absolute; padding: 0 14px 0 5px; z-index: 1; } /* Меняем цвет текста ленты при наведении*/ .corner:hover{ color: #fff; } /* Стили нижнего уголка ленты */ .corner span { content: ""; position: absolute; top: 13px; left: -14px; width: 0; height: 0; text-decoration: none; border-top: 9px solid transparent; border-left: 9px solid transparent; border-top-color: rgba(0, 151, 0, 0.9); } </style> Вариант №2  HTML Код <div class="visual"> <a href="###"> <img src="http://zornet.ru/images/screenshot2.jpg"></a> <a href="http://zornet.ru/" class="corner"><span> </span>Zornet.ru/</a> </div> CSS Код a { text-decoration: none; cursor: pointer; } /* Стили блока с картинкой */ .visual{ margin:0 auto; position: relative; width: 300px; } /* Стили картинки внутри блока */ .visual img { float: left; width: 100%; border: 1px solid #cacaca; -webkit-box-shadow: 4px 4px 8px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 4px 4px 8px 0px rgba(50, 50, 50, 0.75); box-shadow: 4px 4px 8px 0px rgba(50, 50, 50, 0.75); } /* Стили ленты */ .corner { background: rgba(170,78,184,0.85); box-shadow: -0px 5px 5px -5px #000; color: #fff; position: absolute; font: 12px/26px 'PT Sans', arial, sans-serif; z-index: 1; top: 9px; left: -9px; padding: 0 24px 0 24px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* Стили уголка ленты */ .corner span { content: ""; position: absolute; top: 100%; left: 0; width: 0; height: 0; text-decoration: none; border-top: 9px solid transparent; border-left: 9px solid transparent; border-top-color: #8b3c97; } </style> Источник: http://dbmast.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
