Свечение css v34 | Сообщество администраторов игровых серверов HLmod.ru
Banana
Участник
- #1
Здравствуйте, в ксс 34 такого свечения нет, подскажите если ли там подобное свечение?
ĦĄŇĢǾVξŘ
καταλημμα
Regedit написал(а):
подскажите если ли там подобное свечение?
Нажмите, чтобы раскрыть. ..
нету там подобного свечения.
₮αй₮оβый
Участник
- #3
а как его получить в css?
Monomizer
Держу JDW в бане.
- Команда форума
- #4
₮αй₮оβый написал(а):
а как его получить в css?
Нажмите, чтобы раскрыть. ..
models/effects/vol_light64x256.mdl
₮αй₮оβый
Участник
- #5
Monomizer написал(а):
models/effects/vol_light64x256.mdl
Нажмите, чтобы раскрыть…
Спасибо
HTML свойства тега textarea — студия Палыча
- org/ListItem»> Главная
- Вредные советы
Textarea — один из важных элементов полей для ввода, особенно для форм обратной связи при создании сайтов. Поэтому он рождает множество проблем для верстальщиков и программистов. Есть несколько особенных HTML свойств textarea. О них я и хочу поведать.
Размеры textarea
Начнем с первых и важных свойства textarea, а именно как задать размеры (высоту и ширину) текстового поля. Для этого есть два варианта. В первом варианте задаем cols (количество символов в строке) и rows (количество строк).
<textarea cols="30" rows="5"></textarea>
Или указывать размер в CSS свойствах:
textarea { width : 450px; height : 120px; }
В первом случае мы точно знаем, сколько символов поместится в форме, во втором случае будет проблема, так как иногда буквы будут обрезаны.
Замещающий текст в HTML5
Существует новый атрибут в качестве части формы HTML5, называется placeholder. Это свойство textarea показывает текст приглушенно серым цветом (также работает для полей Input), который исчезает при наведении фокуса на поле или при вводе хотя бы одного символа в поле.
<textarea placeholder="Замещающий текст" cols="30" rows="5"></textarea>
Работает только в современных браузерах. Есть решение для всех браузеров, оно, конечно, не будет таким красивым. Для работы необходим JS.
<textarea cols="20" onblur="if(this.value=='') this.value='поиск...';" onfocus="if(this.value=='поиск...') this.value='';">поиск...</textarea>
Обратите внимание, что значение должно быть одинаковым, иначе не будет работать.
Как убрать свечение у textarea?
Все webkit-браузеры, Firefox 3.6, все 10-е оперы навешивают голубую рамку (каемку) вокруг textarea, когда они находятся в фокусе.
Вы можете удалить ее из браузера следующим образом:textarea { outline : none; }
Помните, что свечение textarea и полей для ввода текста является стандартом и важным элементом юзабилити сайта. Удаляя это оформление, вы создаете сложности для посетителя вашего сайта.
Как удалить маркер изменения размера у textarea?
Webkit-браузеры предлагают маленький элемент пользовательского интерфейса в правом нижнем углу textarea, при помощи которого пользователи могут изменить размеры текстового поля. Если по каким-либо причинам вы хотите удалить, то используем CSS:
textarea { resize : none; }
Nowrap — убрать переносы
Чтобы текст автоматически не переносился, в CSS можно использовать
<textarea wrap="off" cols="30" rows="5"></textarea>
Как убрать полосу прокрутки textarea в Internet Explorer?
IE старых версий ставят вертикальную прокрутку по умолчанию на всех textarea. Вы можете спрятать его через overflow: hidden, но тогда вы не получите никакой прокрутки везде, когда текста станет больше, чем высота поля. Слава богу, overflow:auto удалит прокрутки, но включит прокрутку автоматически в случае необходимости.
textarea { overflow : auto; }
Источник: Textarea tricks
Создание эффектов свечения с помощью CSS / Coder’s Block
Свойство CSS box-shadow
обманчиво великолепно. При «традиционном использовании» это простой способ добавить эффект тени к элементу. Я использую это для изображений в своем блоге. Мило. Но будьте более дерзкими, и вы сможете провернуть несколько действительно интересных вещей. Я уже говорил о взломе пиксель-арта. На этот раз я собираюсь поделиться тем, как создавать красочные эффекты свечения.
Вот простой пример, иллюстрирующий, как box-shadow
работы:
div {
ширина: 150px;
высота: 150 пикселей;
цвет фона: #fff;box-shadow: 120px 80px 40px 20px #0ff;
/* по порядку: смещение x, смещение y, размер размытия, размер разброса, цвет */
/* размер размытия и размер разброса необязательны (по умолчанию они равны 0) */
}
А вот схема результат:
Достаточно просто. Это то, на чем мы будем основываться.
Давайте остановимся на мгновение, чтобы поговорить о поддержке браузером коробка-тень
. К счастью, это довольно хорошо. IE9+ и все остальные основные браузеры поддерживают его без префикса. Однако значение размытия, похоже, применяется непоследовательно в разных браузерах. В частности, Chrome отображает его примерно вдвое меньше, чем вы ожидаете. Не шоу-стоппер, но кое-что, чтобы быть в курсе.
box-shadow
принимает форму элемента, на котором находится. Если мы сделаем элемент круглым с border-radius: 50%
, тогда box-shadow
последуют этому примеру.
Мы можем наложить несколько эффектов свечения на элемент, задав box-shadow
несколько наборов значений, разделенных запятыми. Эффекты свечения будут располагаться так: первый сверху, последний снизу.
Хорошо, давайте попробуем эти 2 метода вместе:
div {
width: 40px;
высота: 40 пикселей;
радиус границы: 50%;
цвет фона: #fff;
box-shadow:
0 0 60px 30px #fff, /* внутренний белый */
0 0 100px 60px #f0f, /* средний пурпурный */
0 0 140px 90px #0ff; /* внешний голубой */
}
Результат:
См. Pen Circles and Stacking Уилла Бойда (@lonekorean) на CodePen.
Неплохо! К этому моменту вы уже знаете достаточно, чтобы сделать впечатляющие визуальные эффекты. В качестве примера, вот что вы можете сделать, добавив немного анимации к уже рассмотренным методам box-shadow
(вы также можете щелкнуть кружки): на КодПене.
Теперь давайте поиграем со встроенным свечением. Добавив вставьте
в объявление box-shadow
, вы можете изменить его с внешнего свечения на внутреннее свечение. Объедините это со значениями смещения x/y, чтобы создать эффект свечения цвета внутрь с одной стороны. Применяя этот CSS:
div {
width: 400px;
высота: 200 пикселей;
цвет фона: #fff;
граница: сплошная 2px #fff;
box-shadow:
вставка 60px 0 120px #f0f, /* левый пурпурный */
вставка -60px 0 120px #0ff; /* голубой цвет справа */
}
Дает нам это:
См. Вставки и смещения пера Уилла Бойда (@lonekorean) на CodePen.
Теперь давайте объединим все эти техники, чтобы создать светящийся полупрозрачный мрамор. Вот CSS:
div {
width: 300px;
высота: 300 пикселей;
радиус границы: 50%;
box-shadow:
вставка 0 0 50px #fff, /* внутренний белый */
вставка 20px 0 80px #f0f, /* внутренний левый пурпурный короткий */
вставка -20px 0 80px #0ff, /* внутренний правый голубой короткий */
вставка 20px 0 300px #f0f, /* внутренний левый пурпурный широкий */
inset -20px 0 300px #0ff, /* внутренний правый голубой широкий */
0 0 50px #fff, /* внешний белый */
-10px 0 80px #f0f, /* внешний левый пурпурный */
10px 0 80px # 0фф; /* внешний правый голубой */
}
И вот окончательный результат:
См. Pen Glowing Translucent Marble Уилла Бойда (@lonekorean) на CodePen.
Неплохо для нескольких строк CSS, а? Можно сделать еще больше, но это хорошее начало. Теперь вперед и создавайте блестящие, светящиеся, красочные вещи!
Внешнее свечение CSS | UnusedCSS
CSS предлагает очень мощное свойство box-shadow. Это позволяет разработчикам имитировать тени — как будто наши HTML-элементы находятся в настоящем трехмерном пространстве и могут перемещаться по оси Z, чтобы подняться над фоновым содержимым или погрузиться в него.
Давайте представим это на следующем примере. У нас есть две кнопки в нашем представлении. Один без box-shadow, а другой с ним. Можно заметить, что без box-shadow вся перспектива остается двухмерной, как если бы кнопка была нарисована карандашом на бумаге. Но с box-shadow наш мозг начинает обрабатывать вид как трехмерную перспективу. Мы чувствуем, что коробка является настоящим трехмерным элементом, размещенным или парящим над настоящей трехмерной плоскостью. Это сила box-shadow.
Box-shadow описывается
- Горизонтальное и вертикальное смещения от краев целевого элемента
- Радиус размытия
- Радиус раскрытия
- Цвет
Вы можете изучить детали этих свойств и поэкспериментировать с ними на странице ресурсов MDN.
Теперь, когда у нас есть краткое введение в мир коробчатых теней, обратим внимание на основную тему этой статьи — внешнее свечение.
Эффект свечения наблюдается, когда элемент излучает постоянный свет по краям своего тела. Например, эффект, который можно увидеть по краям кнопки в следующем примере.
Простое свечение
Неиспользуемый CSS
Давайте создадим этот эффект с помощью box-shadow.
Во-первых, мы создадим черный контейнер, так как свечение выделяется на темном фоне. Мы центрируем его содержимое в обоих измерениях. Содержимое в нашем случае будет просто текстом в поле. Мы называем это просто картой.
<дел>Простое свечение
<дел>Неиспользуемый CSS