Comments on: Web разработка. Границы в CSS3. http://www.simplecoding.org/granicy-v-css3.html Блог о программировании Mon, 06 Feb 2012 23:19:00 +0000 hourly 1 http://wordpress.org/?v= By: Владимир http://www.simplecoding.org/granicy-v-css3.html#comment-18516 Владимир Sat, 16 Oct 2010 09:11:00 +0000 http://www.simplecoding.org/granicy-v-css3.html#comment-18516 Красиво получилось. Используется и CSS и JavaScript. Работает примерно так. Основная картинка (со зданиями) установлена в качестве фона для body. В самом начале страницы идут два пустых div'а с жестко заданной высотой в пикселах. При нажатии на кнопку "Вверх" для второго div'а (#headBg) устанавливается правило display:none и он исчезает со страницы. При этом остальная часть страницы (таблица с основным содержимым) двигается вверх. Одновременно изменяется с помощью JS фоновая картинка для кнопки (т.е. кнопка Вверх превращается в кнопку Вниз). При нажатии на кнопку Вниз для #headBg устанавливается правило display:block и он появляется на странице, т.е. содержимое уходит вниз. Самый первый div используется чтобы оставить зазор от верхнего края страницы. Красиво получилось.

Используется и CSS и JavaScript.
Работает примерно так.
Основная картинка (со зданиями) установлена в качестве фона для body.
В самом начале страницы идут два пустых div'а с жестко заданной высотой в пикселах.

При нажатии на кнопку "Вверх" для второго div'а (#headBg) устанавливается правило display:none и он исчезает со страницы. При этом остальная часть страницы (таблица с основным содержимым) двигается вверх.

Одновременно изменяется с помощью JS фоновая картинка для кнопки (т.е. кнопка Вверх превращается в кнопку Вниз).

При нажатии на кнопку Вниз для #headBg устанавливается правило display:block и он появляется на странице, т.е. содержимое уходит вниз.

Самый первый div используется чтобы оставить зазор от верхнего края страницы.

]]> By: Siki http://www.simplecoding.org/granicy-v-css3.html#comment-18512 Siki Thu, 14 Oct 2010 21:15:00 +0000 http://www.simplecoding.org/granicy-v-css3.html#comment-18512 Владимир, а как сделать такой эффект у панели (шапки) - http://www.urealty.ru ? КСС? Владимир, а как сделать такой эффект у панели (шапки) – http://www.urealty.ru ? КСС?

]]> By: Betaboy http://www.simplecoding.org/granicy-v-css3.html#comment-11444 Betaboy Mon, 12 Jul 2010 00:56:00 +0000 http://www.simplecoding.org/granicy-v-css3.html#comment-11444 П.С. Какой же крутой этот disqus! П.С. Какой же крутой этот disqus!

]]> By: Betaboy http://www.simplecoding.org/granicy-v-css3.html#comment-11443 Betaboy Mon, 12 Jul 2010 00:55:07 +0000 http://www.simplecoding.org/granicy-v-css3.html#comment-11443 Ага )) Хотя webkit тоже не дураки, уверен их вариант чем-то обоснован.<br><br>На соседнем форуме ссылку подкинули про градиенты: <a href="http://www.westciv.com/tools/gradients/index.html" rel="nofollow">http://www.westciv.com/tools/gradients/index.html</a><br><br>Вроде интересный конструктор, попробую покрутить. Ага )) Хотя webkit тоже не дураки, уверен их вариант чем-то обоснован.

На соседнем форуме ссылку подкинули про градиенты: http://www.westciv.com/tools/gradients/index.html

Вроде интересный конструктор, попробую покрутить.

]]> By: Владимир http://www.simplecoding.org/granicy-v-css3.html#comment-11442 Владимир Mon, 12 Jul 2010 00:46:36 +0000 http://www.simplecoding.org/granicy-v-css3.html#comment-11442 Насчет размера контейнера вы правы. Придется динамически пересчитывать<br>(с помощью JS). Насчет размера контейнера вы правы. Придется динамически пересчитывать
(с помощью JS).

]]> By: Betaboy http://www.simplecoding.org/granicy-v-css3.html#comment-11441 Betaboy Mon, 12 Jul 2010 00:41:20 +0000 http://www.simplecoding.org/granicy-v-css3.html#comment-11441 Градиент всегда задается в градусах, в Шопе, Флеше, Иллюстраторе... Если даже вы задаете его точками в ручную, во всех панелях и программно он указан в градусах. В Шопе это свойства слоя...<br><br>По методу webkit -- невозможно чётко задать градус градиента, учитывая что размер контейнера всегда может изменится. Градиент всегда задается в градусах, в Шопе, Флеше, Иллюстраторе… Если даже вы задаете его точками в ручную, во всех панелях и программно он указан в градусах. В Шопе это свойства слоя…

По методу webkit — невозможно чётко задать градус градиента, учитывая что размер контейнера всегда может изменится.

]]> By: Владимир http://www.simplecoding.org/granicy-v-css3.html#comment-11439 Владимир Sun, 11 Jul 2010 22:19:29 +0000 http://www.simplecoding.org/granicy-v-css3.html#comment-11439 Это еще вопрос у кого правильно. Когда вы создаете градиент, например,<br>в Photoshop'е, то указываете начальную и конечную точку, а не угол.<br>Чтобы пересчитать градусы в координаты точек, нужно записать уравнение<br>прямой по которой строится градиент. Это еще вопрос у кого правильно. Когда вы создаете градиент, например,
в Photoshop'е, то указываете начальную и конечную точку, а не угол.
Чтобы пересчитать градусы в координаты точек, нужно записать уравнение
прямой по которой строится градиент.

]]> By: Betaboy http://www.simplecoding.org/granicy-v-css3.html#comment-11438 Betaboy Sun, 11 Jul 2010 21:32:42 +0000 http://www.simplecoding.org/granicy-v-css3.html#comment-11438 Не, не то )) Зря они так намудрили, с ФФ пример нужно брать. Произвольный градус не задать. Максимум что вышло похожего - это словами left bottom, right top, но это не то, это бред если чесно, для прямых градиентов если только...<br><br>Сервис видел, он и надоумел заморочиться. )) Не, не то )) Зря они так намудрили, с ФФ пример нужно брать. Произвольный градус не задать. Максимум что вышло похожего – это словами left bottom, right top, но это не то, это бред если чесно, для прямых градиентов если только…

Сервис видел, он и надоумел заморочиться. ))

]]> By: Владимир http://www.simplecoding.org/granicy-v-css3.html#comment-11437 Владимир Sun, 11 Jul 2010 20:37:14 +0000 http://www.simplecoding.org/granicy-v-css3.html#comment-11437 Попробуйте так:<br> background: -webkit-gradient(<br> linear,<br> left 100,<br> 150 10,<br> color-stop(0.34, rgb(134,102,237)),<br> color-stop(0.5, rgb(135,255,187)),<br> color-stop(0.84, rgb(255,160,255))<br> );<br><br>Вообще есть хороший сервис<br><a href="http://gradients.glrzad.com/" rel="nofollow">http://gradients.glrzad.com/</a> Попробуйте так:
background: -webkit-gradient(
linear,
left 100,
150 10,
color-stop(0.34, rgb(134,102,237)),
color-stop(0.5, rgb(135,255,187)),
color-stop(0.84, rgb(255,160,255))
);

Вообще есть хороший сервис
http://gradients.glrzad.com/

]]> By: Betaboy http://www.simplecoding.org/granicy-v-css3.html#comment-11436 Betaboy Sun, 11 Jul 2010 20:15:48 +0000 http://www.simplecoding.org/granicy-v-css3.html#comment-11436 Спасибо за ответ Владимир! Я это читал, но удивился что нет градусов, в ФФ то они есть! )) С числами сделать не получается... градиент не идет как в примере... Спасибо за ответ Владимир! Я это читал, но удивился что нет градусов, в ФФ то они есть! )) С числами сделать не получается… градиент не идет как в примере…

]]>