• Страница 1 из 1
  • 1
Форум » Форум веб мастеров » html & css » Нужна помощь (Разделить градиент)
Нужна помощь

дава
Пользователи
Сообщений 20
+
+10
-
Ваши награды 0
Вот у меня еше есть 1 вопрос касательного фонового изображения. Вот мне что нужно сделать Видите есть градиент с лева в центре и с права у меня теперь такой вопрос. Есть следующее
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Линейный градиент</title>
<style type="text/css">
#gradient{
background: #086CA2;
background: -moz-linear-gradient(top, #61B4CF, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffffff));
background: -webkit-linear-gradient(top, #61B4CF, #ffffff);
background: -o-linear-gradient(top, #61B4CF, #ffffff);
background: -ms-linear-gradient(top, #61B4CF, #ffffff);
width: 250px;
height: 250px;
border: 1px solid #333;
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>

Там градиент обозначен размерами, и выводит только по одному размеру. Хочу сделать все как на той кринке, координаты на цвета я уже выставил а остальное не как получается, весь интернет прорыл так не чего и не нашел, Будьте бодры помочь мне, спасибо smile

Добавлено (05.10.2014, 12:27)
---------------------------------------------
и как их расставить по отделенности??

Добавлено (08.10.2014, 10:23)
---------------------------------------------
Блин я заплачу

«Пред. тема След. тема»

Вовчик
Администратор
Сообщений 8683
+
+2371
-
Ваши награды 316
дава, я вопроса например не понял...
подпись: Если я помог тебе, помоги и ты мне Мой WMR --> R250600748056
p.s. это лучшее выражение благодарности))
Вовчик

дава
Пользователи
Сообщений 20
+
+10
-
Ваши награды 0
вот смотри градиенты html.
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Линейный градиент</title>

<link rel="stylesheet" type="text/css" href="gr.css">
</head>
<body>
<div id="gradient"></div>
<div id="gradient2"></div>
</body>
</html>
и вот ксс
Код
#gradient,#gradient2{
background: #086CA2;
background: -moz-linear-gradient(top, #61B4CF, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffffff));
background: -webkit-linear-gradient(top, #61B4CF, #ffffff);
background: -o-linear-gradient(top, #61B4CF, #ffffff);
background: -ms-linear-gradient(top, #61B4CF, #ffffff);
}
#gradient{
width: 50px;
height: 250px;

}

#gradient2{
width:  80px;
height: 100px;

}
и вот как теперь их расставить как на картинке с лева в центре и с права под такими же размерами

Добавлено (08.10.2014, 15:10)
---------------------------------------------

Код
#gradient,#gradient2{  
background: #086CA2;  
background: -moz-linear-gradient(top, #61B4CF, #ffffff);  
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffffff));  
background: -webkit-linear-gradient(top, #61B4CF, #ffffff);  
background: -o-linear-gradient(top, #61B4CF, #ffffff);  
background: -ms-linear-gradient(top, #61B4CF, #ffffff);  
}  
#gradient{  
}
width: 50px;  
height: 250px;  

}  

#gradient2{  
width:  80px;  
height: 100px;  

}  

#gradient3{  
width:  80px;  
height: 100px;  

}

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>Линейный градиент</title>  

<link rel="stylesheet" type="text/css" href="gr.css">  
</head>  
<body>  
<div id="gradient"></div>  
<div id="gradient2"></div>  
<div id="gradient3"></div>  
</body>  
</html>

Вовчик
Администратор
Сообщений 8683
+
+2371
-
Ваши награды 316
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>   
  <head>   
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  <title>Линейный градиент</title>   

  <link rel="stylesheet" type="text/css" href="gr.css">   
  </head>   
  <body>   
  <div class="body">
  <div id="gradient">левый блок</div>   
  <div id="gradient2">центральный блок</div>   
  <div id="gradient3">правый блок</div>   
  </div>   
</body>   
  </html>

<style>
body {margin:0; padding:0; text-align: center;}
.body { background:#fff; height:auto; margin:0 auto; width:1000px;}

#gradient{
  width: 200px;
  height: 150px;
  float: left;
  margin-right:10px;
  }

  #gradient2{
  width:  500px;
  height: 400px;
  float: left;
  }

  #gradient3{
  width:  200px;
  height: 150px;
  float: left;
  margin-left:10px;
  }

#gradient,#gradient2, #gradient3{   
  background: #086CA2;   
  background: -moz-linear-gradient(top, #61B4CF, #ffffff);   
  background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffffff));   
  background: -webkit-linear-gradient(top, #61B4CF, #ffffff);   
  background: -o-linear-gradient(top, #61B4CF, #ffffff);   
  background: -ms-linear-gradient(top, #61B4CF, #ffffff);   
  }   
</style>
подпись: Если я помог тебе, помоги и ты мне Мой WMR --> R250600748056
p.s. это лучшее выражение благодарности))
Вовчик

Вовчик
Администратор
Сообщений 8683
+
+2371
-
Ваши награды 316
могу тупо сверстать картинку))
подпись: Если я помог тебе, помоги и ты мне Мой WMR --> R250600748056
p.s. это лучшее выражение благодарности))
Вовчик

дава
Пользователи
Сообщений 20
+
+10
-
Ваши награды 0
Вовчик ты меня спас ) ты молодец шариш, будут еше вопросы буду обращаться сюда smile

Вовчик
Администратор
Сообщений 8683
+
+2371
-
Ваши награды 316
дава, не за что, можешь просто

Цитата дава
Блин я заплачу


копеечку кинуть на мой счет, если не жалко))

тема закрыта!
подпись: Если я помог тебе, помоги и ты мне Мой WMR --> R250600748056
p.s. это лучшее выражение благодарности))
Вовчик
Форум » Форум веб мастеров » html & css » Нужна помощь (Разделить градиент)
  • Страница 1 из 1
  • 1
Поиск:
Друзья сайта:
Связаться с администратором для дружбы! В Вовчик
Nk-CS.Ru - Лучшие шаблоны для uCoz n na3uTuB4uk94
Web-мастер системы uCoz R Roman_Domnin
Связаться с администратором для дружбы! В Вовчик
Связаться с администратором для дружбы! В Вовчик
Топ пользователей: