CSS-код для такой формы кто-нибудь делал?

[borus]

сверху закругления на градиентном фоне, а низ - белое прямоугольное поле с рамкой и вокруг всей формы тень:

поделитесь опытом

Edited October 25, 2011 by borus

[ShumNo]

Так border-radius:3px; не?

[borus]

Так border-radius:3px; не?

это лишь малая часть, как я понимаю. Надо еще сопрячь градиент с рамкой

[Nekromancer]

Ну вот если вы понимаете что нужно, видите это, так и оформите точно такой же вопрос гуглу, а не нам.

> CSS закругление углов

> CSS тень

> CSS градиент

> CSS3 документация

[Cubka]

Так тебе нужен полностью код такой формы? я не понял твою проблему.

[Seemann]

С помощью CSS3 делается за минут 10

Даже теньку можно отбросить от блока!

Edited October 25, 2011 by Seemann

[borus]

Так тебе нужен полностью код такой формы? я не понял твою проблему.

Да.

Вот что у меня получилось. Может посоветуете оптимизацию какую:

<div class="news"> <!--блок новостей-->
  <div class="sidebartopcorners">
     <div class="sidebarheader">
         <p>Новости</p>
     </div>
  </div>
  <div class="sidebarbody">
       	<p> новость1</p><p> новость2</p><p> новость3</p>
  </div>
</div>

CSS:
.news{
	margin:5px 0 7px 0;
	float:right;
	width: 252px;
	background: #fff;
	box-shadow: 0 3px 5px 0px #444;	
	-webkit-box-shadow: 0 3px 5px 0px #444;
	-moz-box-shadow: 0 3px 5px 0px #444;		
}

sidebartopcorners{
	width:100%;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border--radius: 5px 5px 0 0;
}

.sidebarheader{
	width:100%;
	height:25px;
	text-align:center;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feedb5', endColorstr='#f1d574',GradientType=0 ); /* IE6-9 */
	background: -webkit-gradient(linear, left top, left bottom, from(#f1d574), to(#feedb5)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #f1d574,  #feedb5); /* for firefox 3.6+ */
}

.sidebarbody{
	width:238px;
	border-left: #f1d574 2px solid;
	border-right: #f1d574 2px solid;
	border-bottom:#f1d574 2px solid;
	padding: 5px;
}

[zSpx]

А что тут оптимизировать? Хотя -webkit-border-radius убрать вообще можно, вебкиты нативно все это давно поддерживают. Ну и вместо этого:

        border-left: #f1d574 2px solid;
        border-right: #f1d574 2px solid;
        border-bottom:#f1d574 2px solid;

записать

        border: #f1d574 2px solid;
        border-top: none;

И вместо

 новость1
 новость2
 новость3

лучше div'ы использовать, а то вдруг завтра понадобиться туда заголовок какой вставить?

<div class="sidebarheader">
         <p>Новости</p>
     </div>

Новости ту же заголовок? Заголовком имхо и нужно оформлять.

Edited October 26, 2011 by zSpx

[Nekromancer]

вебкиты нативно все это давно поддерживают

А чё, через префикс не нативно что ле?

[borus]

Новости ту же заголовок? Заголовком имхо и нужно оформлять.

Благодарю. Да "Новости" - это заголовок sidebar'a. То есть, его надо было в теге h?

Edited October 26, 2011 by borus

[ceil100]

вебкиты нативно все это давно поддерживают

А чё, через префикс не нативно что ле?

через префикс не валидно

[zSpx]

А чё, через префикс не нативно что ле?

Выразился не корректно. В любом случае - это лишний код.

Edited October 26, 2011 by zSpx

[Nekromancer]

вебкиты нативно все это давно поддерживают

А чё, через префикс не нативно что ле?

через префикс не валидно

Ага, и не кошерно.

[borus]

Что-то я видимо не учёл. У меня текст, несмотря на padding подходит впритык к правому краю и верхние углы заголовка не скругляются не смотря на border-radius:

Подскажите, где я недопонял:

<div class="sidebar"> <!--блок опроса-->
    <div class="sidebartopcorners">
         <div class="sidebarheader">
              <h4>Опрос</h4>
         </div>
    </div>
    <div class="sidebarbody">
      <p class="center">Какой товар Вам больше нравится?</p>
      <ul> 
          <li>товар1</li>
          <li>товар2</li>
          <li>товар3</li>
      </ul>
    </div>
</div>
...............................................................................
.sidebar{
	margin:5px 0 7px 0;
	float:right;
	width: 265px;
	background: #fff;
	box-shadow: 0 1px 5px 0px #444;/* Каноническое задание */	
	-webkit-box-shadow: 0 1px 5px 0px #444; /* Safari, Chrome */
	-moz-box-shadow: 0 1px 5px 0px #444;		
}

sidebartopcorners{
	width:100%;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border--radius: 5px 5px 0 0;
}

.sidebarheader{
	width:100%;
	height:25px;
	text-align:center;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf5da', endColorstr='#f1d574',GradientType=0 ); /* IE6-9 */
	background: -webkit-gradient(linear, left top, left bottom, from(#fdf5da), to(#feedb5)); /* for webkit browsers */
	background: -webkit-linear-gradient(top, #fdf5da, #f1d574);
	background: -moz-linear-gradient(top,  #f1d574,  #fdf5da); /* for firefox 3.6+ */
	background: -o-linear-gradient(top, #fdf5da, #f1d574); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fdf5da, #f1d574); /* IE10 */
	background: linear-gradient(top, #fdf5da, #f1d574);	/* CSS3 */ 
}

.sidebarbody{
	width:251px;
	border: #f1d574 2px solid; border-top: none;
	padding: 5px;
	overflow:hidden;
}
.sidebarbody ul{
	text-align:center;
}
.sidebarbody ul li{
	text-align:center;
	list-style: none;
	}

Edited October 27, 2011 by borus

[ceil100]

.sidebarheader углы скругляй

а не .sidebartopcorners

у тебя класс без точки указан _sidebartopcorners

работать не будет

и вообще не вижу смысла в лишнем диве

все и без него работает

Edited October 27, 2011 by ceil100

[borus]

.sidebarheader углы скругляй

а не .sidebartopcorners

у тебя класс без точки указан _sidebartopcorners

работать не будет

и вообще не вижу смысла в лишнем диве

все и без него работает

Сделал я по твоему совету. Вот результат в Firefox:

А в IE скругления так и не появились.

Что ж делать то?

[ceil100]

в ie младше 9 и не появится,6-8ie не поддерживают border-radius

используй PIE.htc

кстати откуда белые уголки взялись?

у тебя есть еще один контейнер с фоном?

[borus]

в ie младше 9 и не появится,6-8ie не поддерживают border-radius

используй PIE.htc

Заработало в IE9 и других как только радиусы перенёс выше, в div "sidebar" и добавил overflow:hidden там же, дабы градиент не вылазил за скругления .sidebartopcorners вообще удалил.

Edited October 27, 2011 by borus

[ceil100]

если не убрал .sidebartopcorners то и ему углы скругляй, а то не красиво

выложи последнюю версию кода, а то мы похоже о разном говорим уже