Полупрозрачность кнопок

@vudd2007 · Регистрация: 19.02.2013

Студворк — интернет-сервис помощи студентам

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

А теперь вопрос, могу ли я сделать с помощью css данный массив(независимо) и кнопки(отдельно) прозрачными, не имеющими цвета(как значек опера на панели задач имеет эффект лака, чтоли) как бы отблесками с помощью html+css, или нужно учить новые языки программирования, такие как Java+Jquery и т.д.?

В общем тут я смог добится эффекта только прозрачности теней на блоке div, без бордюра, и полупрозрачности независимо кнопок(я их пока не настраивал)...
А я же хочу, чтобы они не имели цвета вообще, а были абсолютно безветными, но имели четкий полупрозрачный каркас из блока + кнопки.
Ну в общем эффект как на значках в нижней левой части экрана.

Спасибо.

Добавлено через 26 минут
А да, и возможно ли применять градиент к рамке.
Если да, то как?

Добавлено через 9 часов 53 минуты
Ребята, ап хелп!

@Lovrentiy · 20.02.2013, 15:40

если честно - 2 раза перечитал, но так и не понял какого эффекта хочешь добиться... Ты можешь использовать вместо текста или фонового цвета - картинку, опять же gif и png форматы позволят сделать не целиковую картинку а "обрезанную". Не знаю как объяснить

@maximus2011 · 20.02.2013, 16:07

http://www.cssbuttongenerator.com/

@vudd2007 · 21.02.2013, 01:39 **[ТС]**

мне нужен такой эффект прозрачности кнопок

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

а мне нужны прозрачные
блок div

можно ли такое сделать с помощью css?
если да, то как?
если нет, то с помощью чего можно достигнуть такого эффекта?

@vudd2007 · 21.02.2013, 17:28 **[ТС]**

ну что ребята черт бы его побрал, это реально или нет?

@sheila · 21.02.2013, 19:32

Реально с двумя дивами. Внешнему диву задать белый бордер (или лучше тень), выставить прозрачность, если нужно. Второму (внутри первого) задать белый (или градиентный от белого к прозрачному, там интереснее) фон, выставить нужную прозрачность. Тогда будет так, как на кнопочках внизу.

@vudd2007 · 21.02.2013, 19:38 **[ТС]**

а кода нет?
я щас сам попробую, но вдруг не получится...

@sheila · 21.02.2013, 20:14

если не получиться, вернусь через 30 минут, напишу

Добавлено через 18 минут
можно и одним дивом обойтись
Посмотреть демо

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="fon">
   <div class="border">
  </div>
    </div>
  
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.fon {
  background:#8b98fb;
  padding:1em;
}
 
.border {
  width:100px;
  height:100px;
   -webkit-box-shadow:0 0 4px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.2) inset;
-moz-box-shadow:0 0 4px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.2) inset;
box-shadow:0 0 4px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.2) inset;
  margin:0 auto;
  
}

@vudd2007 · 21.02.2013, 20:48 **[ТС]**

спасибо
это вам Celin Dion I'm Falling Into You

@sheila · 23.02.2013, 01:36

все таки это не тот эффект, как на прикрепленном изображении.
Вот это больше похоже.
ДЕМО

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="fon">
   <div class="border">
  </div>
    </div>
  
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.fon {
  background:#8b98fb;
  padding:1em;
}
 
.border {
  width:100px;
  height:100px;
  background:rgba(255, 255, 255, 0.2);
  -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.4), 0 0 4px rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.4), 0 0 4px rgba(255, 255, 255, 0.5) inset;
  box-shadow:0 0 3px rgba(0, 0, 0, 0.4), 0 0 4px rgba(255, 255, 255, 0.5) inset;
   margin:0 auto;
}

@vudd2007 · 23.02.2013, 01:46 **[ТС]**

да, неплохо

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

@sheila · 23.02.2013, 01:58

лучше залить код сюда и на форум, а на скриншоте дать картинку, которая требуется, пока непонятно

@vudd2007 · 23.02.2013, 02:14 **[ТС]**

попробую разобратся...единственным выходом вижу разбить box на три дива, взаимодополняющими друг друга по обьему, и сделать вывернутую тень в квадратике на перехрестке, а в тех как обычно, но мы теряем прозрачность....а или не теряем, знаю можно цвет задавать отдельным границам(в блоке), а тени я хз...

@sheila · 23.02.2013, 02:27

тени тоже можно задавать отдельным границам в блоке

@vudd2007 · 23.02.2013, 02:56 **[ТС]**

ну вы просто золотце

Комментарий модератора

Один вопрос - одна тема

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита табличной части. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@vudd2007 0 / 0 / 1 Регистрация: 19.02.2013 Сообщений: 28

	Полупрозрачность кнопок 20.02.2013, 14:31. Показов 1582. Ответов 14 Метки нет (Все метки) Здравствуйте уважаемые, хочу спросить у вас совета... Есть массив, верхний блок который готовится под кнопки среднего размера. Вот изображение: А теперь вопрос, могу ли я сделать с помощью css данный массив(независимо) и кнопки(отдельно) прозрачными, не имеющими цвета(как значек опера на панели задач имеет эффект лака, чтоли) как бы отблесками с помощью html+css, или нужно учить новые языки программирования, такие как Java+Jquery и т.д.? В общем тут я смог добится эффекта только прозрачности теней на блоке div, без бордюра, и полупрозрачности независимо кнопок(я их пока не настраивал)... А я же хочу, чтобы они не имели цвета вообще, а были абсолютно безветными, но имели четкий полупрозрачный каркас из блока + кнопки. Ну в общем эффект как на значках в нижней левой части экрана. Спасибо. Добавлено через 26 минут А да, и возможно ли применять градиент к рамке. Если да, то как? Добавлено через 9 часов 53 минуты Ребята, ап хелп! 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	20.02.2013, 15:40
	если честно - 2 раза перечитал, но так и не понял какого эффекта хочешь добиться... Ты можешь использовать вместо текста или фонового цвета - картинку, опять же gif и png форматы позволят сделать не целиковую картинку а "обрезанную". Не знаю как объяснить 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	20.02.2013, 16:07
	http://www.cssbuttongenerator.com/ 1

@vudd2007 0 / 0 / 1 Регистрация: 19.02.2013 Сообщений: 28
	21.02.2013, 01:39 [ТС]
	мне нужен такой эффект прозрачности кнопок и желательно такой же эффет блока, в котором они будут находится. На рисунке они голубые а мне нужны прозрачные блок div можно ли такое сделать с помощью css? если да, то как? если нет, то с помощью чего можно достигнуть такого эффекта? 0

@vudd2007 0 / 0 / 1 Регистрация: 19.02.2013 Сообщений: 28
	21.02.2013, 17:28 [ТС]
	ну что ребята черт бы его побрал, это реально или нет? 0

@sheila 47 / 47 / 6 Регистрация: 10.05.2012 Сообщений: 236
	21.02.2013, 19:32
	Реально с двумя дивами. Внешнему диву задать белый бордер (или лучше тень), выставить прозрачность, если нужно. Второму (внутри первого) задать белый (или градиентный от белого к прозрачному, там интереснее) фон, выставить нужную прозрачность. Тогда будет так, как на кнопочках внизу. 0

@vudd2007 0 / 0 / 1 Регистрация: 19.02.2013 Сообщений: 28
	21.02.2013, 19:38 [ТС]
	а кода нет? я щас сам попробую, но вдруг не получится... 0

@vudd2007 0 / 0 / 1 Регистрация: 19.02.2013 Сообщений: 28
	21.02.2013, 20:48 [ТС]
	спасибо это вам Celin Dion I'm Falling Into You 0

@vudd2007 0 / 0 / 1 Регистрация: 19.02.2013 Сообщений: 28
	23.02.2013, 01:46 [ТС]
	да, неплохо жаль только в ксс нет такого эффекта чтобы оно как бы блестело, как текстуры воды, как капли воды в виде кнопок, но это очень приближенно...спасибо за старания, а в блоках вы разбиратесь? в блочной верстке, нужно чтоб один блок вытеснил другой, а тот в свою очередь поменял форму в зависимости от угла первого подробнее в позиционирование css 0

@sheila 47 / 47 / 6 Регистрация: 10.05.2012 Сообщений: 236
	23.02.2013, 01:58
	лучше залить код сюда и на форум, а на скриншоте дать картинку, которая требуется, пока непонятно 0

@vudd2007 0 / 0 / 1 Регистрация: 19.02.2013 Сообщений: 28
	23.02.2013, 02:14 [ТС]
	попробую разобратся...единственным выходом вижу разбить box на три дива, взаимодополняющими друг друга по обьему, и сделать вывернутую тень в квадратике на перехрестке, а в тех как обычно, но мы теряем прозрачность....а или не теряем, знаю можно цвет задавать отдельным границам(в блоке), а тени я хз... 0

@sheila 47 / 47 / 6 Регистрация: 10.05.2012 Сообщений: 236
	23.02.2013, 02:27
	тени тоже можно задавать отдельным границам в блоке 1