Советы и готовые решения для верстальщиков.

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем alex_storm, 10 фев 2013.

  1. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    « Правила раздела »
    1. Обсуждения - запрещены! Здесь размещаются только "советы или готовые решения для верстальщиков.
    2. Если хотите отблагодарить автора поста, то используем кнопку «Мне нравится». Создавать для этого новые сообщения не нужно!
    3. Размещать ссылки на сторонние ресурсы - запрещено.
    4. Если у вас возникли вопросы по одному из сообщений и вы считаете, что оно требует доработки или прочих изменений, то свяжитесь с автором поста для редактирования информации или сообщите одному из модераторов раздела для внесения изменений при помощи личных сообщений или кнопки "Пожаловаться".
    Правила оформления сообщения
    1. Название - для удобного поиска.
    2. Использовать размер шрифта для заголовков не больше 5, для остального не меньше 3 (стандартный). Если используете другой "цвет" шрифта, то он должен быть адекватным и не содержать 'радуги' или 'ядовитый' оттенок, который при просмотре ломает глаза.
    3. Для кода используем соответствующие теги, если код длинный, то прячем под "спойлер".
    4. Свободная информация взятая из интернета под хайдом не устанавливается! Если это ваш личный метод, то хайд на ваше усмотрение.
    Пример:

    Делаем текст, который не заходит под элемент не известной заранее ширины.
    [​IMG]

    CSS:



    HTML:

     
    xasler нравится это.
  2. dbunt1tled

    dbunt1tled

    Регистрация:
    18 фев 2013
    Сообщения:
    233
    Симпатии:
    44
    В свое время очень помогла статья http://css-tricks.com/examples/ShapesOfCSS/ для построение фигур с помощью CSS ниже самые распространенные фигуры по ссылке можно найти много экзотических
    Квадрат
    Прямоугольник
    Круг
    Овал
    Треугольник вверх
    Треугольник вниз
    Треугольник влево
    Треугольник вправо
    Трапеция
    Параллелограмм
    6-конечная звезда
    5-конечная звезда
     
  3. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
  4. VIP24

    VIP24 Верховный Главнокомандующий

    Регистрация:
    8 июл 2013
    Сообщения:
    239
    Симпатии:
    1.204
    Елочные шары, созданные с использованием CSS3
    Для вывода елочных шаров будет использоваться только правила CSS3 и HTML (без изображений)
    [​IMG]
    Ингредиенты CSS
    Прежде чем начать, сделаем беглый обзор используемых инструментов.

    1. :before и :after псевдо-элементы: Использование псевдо-элементов помогает уменьшить количество кода HTML, который необходим для вывода страницы. Если вы работали со скругленными углами в CSS2, то, вероятно, вы знаете, что для создания гибких элементов со скругленными углами, которые подгоняются под различные размеры контента, нужно использовать несколько пустых элементов div. Применение псевдо-элементов помогает сократить объем вспомогательной разметки. В нашем примере используется только один пустой div для одного шарика, в который можно добавить текст.
    2. Линейные и радиальные градиенты CSS3: Для создания реалистичных цветовых переходов и отражений мы будем использовать цветовые градиенты.
    3. Тени, трансформации, скругленные углы и так далее: Для создания форм мы будем использовать комбинацию свойств box-shadow, transform, и border-radius.
    HTML
    Сначала создадим разметку. Структура страницы минимальна и содержит только необходимый код.

    Так как сфера нуждается в блочном элементе, то мы используем <div>, а не <span>. Однако, вы можете использовать тег <span> в сочетании со свойством CSS display: block.

    Элементы размещаются в неупорядоченном списке, потому что в нашем примере нет упорядоченной иерархии и все шары одинакового размера.
    HTML:
    <ul id="bauble-container">
    <li>
    <div class="bauble red-bauble"></div>
    </li>
    <li>
    <div class="bauble blue-bauble"></div>
    </li>
    <li>
    <div class="bauble yellow-bauble"></div>
    </li>
    <li>
    <div class="bauble green-bauble"></div>
    </li>
    </ul>
    
    Описание ID и классов:
    1. #bauble-container - наш неупорядоченный список, ID которого будет использоваться для точного указания элементов списка (<li>).
    2. .bauble - основная часть украшения, сферическая форма.
    3. .red-bauble, .blue-bauble, .yellow-bauble и .green-bauble - используются для добавления вариаций цветов. Очень легко использовать различные комбинации шаров, просто изменив несколько строк кода в разметке.

    CSS
    Рассмотрим правила CSS, которые превращают наш скучный неупорядоченный список в набор елочных украшений.

    Код CSS снабжен комментариями, которые проясняют ключевые моменты.
    Код:
    /* Общая часть */
    html
    {
    background: #f2f5f6; /* Цвет фона, если градиент не поддерживается */
    background: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c8d7dc),color-stop(1, #f2f5f6));
    height: 100%;
    }
    
    #bauble-container
    {
    list-style: none; /* Удаляем метки элементов списка */
    width: 568px; /* Реальная ширина списка после суммирования полей, рамок и ширины элемента */
    margin: 150px auto; /* Центрируем */
    padding: 0;
    }
    
    #bauble-container li
    {
    margin: 0 20px; /* Оставим немного места */
    float: left; /* Располагаем элементы в ряд */
    }
    
    /* В данной части добавляется строка для элементов елочных украшений */
    #bauble-container li:before
    {
    content: "";
    
    background: #dadada; /* Цвет фона, если градиент не поддерживается */
    background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
    background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
    
    height: 50px;
    width: 2px;
    display: block;
    margin: 0 auto;
    }
    
    /* Вращаем их */
    #bauble-container li:nth-child(odd)
    {
    -moz-transform: rotate(-5deg); /* Firefox */
    -webkit-transform: rotate(-5deg); /* Chrome и Safari */
    -o-transform: rotate(-5deg); /* Opera */
    -ms-transform: rotate(-5deg); /* Сюрприз! IE9 со своим собственным префиксом трансформации */
    }
    
    #bauble-container li:nth-child(even)
    {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    }
    
    /* Стиль для елочных украшений */
    .bauble
    {
    -moz-border-radius: 100px;
    border-radius: 100px;
    
    -moz-box-shadow: 0 0 5px #777777;
    box-shadow: 0 0 5px #777777;
    -webkit-box-shadow: 0 0 5px #777777;
    
    border: 1px solid rgba(0,0,0,0.3);
    position: relative;
    height: 100px;
    width: 100px;
    }
    
    /* Стиль для верхней части елочных украшений */
    .bauble:before
    {
    content: "";
    
    background: #fff; /* Цвет фона, если градиент не поддерживается */
    background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
    background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c));
    
    -moz-border-radius: 2px;
    border-radius: 2px;
    
    -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
    
    border: 1px solid #dadada ;
    height: 10px;
    width: 20px;
    position: absolute;
    left: 50%;
    top: -12px;
    margin-left: -10px;
    }
    
    /* Добавляем отражение света */
    .bauble:after
    {
    content: "";
    
    -moz-border-radius: 100px;
    border-radius: 100px;
    
    background: #fff; /* Цвет фона, если градиент не поддерживается */
    background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
    background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1)));
    
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -40px;
    opacity: 0.15;
    height: 80px;
    width: 80px;
    }
    
    /* Устанавливаем цвета */
    .red-bauble
    {
    background: #c8171f; /* Цвет фона, если градиент не поддерживается */
    background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
    background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
    }
    
    .blue-bauble
    {
    background: #00a1ee; /* Цвет фона, если градиент не поддерживается */
    background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
    background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
    }
    
    .yellow-bauble
    {
    background: #fcb83d; /* Цвет фона, если градиент не поддерживается */
    background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
    background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
    }
    
    .green-bauble
    {
    background: #4d8d00; /* Цвет фона, если градиент не поддерживается */
    background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
    background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
    }
    

     
    Последнее редактирование: 17 окт 2013
    passtools и dron78 нравится это.
  5. Руслан911

    Руслан911

    Регистрация:
    27 авг 2013
    Сообщения:
    63
    Симпатии:
    21
    можешь обновить ссылку на скачку?