Смягчить цветовую границу, возможно, градиентом - PullRequest
Новая
       2

Смягчить цветовую границу, возможно, градиентом

2 голосов
/ 07 мая 2010

У меня есть узкий заголовок в корпоративном цвете, ярко-красный, с содержимым ниже на не совсем белом фоне. Я пытался смягчить длинную линию, где эти цвета встречаются, используя div типа границы с промежуточным фоном, но я думаю, что мне нужен оригинальный градиентный переход «площадь». Я хочу уменьшить контраст между красным и белым, используя красно-белый градиент, но не «линейный», а «изогнутый».

Изображения в пути:

Я мог бы скопировать с их веб-сайта заголовок gif шириной 1024 пикселя и слишком узкий (по вертикали) и разделить его на восемь изображений границ, но это кажется неуклюжим, и я ищу что-то, что можно применить где угодно без необходимости изображения. Я могу делать круглые границы в плоскости x-y, но мне любопытно, как я могу применить градиент к любому выбранному цветовому переходу.

Дополнительные div, которые я использую в качестве пограничных элементов над и под '# top-section', возникли, когда я занимался созданием множества div для одного ограниченного элемента. Это казалось окончательным в манипулировании границами, без кода, но очень утомительно, чтобы специфицировать в CSS и выложить новую границу для каждого граничного элемента.

HTML: 

<div id="topsection">
    <div style="float: right; width: 300px; padding-right: 5px;">
        <div style="font-size: small; text-align: right;">
            Provantage Media Management System</div>
        <div style="font-size: x-small; text-align: right;">
            <asp:LoginStatus ID="loginStatus" runat="server" 
            LoginText="Log in" LogoutText="Log out" />
        </div>
    </div>
    <span style="padding-left: 15px;">Main Menu</span><span id="content-title">
        <asp:ContentPlaceHolder ID="titlePlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
    </span>
    <div style="background-color: white; height: 2px;">
</div>
<div style="background-color: white; height: 3px;"></div>

И CSS: 

#topsection
{
    background-color: #EB2728;
    color: white;
    height: 35px;
    font-size: large;
    font-weight: bold;
}

И пример резкой границы (изображение не отображается, доступно в http://thehashtable.com/?attachment_id=58):

альтернативный текст http://thehashtable.com/?attachment_id=58

1 Ответ

1 голос
/ 12 мая 2010

Без использования изображений ваши возможности для создания градиентов очень ограничены - вы еще не можете «программно размыть границу между красным и белым с градиентом, без использования изображений» любым надежным способом, который будет работать в наборе браузеры, которые вам, вероятно, нужны.

CSS-3 предоставляет функции рисования градиента, но только самые последние браузеры поддерживают их в какой-либо степени, и я не верю, что какой-либо из них предоставит вам полный набор опций, которые задает CSS-3.

Для чуть более кросс-браузерного решения вы можете подделать градиент с помощью тени CSS, например: http://www.spookandpuff.com/examples/fakeGradientFill.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Fake gradient fill</title>
    <style type="text/css" media="screen">
      * {margin:0;padding:0;}
     body {margin:2em;padding:0;}
     #header,
     #content {
       background-color:#992916;
       color:#FFF;
       margin:0;
       padding:1em;
     }

     #content .liner {
       color:#222;
       padding:1em;
       background-color:#F4F4F4;
       box-shadow:0 0 1.5em #F4F4F4;
       -webkit-box-shadow:0 0 1.5em #F4F4F4;
       -moz-box-shadow:0 0 1.5em #F4F4F4;
     }
    </style>
</head>

<body>
  <div id="header">
    <h1>Header content</h1>
  </div>
  <div id="content">
    <div class="liner">
      <h2>Body content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</body>
</html>

Это оставляет вас во власти техники рисования теней в браузере (вы не видите плавного перехода в любом браузере, который я тестировал). Firefox 3+, Safari 4+, Chrome 1+ и некоторые новые версии Opera поддерживают этот эффект.

Другой вариант, опять же не очень хорошо поддерживаемый, заключается в использовании border-image: это позволяет вам указать одно изображение, которое браузер затем растягивает, повторяет и размещает в соответствии с указанными вами координатами. Firefox 3.1+, Safari 4+ и Chrome поддерживают это. Примеры изображений границ немного сложнее в настройке - вместо этого взгляните на: http://www.css3.info/preview/border-image/

Так что - к сожалению, это означает, что вам, вероятно, придется использовать изображения или изменить свой дизайн на что-то более легко достижимое. Я не видел ваш пример, но, по-моему, он не стоит хлопот!

Удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...