Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Сниппеты » CSS Сниппеты » Линия из двух цветов

Линия из двух цветов


     01.05.2013    css, border, сниппет    CSS Сниппеты    6306

Простенький сниппет для реализации двухцветной полоски над текстом, если побаловаться с градиентами - можно сделать радугу))
HTML:
<h2>Lorem ipsum dolor sit.</h2>

CSS:
h2 {
    position: relative;
    display: inline-block;
    padding: 5px;
    border-top: solid 4px #f96;
}
h2:after {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    height: 4px;
    width: 40%;
    background: #444;
}
Демо

2 комментария

radcor
Юзер

radcor - -

Хорошее решение. Я на дивах это делал, но тут на много легче и меньше кода.

mikhailrojo
Юзер

mikhailrojo - -

спасибо чувак, супер решение - я долго думал как это можно сделать - только после того как нашел как ты реализовал - кажется так очевидно!
молодец


Server restriction: dle-faq.ru Server restriction: www.dle-faq.ru ------ LICENSE FILE DATA ------- VU009X5YSAjbcTro6oQIH1pF0S0tHxw6 X3utgKa7k/J1knblsjqyrOfrKZkgtoH/ zjlbst4p/kmDl5KZkd2dnt5KCGOclpIJ f15Iv1BnJzXfiaZG1x35jbi5OyKhVog3 jd7sUxVMvMgUO2gUyN1fsV9o0h27MrO3 UanDBpzJbgVvUjZys0NIDuOtCgzaFIKA 3HWMRbEgADHgY0K1T7ns1t0vCFW7aDKF 5DuZpCjs2D5tIyIrfctUB1i5WiSouPDg vl2Qsrzc0NrTJ+ebSEUrnhyDjWMy7rQA Pn3LGNCiOmMRuIOLBp+NmN7hL2k/JSzd JpeoQ5gzGRR8zt7F5ZIdIcZuTfZ8+/zD dI6KQJJeu0HsU7Ra3AXJU0EkiXg8vjtd Tq6ebBesu4jGLfslfVw01bJRQz1+/OtW EmutMaoSt+S6Goja5MvWrBxW3c3v8pTF HYfzbGtLJynavG9SpPrXEFKakmD92uVk lFhOxFVAbiCq0JS8K6p3 -------------------------------- Server restriction: dle-faq.ru Server restriction: www.dle-faq.ru ------ LICENSE FILE DATA ------- VU009X5YSAjbcTro6oQIH1pF0S0tHxw6 X3utgKa7k/J1knblsjqyrOfrKZkgtoH/ zjlbst4p/kmDl5KZkd2dnt5KCGOclpIJ f15Iv1BnJzXfiaZG1x35jbi5OyKhVog3 jd7sUxVMvMgUO2gUyN1fsV9o0h27MrO3 UanDBpzJbgVvUjZys0NIDuOtCgzaFIKA 3HWMRbEgADHgY0K1T7ns1t0vCFW7aDKF 5DuZpCjs2D5tIyIrfctUB1i5WiSouPDg vl2Qsrzc0NrTJ+ebSEUrnhyDjWMy7rQA Pn3LGNCiOmMRuIOLBp+NmN7hL2k/JSzd JpeoQ5gzGRR8zt7F5ZIdIcZuTfZ8+/zD dI6KQJJeu0HsU7Ra3AXJU0EkiXg8vjtd Tq6ebBesu4jGLfslfVw01bJRQz1+/OtW EmutMaoSt+S6Goja5MvWrBxW3c3v8pTF HYfzbGtLJynavG9SpPrXEFKakmD92uVk lFhOxFVAbiCq0JS8K6p3 --------------------------------
наверх