Регистрация за 5 сек.
Здравствуй, друг!
Еще не зарегистрировался?

Войти за 5 сек. через :
Как сделать свечение внутри блока css - Forum-Profit.RU

Как сделать свечение внутри блока css

Специалист
Сообщений: 271 Карма: 3.10
#1    23.09.2015, 16:30
Часто люди хотят приукрасить разные элементы дизайна на своем сайте. Иногда это просто заокругленные блоки (с помощью border-radius), а иногда – целая анимация. И все это можно сделать на css, что позволяет правильно отображать эффекты на разных устройствах, даже смартфонах.
И недавно я был озадачен одной просьбой – сделать свечение блока. В принципе, делается это несложно, достаточно добавить один параметр в стили, но человек хотел свечение внутри блока. Красиво это или нет, у каждого свой вкус. Но делается это легко. Вот вам код, который нужно добавить в стили для элемента, которому присваивается эффект:
Код:
box-shadow: inset 0 0 30px rgb(255, 105, 105);
Если убрать inset, то свечение будет снаружи блока. Цвет задается в rgb, можно писать словами типа red, green, black. Первый ноль означает сдвиг вправо, второй ноль – вниз. Третье значение (у нас 30 px) размер размытости (свечения).
Если вы только создали блок, то нужно его приукрасить – сделать отступы для текста, может задать фоны, цвета. Например, можно сделать белый текст на черном фоне. Для этого в стилях блока добавьте:
Код:
background: #000;color:white;
Чтобы задать отступы внутри блока нужно прописать:
Код:
padding:1%;
То есть, чтобы сделать вот такое стоить прописать:
Код:
background: #000;color:white;box-shadow: inset 0 0 30px rgb(255, 105, 105); width:20%; padding:1%;


Пользуйтесь, спрашивайте. Буду рад новым задачам ;-)
Миниатюры
Нажмите на изображение для увеличения
Название: 1111.png
Просмотров: 24
Размер:	30.0 Кб
ID:	3950  
Мой блог вебмастера.
Kwork - Это удобный магазин фриланс-услуг по 500 Р. SEO, дизайн, текст - все услуги по 500 Р. Быстро, качественно и с гарантией! Заходи на Kwork!
Слушай и качай музыку бесплатно тут.
Интересующийся
Сообщений: 10 Карма: 1.10
#2    26.04.2017, 11:03
css3 открывает возможности для реализации множества очень круты штук. css3generator.com поможет
Рекомендуем посмотреть
Похожие темы
Как сделать скриншот
(Тема для тех, кто не знает, что такое скриншот и как его делать) Скриншот (от англ. screenshot) или снимок экрана - изображение, в точности...
Модернизация системного блока персонального компьютера.
В последние годы стала актуальна тема по модернизации системного блока компьютера , ну или всего персональника. Особенно тема интересна среди...
2 системных блока - один монитор
Хочу реализовать взаимодействие между 2 системными блоками и одним монитором. Каким-то образом их соединить и работать на двух ПК одновременно, но...
seones.ru — щедрый админ внутри
Предлагаю вашему вниманию молодой и очень бурно развивающийся проект: seones.ru Предусмотрены автовыплаты, минималка отсутствует! Уникальный...
Скрипт онлайн переводчика (в виде отдельного блока)
для светлых дизайнов: http://ucoztime.ucoz.ru/scripts/44da0ac944a1-1-.jpg <table> <tr><td...


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)