1. Гость, на данный момент выплаты с форума превысили 7000 долларов! Присоединяйся к нам и начинай зарабатывать!
  2. Гость, спеши получить на новый год подарок от форума!!! Подробности тут
    Скрыть объявление
  3. Гость, примите участие в прогнозе курса Bitcoin и выиграйте коллекционную монету!
    Скрыть объявление
  4. Гость, участвуй в конкурсе прогнозов по валютной паре EUR|AUD ! Призовой фонд - 350 долларов! Участвовать
    Скрыть объявление
  5. Гость, любите смотреть фильмы? Зарабатывайте на этом в Конкурсе Киноманов!
    Скрыть объявление
  6. Гость, пользуете ОС Android на планшете или смартфоне? Возможно Вам пригодится приложение нашего форума
    Скрыть объявление
  7. Гость, рады сообщить что теперь на форуме можно заработать ещё больше продавая свою подпись. Подробнее в этой теме.
    Скрыть объявление

Светящиеся блоки на css

Тема в разделе "Движки, шаблоны, стили, модули, хаки", создана пользователем monahyip, янв 1, 2016.

Метки:
  1. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    562
    Симпатии:
    47
    Баллы:
    3
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    Стили css имеют очень много свойств и возможностей. С помощью одних только стилей можно делать очень красивые эффекты, при чем вообще без использования различных ява-скриптов. И вот вам еще одна фишка - эффект свечения css.
    Пример:
    333.png

    Код для реализации


    1. Код html
    Код:
    <div class='back2'>
    <div class='fin1'>
    Форум <u>Finforum.net</u>  <br> очень интересный
    </div>
    
    <div class='fin1'>
    вот вам код :) <br> автор <b>monahyip</b>
    </div>
    
    </div>
    
    2. Код css-стилей
    Код:
    .back2 {
    background: #0000CD;
    min-height: 150px; 
    }
    
    .fin1 {
    margin-top: 10px; 
    background-color: #4169E1;  
    border: 2px solid #00BFFF; 
    border-radius: 1px; 
    box-shadow: 0 0 10px 5px #00CED1; 
    width: 200px; 
    height: 100px;
    color: #fff; 
    float: left; 
    padding: 10px; 
    margin-left: 20px; 
    font-size: 1.5em; 
    }
    
    Код стилей можно очень сильно сократить, зависит от нужд. Большинство эффектов написаны для демонстрации возможностей. Вы можете выпилить height, width, border-radius, font-size и прочие. Вот вам пояснение по каждому пункту.
    background: #0000CD; - фон для общего блока
    min-height: 150px; - минимальная высота для общего блока
    Второй класс: (fin1)
    margin-top: 10px; - отступ от вверху
    background-color: #4169E1; -фон для блока
    border: 2px solid #00BFFF; -граница блока с типом и цветом
    border-radius: 1px; -округление
    box-shadow: 0 0 10px 5px #00CED1; -"тень" блока: первые 0 отступ по бокам, второй 0 отступ по вертикали, 10 пикселей - ширина тени, 5 пикселей - "насыщенность"
    width: 200px; - ширина блока
    height: 100px; - высота блока
    color: #fff; - цвет текста
    float: left; - обтекание по левому краю (чтобы два блока было в одну строчку)
    padding: 10px; - отступ внутри блока
    margin-left: 20px; - отступ блока от левого края
    font-size: 1.5em; - размер шрифта

    Смена цветовой гаммы


    Но голубой не так красиво смотрится. Давайте сделаем уклон в красный. Для этого нужно сменить характеристики в трех местах - бекграунд, бордер и бордер-шадов.
    Тогда код стилей будет выглядеть вот так:
    Код:
    .back2 {
    background: #0000CD;
    min-height: 150px; 
    }
    
    .fin1 {
    margin-top: 10px; 
        background-color: #980C0C;
        border: 2px solid #d76060;
        border-radius: 1px;
        box-shadow: 0 0 10px 5px #FF0C0C;
    width: 200px; 
    height: 100px;
    color: #fff; 
    float: left; 
    padding: 10px; 
    margin-left: 20px; 
    font-size: 1.5em; 
    }
    
    А сами блоки:
    34.png

    Но давайте сделаем с уклоном в цветовую гамму форума - зеленую:
    35.png
    Код стилей:
    Код:
    .fin1 {
    margin-top: 10px; 
        background-color: rgb(61, 129, 62);
            border: 2px solid #51D60D;
        border-radius: 1px;
        box-shadow: 0 0 10px 5px rgb(24, 218, 1);
    width: 200px; 
    height: 100px;
    color: #fff; 
    float: left; 
    padding: 10px; 
    margin-left: 20px; 
    font-size: 1.5em; 
    }
    
    Протестировать онлайн можете на jsfiddle.
    Не забываем, что многое можно убрать. Но в целом код такой. Жду ваших вопросов ;)
     
    Mamikon нравится это.
  2. Mamikon

    Mamikon Матёрый юзер Стандартная ставка оплаты

    Регистрация:
    окт 23, 2015
    Сообщения:
    1,724
    Симпатии:
    109
    Баллы:
    17
    Пол:
    Мужской
    Тени придают хорошую насыщенность блокам. Люблю с дивами еще использовать градиенты. Вот только не пробовал их реализовать на тенях. Только пришла в голову такая идея. Вот только возможно ли это и как сделать?
     
  3. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    562
    Симпатии:
    47
    Баллы:
    3
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    только что попробовал - если вместо цвета писать градиент, то просто не работает. Почитал некоторые русскоязычные мануалы, там не пишут о таком.
     
  4. Mamikon

    Mamikon Матёрый юзер Стандартная ставка оплаты

    Регистрация:
    окт 23, 2015
    Сообщения:
    1,724
    Симпатии:
    109
    Баллы:
    17
    Пол:
    Мужской
    Оформляется по правилам градиента. Только через запятую свойства. Кстати, можно красивые дизайны давать теням таким способом.

    Вот код стилей для дива. Для насыщенности цветов можно использовать формат HSLA.

    Код:
    div {
       width: 120px;
       height: 120px;
       border: 1px solid lightgray;
    }
     
    
    
    .divka {
        box-shadow:  0 8px 13px hsla(0,100%,50%,.5),
        -8px 8px 13px hsla(60,100%,50%,.7),
        8px -8px 13px hsla(120,100%,50%,.5),
        8px 0 13px hsla(240,100%,50%,.5);
      } 


    тень.jpg
     
  5. monahyip

    monahyip Старожила Стандартная ставка оплаты

    Регистрация:
    дек 7, 2015
    Сообщения:
    562
    Симпатии:
    47
    Баллы:
    3
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    не знал, а я через linear-gradient пытался..