Лента с текстом на CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
body { height: 100%; margin: 0; background: #ccc; } .ribbon { display: inline-block; font-size: 14px; line-height: 28px; color: #8699A0; text-shadow: 0 0 1px #758890; margin: 20px 70px; font-family: arial,verdana; outline: none; padding: 14px 30px; position: relative; text-transform: uppercase; box-shadow: 0 0 30px 0 rgba(0,0,0,0.1),0 36px 0 -18px #ccc; } .ribbon:before { content: ''; position: absolute; top: 18px; left: -15%; z-index: -1; width: 130%; height: 0; border: 28px solid rgba(0,0,0,0); border-left: 28px solid #ccc; border-right: 28px solid #ccc; } .ribbon:after { content: ''; width: 100%; height: 0; position: absolute; top: 100%; left: 0; z-index: -1; /*The height of the top border is same as width of the left/right borders for the smoothest effect. The height of the top border is also the same as the offset the :before element has from the top*/ border-top: 18px solid #999; border-left: 18px solid transparent; border-right: 18px solid transparent; } .ribbon,.ribbon:before { background-image: linear-gradient(transparent 8%,rgba(0,0,0,0.1) 8%,rgba(0,0,0,0.1) 14%,transparent 14%,transparent 86%,rgba(0,0,0,0.1) 86%,rgba(0,0,0,0.1) 92%,transparent 92%),linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0)),linear-gradient(45deg,transparent 40%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.1) 60%,transparent 60%),linear-gradient(white,white); background-size: cover,cover,4px 4px,cover; } .ribbon,.ribbon:before,.ribbon:after { box-sizing: border-box; background-origin: border-box; } |
|
1 |
<h1 class="ribbon">Здесь любой ваш текст</h1> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
