1. Гость, теперь Вы можете заходить на форум с гаджетов работающих на ОС Android, версии 4.4 и выше, через наше приложение. Приложение доступно по .
    Скрыть объявление
  2. Гость, на данный момент выплаты с форума превысили 10000 долларов! Присоединяйся к нам и начинай зарабатывать!
  3. Гость, приглашаем Вас принять участие в конкурсе аналитики Чемпионата Мира по футболу 2018.
    Скрыть объявление
  4. Гость, любите смотреть фильмы? Зарабатывайте на этом в Конкурсе Киноманов!
    Скрыть объявление
  5. Гость, рады сообщить что теперь на форуме можно заработать ещё больше продавая свою подпись. Подробнее в этой теме.
    Скрыть объявление

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

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

Метки:
  1. monahyip

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

    Регистрация:
    дек 7, 2015
    Сообщения:
    627
    Симпатии:
    63
    Баллы:
    6
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    Стили 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
    Сообщения:
    2,286
    Симпатии:
    259
    Баллы:
    30
    Пол:
    Мужской
    Сайт:
    Тени придают хорошую насыщенность блокам. Люблю с дивами еще использовать градиенты. Вот только не пробовал их реализовать на тенях. Только пришла в голову такая идея. Вот только возможно ли это и как сделать?
     
  3. monahyip

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

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

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

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

    Вот код стилей для дива. Для насыщенности цветов можно использовать формат 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
    Сообщения:
    627
    Симпатии:
    63
    Баллы:
    6
    Пол:
    Мужской
    Род занятий:
    делаю сайты, арбитражю
    Адрес:
    Италия
    Сайт:
    не знал, а я через linear-gradient пытался..