здравствуйте. как сделать заливку фона градиентом, закруглённые края и скособоченные аватары, чтобы всё это было видно во всех браузерах? дизайн делала в мо...

понедельник, 13 сентября 2010

15:58

все записи пользователя в сообществе heavenly junkie

верните бритни под опеку отца

здравствуйте.
как сделать заливку фона градиентом, закруглённые края и скособоченные аватары, чтобы всё это было видно во всех браузерах?

проблема подробнеедизайн делала в мозилле, там вся красота видна, а в остальных браузерах (смотрела также через оперу, хром и ие) не видно фона записей и меню. подозреваю, что дело в том, что свойства прописывались как раз таки для мозиллы.
собственно как оно выглядело и как должно быть в идеале: i9.fastpic.ru/big/2010/0913/ca/d52a287a62536e61...
пример кода:

 #page-c{width:670px !important;padding:0 !important;padding:0 !important; background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0.5)); -moz-border-radius: 3%;}

в сообществе нашла только как сделать полупрозрачный фон, но ничего про градиент, и очень интересует, можно ли его как-нибудь сотворить, но чтобы везде было видно?

полный код дизайна (как было):

  body {background: url('/userdir/1/5/2/4/152416/60071504.jpg'); background-attachment: fixed;}
 #wrapper{min-width:850px !important; width:850px; margin: 0 auto !important;padding:0 !important;overflow:hidden !important;}
 #side{width:170px !important; margin:0 !important; padding:0 !important; background: -moz-linear-gradient(top, rgba(0,0,0,0.35), rgba(0,0,0,0.1)); -moz-border-radius: 8% !important; color: #ffffff; text-shadow: 0px 1px 0px #333333;}
 #page-c{width:670px !important;padding:0 !important;padding:0 !important; background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0.5)); -moz-border-radius: 3%;}
 #page-t {margin:0 !important}
 #authorName {font-size: 18px !important; font-family: georgia; font-weight: bold; font-style: italic; color: #ffffff !important; text-shadow: 0px 1px 0px #000000;}
 #side h1 a {font-size: 18px !important; font-family: georgia; font-style: italic; color: #ffffff !important; text-shadow: 0px 1px 0px #000000;}
 .menuSection{text-transform: lowercase; text-align:center;}
 .paragraph {line-height:1.1;}
 .postTitle {font-family: courier new; text-transform: uppercase; text-shadow: 0 0 2px #000000;}
 .postDate {text-transform:lowercase; padding: 10px; color: #685446 !important; font-family: georgia, serif; font-size: 18px !important; text-align:center; font-style:italic !important; font-weight: normal !important;}
 a:link {color: #799539 !important; text-decoration: none !important; }
 a:hover {color: #C2D343 !important; font-style:italic; text-shadow: 0 0 2px #53614c;}
 a:active {color: #799539; text-decoration: none !important;}
 a:visited {color: #799539; text-decoration: none !important;}
 .atMusic, .atMood, .atTag {font-weight: bold; font-stule: normal !important; font-size: 9px !important;}
 #commentsArea_title, #addCommentArea_title, #new_post_title {font-family: courier new; text-transform: uppercase; text-shadow: 0 0 2px #000000;}
 #allDiaryLink , #postsCalendar, #upInChart, #favListLink, #pchListLink, #diarySpiritLink, #diarySupportLink, #paySupportLink, #faqLink, #YaSearch, #rssLink, #photolibLink, #communityCatalogueLink, #myCommunitiesLink, #randomDiaryLink, #sortOrder {display: none}
 .blockquote {padding:15px 15px 15px 25px; background: rgba(255,255,255,0.5) url('/userdir/1/5/2/4/152416/60072224.png') no-repeat; -moz-border-radius:2%;}
 .avatar, .avatarNew {padding: 5px;}
 .avatar img {-moz-transform: rotate(3deg); width: 75px !important; height:auto; opacity: 0.85; -moz-opacity: 0.85; !important; border: 5px solid #222222; background: transparent url('/userdir/1/5/2/4/152416/60077696.gif') top left repeat scroll; padding:5px;}
 .avatar img:hover {-moz-transform: rotate(3deg); width: 75px !important; height:auto; opacity: 1.0; -moz-opacity: 1.0; !important; border: 5px solid #799539; background: transparent url('/userdir/1/5/2/4/152416/60077696.gif') top left repeat scroll; padding:5px;}

насчёт аватаров и углов - дизайн сделан из найденного на жж и автор предупреждал, что кроме мозиллы нигде работать как надо не будет, так что вопрос один: для других браузеров это невозможно в принципе или как? (закруглённые углы из картинки не интересуют)

@темы: diaryCSS, Дизайн

URL

Солнце плавит глаза... ветер мучает мои голубые огни... &... http://www.bossmonster.com/games/antcity.html Почему мы не можем найти покоя в ложной божественности др...

Избегайте тех, кто старается подорвать вашу веру в себя. Ветер маски срывает с зеркал наших лиц И обида вскрывае... Ехали с дачи. Зашли в пять звезд. Прыщавый менеджер сказа...

Комментарии

13.09.2010 в 16:06

Aloria

Не сахар

Пропишите перед свойствами не только префикс -moz, но и префиксы -webkit и -o, а также вообще без префиксов.
Например: #page-c{width:670px !important;padding:0 !important;padding:0 !important; background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0.5)); -moz-border-radius: 3%; -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0.5)); -o-border-radius: 3%; -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0.5)); -webkit-border-radius: 3%; linear-gradient(top, rgba(255,255,255,0.8), rgba(255,255,255,0.5)); border-radius: 3%;}

transform описывайте точно так же, должно сработать: www.spravkaweb.ru/css/reference/mozilla_extensi...

URL

13.09.2010 в 16:51

heavenly junkie

верните бритни под опеку отца

Aloria не помогло, к сожалению((

URL

13.09.2010 в 17:06

winterwolf

Ходят слухи, что он, танцуя по небу разит мечом словно ветер, что даже во тьме звёздный свет отражается от его меча солнечным днём

URL

13.09.2010 в 17:09

Aloria

Не сахар

.kami, если вы все сделали, как написано выше, но не отображается - значит, и не будет.
CSS3 далеко не все браузеры поддерживают, а если и поддерживают, то зачастую в них все тормозит. Остается только ждать обновления браузеров.

URL

13.09.2010 в 17:20

winterwolf

Закругленные углы только в ие не работают, а градиент немного сложнее будет, можно примеры тут посмотреть - handynotes.ru/2010/02/css3-gradient.html

URL

13.09.2010 в 17:45

heavenly junkie

верните бритни под опеку отца

Aloria это печально

winterwolf всё равно никак((
значит, не судьба...

URL


Запомнить

@CSS — стилизация дневников