Есть лого, как его сделать средствами html и css?

Тема в разделе "Веб-дизайн", создана пользователем Cribble, 26 окт 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Cribble

    Cribble Постоялец

    Регистр.:
    25 июл 2006
    Сообщения:
    104
    Симпатии:
    40
    Собственно сабж. Нужно сделать без картинок.
    logo_mini_obrez.gif Как реализовать?
     
  2. JC

    JC Бог пикселей

    Регистр.:
    4 янв 2008
    Сообщения:
    303
    Симпатии:
    401
    Вот пример реализации, цвета и размеры подставишь свои.

    HTML:
    CSS-code:
    -----------------
    div#logo {
      font-weight: bold;
      font-size: 20px;
      width: 130px;
    }
    span.grey{font-color:#999; background-color:grey;}
    span.red{font-color:#fff; background-color:red;}
    span.under{display:block;text-align:right; font-size:10px;}
    
    HTML-code:
    -----------------
    <div id="logo">
    <span class="grey">МИР</span><span class="red">МЕДИА</span>
    <span class="under">холдинг</span>
    </div>
     
  3. RolCom

    RolCom

    Регистр.:
    12 мар 2008
    Сообщения:
    351
    Симпатии:
    108
    Вот вариант. В дримвивере можешь править шрифт, положение, размеры, пропорции.
    Код:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {background:#aaa}
    .logo {
       position:relative; 
       background:#fff;
       width: 131px;
       height: 43px;
     }
    .logo * {
    	position:absolute;
    	font-weight:bold;
    	font-family:Arial, sans-serif;
    	height: 3px;
    }
    .logo .gray {left:2px; top:2px;  width:49px; height:30px; background:#999; }
    .logo .gray .mir {
    	left:4px;
    	top:4px;
    	color:#333;
    	font-size: 19px;
    }
    .logo .red {left:51px; top:2px;  width:78px; height:30px; background:#f00}
    .logo .red .meida {
    	left: 4px;
    	top: 4px;
    	color:#fff;
    	font-size: 19px;
    } 
    .logo .hold {
    	left:84px;
    	top:30px;
    	color:#333;
    	font-size: 11px;
    }
    
    
    </style>
    </head>
    
    <body>
    <div class="logo">
      <div class="gray">
          <div class="mir">МИР</div>
      </div>
      <div class="red">
           <div class="meida">МЕДИА</div>   
      </div>
      <div class="hold">холдинг</div>
    </div>
    
    </body>
    </html>
    
     
  4. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    66
    HTML:
    <html>
      <head>
        <style type="text/css">
          #mir, #media { height:35px; font:25px Impact; line-height:35px; text-align:center; float:left; }
          #mir   { width:46px; background:#c0bfc4; }
          #media { width:74px; background:#d41122; color:#fff;}
          #hold  { width:120px; background:#fff; font:11px Impact; text-align:right; }
        </style>
        
      </head>
      <body>
        <div id="hold">
          <div id="mir">MIR</div>
          <div id="media">MEDIA</div>
          HOLDING
        </div>
      </body>
    </html>
    
     
    Cribble нравится это.
  5. JC

    JC Бог пикселей

    Регистр.:
    4 янв 2008
    Сообщения:
    303
    Симпатии:
    401
    Ребята тут дивы не нужны, ведь это не блочные елементы, а строковые. Значит нужен span.
     
  6. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    66
    Какая, в данном случае, разница юзать span или div? У тебя же самого из 4-х элементов 2 блочных :)
    Дело вкуса, что использовать. Я, например, считаю, что див-ами верстать удобнее, если что-то придется потом поменять/добавить - например размеры, паддинги, маргины и т.д.
     
  7. JC

    JC Бог пикселей

    Регистр.:
    4 янв 2008
    Сообщения:
    303
    Симпатии:
    401
    Спанами это тоже можно делать! Див определяет структуру, это семантичесский елемент. И вообще мы отошли от темы, прекращаем оффтоп.
     
  8. VLDM

    VLDM Постоялец

    Регистр.:
    15 июн 2006
    Сообщения:
    50
    Симпатии:
    6
    Только средствами HTML
    ********************

    <table width="120" border="0" cellpadding="1" cellspacing="0">
    <tr>
    <td bgcolor="#FFFFFF">
    <table width="100%" border="0">
    <tr>
    <td bgcolor="#CCCCCC" width="50%" height="50%" align="center"><font face="Arial, Helvetica, sans-serif" font size="4"><b>МИР</b></font></td>
    <td bgcolor="#CC0000" width="50%" height="50%" align="center"><font face="Arial, Helvetica, sans-serif" font size="4" color="#FFFFFF"><b>МЕДИА</b></font></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td bgcolor="#FFFFFF" align="right" valign="top"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><b>холдинг</b></font></td>
    </tr>
    </table>
     
Статус темы:
Закрыта.