Пользовательский цветовой оверлей CSS

Я пытаюсь написать CSS для логотипа компании, который является довольно точным изображением jpg, который в настоящее время находится на сервере компании. это довольно простой, за исключением некоторых цветовых наложений на логотип.

Мой вопрос: это вообще возможно? если так, как я могу сделать это

пожалуйста, не bash, я полный нуб, моя первая строка HTML была около недели назад...

Вот моя разметка

<html>

<head>
    <meta charset="utf-8"/>
    <title>

    </title>
    <link rel="stylesheet" href="css/stylesheet.css"
</head>
<style contenteditable="">
#infinity {
position: absolute;
width: 212px;
height: 100px;
 -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
}

 #infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;    
border: 15px solid;
-moz-border-radius: 50px 50px 0 50px;
     border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
}
#infinity:before{
color: #ADB2B3;
}
#infinity:after {
left: auto;
right: 15;
color: #A99055;
-moz-border-radius: 50px 50px 50px 0;
     border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
        transform: rotate(45deg);
}                       
                                    </style>
<body>
<br>
<br>
<div>
<div>   
    <div style="float:left; margin-right: 0px;"id="infinity">
</div>

<div>
    <p style="float:left; margin-top:70px; margin-left:130px; font-size:60px;                 
         font-family: Avenir, sans-serif;">
    PORTFOLIO
    </p>
</div>

  </div>
  </body>
  </html>
Источник

3 ответа

Решение

Проверьте это: http://jsfiddle.net/tMEqk/1/

Это не совсем там, но это ближе

Я сделал относительно позиционированный контейнер, а затем вытащил каждую петлю оттуда, расположив все согласно коробке. Изменили границу, чтобы получить непрерывный эффект, а затем скрыли диагональную линию, сгенерированную золотой коробкой Вращения тоже нет, но если вы хотите изменить размер, нужно немного по математике. Сделал это в Chrome, еще не проверял другие браузеры.

Править Я не совсем одобряю это, но мне действительно нравилось пытаться воссоздать это. Это действительно должно быть изображение, и вы можете предотвратить его, сохранив и сославшись на него как на локальный файл.

Источник

Просто так я прям. Вы пытаетесь создать весь логотип с помощью CSS? Это правильно? Если так, то почему CSS против использования JPEG? Если вы используете простой CSS, вы будете ограничены тем, что вы можете сделать, также большинство из них будут CSS3 и взломы браузера, что создает пару проблем.

Первый из них, CSS3 поддерживается только в современных браузерах. Во-вторых, взлом браузеров не проходит проверку W3 CSS.

Источник

На самом деле это не ответ, но я настоятельно рекомендую сделать из этого логотипа масштабируемое векторное изображение, используя Inkscape или подобные программы. Этот логотип будет очень легко конвертировать в SVG (масштабируемая векторная графика). Но, как сказал Крис, использование CSS для выполнения всего этого может не работать должным образом во многих ситуациях.

Источник
Другие вопросы по тегам