Свечение css: Как сделать эффект свечения с помощью CSS.

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