1. Приветствую гостей и пользователей нашего форума! Первый раз вы у нас или же давно участвуете в жизни ресурса, хочу напомнить несколько моментов.

    1) Пользуемся поиском по форуму! Зачастую информация может находиться не по разделу!

    2) Раздел ИНФО-продуктов относительно новый, но имеем уже более 3000 высококлассных материалов (пользуемся сортировкой по прификсам).

    3) И самое важное, КАК КАЧАТЬ БЕЗ ОГРАНИЧЕНИЙ, вся информация находится по этой ссылке КУПИТЬ VIP

    4) Временная акция, получи +5 постов за вступление в нашу группу "Вконтакте" Более подробно ТУТ

    5) Веди активную жизнь на форуме и получай рубли на личный счёт!

    Скрыть объявление
  2. На нашем форуме Null-Prog действует серьёзное правило касательно размещения материалов!

    ДЛЯ РЕЛИЗЁРОВ: категорически запрещается выкладка материалов на файлообменники типа Deposit, letitbit и другие, требующие просмотров рекламы, обрезающие скорость и тд. Нарушителям, первые 2 раза предупреждения, далее БАН. Тему по этому поводу можно посмотреть ТУТ

    Скрыть объявление
  3. В тестовом режиме на нашем форуме открыт онлайн конструктор сайтов. Вы можете попробовать создать свой сайт у НАС, интуитивно понятный интерфейс, переведёт на 95%, быстрый экспорт проекта, от вас только перетаскивать элементы и вставить в них необходимый текст!

    Все вопросы ТУТ

    Скрыть объявление

  4. Скрыть объявление
  5. Уважаемые форумчане, открывается новый раздел форума, посвящённый ремонту и эксплуатации автомобилей. Просмотреть его можно ТУТ

    Так как раздел новый, информация будет пополнять каждый день. Если есть какие либо замечания по этому разделу, отписываемся в соответствующий раздел форума, либо в личку.

    Напоминаю, сообщения в разделе АВТО не учитываются, общение не ограничено.

    Скрыть объявление
  6. Объявляется набор Модераторов на различные раздел форума, свои заявки можно оставлять в ЭТОМ разделе, перед оставлением заявки рекомендуется ознакомиться с ПРАВИЛАМИ для модераторов.

Шпаргалки по CSS

Тема в разделе "Web Coding", создана пользователем Sam Jack, 18 май 2015.

  1. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.728
    Удобно просматривается и всегда под рукой, свойства и описание селекторов (элементов, классов, идентификаторов, атрибутов)
    Скрытый текст:
    **Скрытый текст: Для просмотра скрытого текста Вы должны иметь 20 или более сообщений.**
     
    Метки:
  2. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Я тоже делал для себя некоторое кол-во шпаргалок по CSS. В этом и следующих сообщениях поделюсь ими.
    Первая шпаргалка так же по селекторам.
    Код:
    //////////////////////////////////////
    //Селекторы
    //////////////////////////////////////
    !Селекторы не чувствительны к регистру
    !Рекомендуется использовать строчное написание
    !Перечисление через запятую означает использование
    сразу нескольких селекторов, к которым будут применены
    одинаковые свойства/значения
    !Несколько слов в названии лучше разделять дефисом
    
    элемент.class - все заданные элементы, принадлежащие данному классу
    элемент#id - все заданные элементы, принадлежащие данному id
    !такой записи лучше избегать, потому что
    на странице возможен только один элемент с данным id
    ex: h2.list or ul#list
    
    ex: * - означает применение ко всем элементам на странице
    
    ex: ul * - все элементы внутри ul
    
    ex: .list li - все элементы li внутри элемента с классом list
    
    //////////////////////////////////////
    //Комбинаторы
    ex: .list>li - выделение элементов li только с наследованием первого уровня
    
    ex: h4 + li - только первые элементы li, стоящие после h4
    
    ex: h4 ~ li - все элементы li до конца родительского списка, стоящие после h4
    
    //////////////////////////////////////
    //Псевдоклассы
    
    Псевдоклассы ссылок:
    :link - все ссылки, которые не были нажаты
    :visited - все ссылки, которые уже были нажаты
    
    Псевдоклассы действий пользователя:
    :hover - при наведении мыши
    :active - активные элементы
    :focus - форматирование, когда курсор находится в поле ввода
    
    ex: a:hover {
        background: #000;
        cursor: pointer;
    } задание фона ссылкам при наведении мыши и смена указателя
    
    Структурные псевдоклассы:
    :nth-child - все n-ые эдементы внутри родительского элемента
    ex: li:nth-child(2n+1) {
        color: red;
    } выделятся цветом только нечетные элементы li
    (odd/even) четные/нечетные
    ex:li:nth-last-child(3) - нумерация с конца списка
    :first-child - первый элемент внутри родительского
    :last-child - последний элемент внутри родителького
    
    ::before добавить содержимое до элемента
    ::after добавить содержимое после элемента
    
    ///////////////////////////////////
    //Селекторы по атрибутам
    
    
    ex: a[title] - - все элементы a, у которых есть атрибут title
    ex: a[title="my-title"] - все элементы a, у которых есть атрибут title со значением my-title
    ex: a[title~="my-title"] - элемент с атрибутом, значения которого разделены пробелом, где одно из значений является my-title
    ex: a[title|="my-title"] - те элементы a, у которых значение атрибута title начинается с my-title и дальше либо ничего не идет, либо идет - и дальше что угодно xD (Sorax загнул)
    ex: a[href^="https://"] - все элементы a, у которых атрибут href начинается со строки https://
    ex: a[href$=".jpg"] -  все элементы a, у которых атрибут href заканчивается строкой .jpg
    ex: a[href*=".jpg"] - все элементы a, у которых атрибут href содержит где либо строку .jpg
    
    ex: a[href$=".jpg"]::after {
        content: (jpg);
        font-size: 10px;
        color: #888;
    } - добавляет обозначение формата для файлов формата jpg
     
    vaturice, vonov, meduy и 4 другим нравится это.
  3. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Вторая шпаргалка про Позиционирование элементов
    Код:
    //////////////////////////////////////////
    //Позиционирование элементов
    //////////////////////////////////////////
    
    ///////////////
    //Размеры
    !применяется к блочным элементам
    !значения в px
    width: - ширина
    height: - высота
    !блочные элементы всегда отображаются друг под другом
    !строчные элементы отображаются в строчку
    max-width - максимальная ширина
    min-width - минимальная ширина
    max-height - максимальная высота
    min-height - минимальная высота
    
    //////////////
    //Строки и блоки
    display: block/inline/inline-block/none;
    block - отображать как блок
    inline - отображать как строчку
    inline-block - отображать блоки в строчку(свойства блоков сохраняются)
    none - полность скрыть элемент
    
    //////////////
    //Отступы
    !значения в px
    margin: сверху справа снизу слева; - внешние отступы
    or
    margin-top: - сверху
    margin-right: - справа
    margin-bottom: - снизу
    margin-left: - слева
    margin:auto; - отступ высчитывается автоматически(по центру, относительно родительского элемента)
    
    padding: сверху справа снизу слева; - внутренние отступы
    or
    padding-top: - сверху
    padding-right: - справа
    padding-bottom: - снизу
    padding-left: - слева
    
    /////////////////////////////
    //Позиционирование
    position: relative/absolute/fixed;
    !отсутсвие position:relative; означает позиционирование относительно элемента body
    relative - определяет родительский элемент, внутри которого будет использоваться позиционирование
    absolute - абсолютное позиционирование
    fixed - зафиксирует элемент относительно окна
    
    !указывать значения в px
    !можно указывать отрицательные значения
    bottom: - отступ снизу
    top: - отступ сверху
    left: - отступ слева
    right: - отступ справа
    
    z-index: 1; - сделает элемент поверх других элементов
    !стандартное значение 0, таким образом можно регулировать порядок расположения элементов(какой элемент под каким находится)
    
    !свойство overflow регулирует то, как будет вести себя содержимое контейнера, которое не вмещается в него полностью
    overflow:visible/hidden/scroll/auto;
    visible - показывать содержимое поверх контейнера
    hidden - скрыть сожержимое, которые не влазит в контейнер
    scroll - прокрутка сожержимого, котоыре не влазит в контейнер(по X и по Y)
    auto - автоматически добавляет нужный скроллинг(X и Y, только X или только Y)
    !overflow-X и overflow-Y применяют к содержимому свойства overflow по X и по Y соответственно
    overflow-X: scroll; - добавляет прокрутку по X
    overflow-Y: scroll; - добавляет прокрутку по Y
     
    vaturice, vonov, meduy и 5 другим нравится это.
  4. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Третья шпаргалка по Работе с текстом
    Код:
    ///////////////////////////////////////
    //Работа с текстом(оформление текста)
    ///////////////////////////////////////
    
    !font-family указывает шрифты
    !лучше указать несколько шрифтов через запятую
    font-family: "PT Sans", Arial, Verdana;
    
    font-size: px/pt/em/%; размер шрифта
    
    em - относительно размера шрифта родителького элемента строит новый размер в больщую или в меньшую сторону
    ex: font-size: 1.3em; - увеличит шрифт
    
    font-weight: bold; - сделать шрифт жирным
    
    font-style: italic; - сделать шрифт курсивным
    
    font-variant: small-caps; - меняет стиль шрифта
    
    text-decoration: line-through/underline/overline;
    line-through - зачеркнутый текст
    underline - зачеркнутый текст
    overline - надчеркнутый текст
    
    text-transform: lowercase/uppercase/capitalize; - регистр
    lowercase - строчные
    uppercase - заглавные
    capitalize - каждая первая буква слова заглавная
    
    text-align: center/right/left/justify; выравнивание текста
    center - по центру
    right - по правому краю
    left - по левому краю
    justify - по ширине
    
    text indent: px/%; - отступ текста(красная строка)
    
    line-height: px/%; - высота строки
    
    word-spacing: px/%; - расстояние между словами
    
    letter-spacing: px/%; - расстояние между буквами
    
    text-shadow: отступ_по_горизонтали отступ_по_вертикали размытие цвет_тени; - тень для текста
    !можно указывать через запятую сразу несколько теней
     
    vaturice, vonov, yarehes и 4 другим нравится это.
  5. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Четвертая шпаргалка по Работе с цветами. Маленькая =)
    Код:
    ////////////////////////////////
    //Цвета
    ////////////////////////////////
    
    background-color: rgb()/rgba()/hsl()/#000000/yellow; - цвет фона
    
    color: rgb()/rgba()/hsl()/#000000/yellow; - цвет текста
    
    rgba() - rgb с альфа каналом, который указывает прозрачность, четыре значения через запятую
    ! .5 - наполовину прозрачный текст
    #000000 - шестнадцатеричный способ задания цвета
    !можно сокращать до трех символов
    yellow - цвет можно прописать словами
    rgb() - обычный rgb стандарт от 0 до 255 три значения через запятую
    hsl() - не используется обычно
    
     
    vaturice, vonov, meduy и 5 другим нравится это.
  6. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Пятая шпаргалка про Рамки в CSS
    Код:
    /////////////////////////////////
    //Рамки
    /////////////////////////////////
    
    border: ширина_рамки тип_рамки цвет_рамки; - добавить рамку
    типы рамок:
    solid - сплошная
    dashed - пунктир
    dotted - точки
    inset - псевдообъемная
    !те, что ниже, практически не используются, вместо них можно делать различные рамки для всех границ
    groove
    double
    hidden
    inherit
    medium
    none
    outset
    
    !Ниже отдельное использование некоторых свойств(если хотим что либо переназначить)
    border-top: ширина_рамки тип_рамки цвет_рамки; - верх
    border-right: ширина_рамки тип_рамки цвет_рамки; - правая граница
    border-bottom: ширина_рамки тип_рамки цвет_рамки; - нижняя граница
    border-left: ширина_рамки тип_рамки цвет_рамки; - левая граница
    
    border-width: px; - ширина рамки
    border-style: - стиль рамки(используются те, что описаны выше)
    border-color: #000000/rgb()/rgba()/hls()/yellow; - цвет рамки
    
    border-bottom-color: ...;
    border-right-style: ...;
    и так далее...
     
    vaturice, vonov, meduy и 5 другим нравится это.
  7. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Шестая шпаргалка посвящена свойству CSS3, которое позволяет делать закругленные углы, не используя картинок. border-radius
    Код:
    /////////////////////////////////////
    //Закругленные углы
    /////////////////////////////////////
    
    border-radius: px/%; - позволяет делать закругленные углы для блочных элементов
    
    border-radius: левый_верхний правый_верхний правый_нижний левый_нижный;
    
    !можно расписать свойства для каждого угла отдельно
    border-bottom-right-radius: px/%;
    border-bottom-left-radius: px/%;
    border-top-left-radius: px/%;
    border-top-right-radius: px/%;
    
    Литические радиусы:
    border-bottom-right-radius: высота ширина;
    border-bottom-left-radius: высота ширина;
    border-top-left-radius: высота ширина;
    border-top-right-radius: высота ширина;
    
    border-radius: 50%; - идеальный круг
    border: 10px solid #888; - рамка для круга
    
    ////////////обязательно нужно писать с префиксами браузеров///////////////
     
    vaturice, vonov, meduy и 5 другим нравится это.
  8. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Треугольники на CSS

    Код:
    /*//////////////////////////////////////
    //Треугольники
    //////////////////////////////////////*/
    .container {
        display: inline-block;
    }
    
    .tringle-up {
        width: 0;
        height: 0;
        border-bottom: 100px solid black;
        border-left: 50px solid transparent; /*transparent - прозрачный*/
        border-right: 50px solid transparent;
    }
    
    .tringle-down {
        width: 0;
        height: 0;
        border-top: 100px solid black;
        border-left: 50px solid transparent; /*transparent - прозрачный*/
        border-right: 50px solid transparent;
    }
    И html

    Код:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="7.css(tringle).css">
    </head>
    <body>
        <div class="container tringle-up"></div>
        <div< class="container tringle-down"></div>
    </body>
    </html>
     
    vaturice, vonov, meduy и 5 другим нравится это.
  9. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Восьмая довольно важная шпаргалка посвящена Фонам (Background)

    Код:
    //////////////////////////////////////////
    //Фон и множественные фоны
    //////////////////////////////////////////
    
    background-image: url(ссылка или путь); - поставить картинку на фон
    
    background-repeat: repeat/no-repeat/repeat-x/repeat-y; - повтор картинки
    
    background-position: по-вертикали по-горизонтали; - позиция картинки(значения словами, или px)
    center
    bottom
    left
    right
    top
    
    background-color: #778899; задать цвет фону(задание цветов в другом уроке)
    
    background-attachment: fixed;
    fixed - независимо от скроллинга фон останется(не зафисит от контейнера)
    !выравнивание относительно окна браузера
    
    background-size: px px/ %/ contain/ cover;
    !проценты относительно контейнера
    contain - полность вместится в контейнер без обрезания и изменения пропорций
    cover - полность заполнит контейнер с обрезанием самой картинки
    
    /////////////////////////////////////////
    //Множественные фоны
    background-image: url(), url(); - просто указывать значения через запятую в нужном порядке
    !чем выше порядок картинки при перечислении, тем выше ее порядок в документе
    
    остальные свойства так же можно перечислять через запятую, чтобы они применялись к каждой картинке
    
    ex: background-image: url(#), url(#);
         background-repeat: no repeat, repeat;
    
    Объединение свойств:
    background: attachment color url() position repeat, следующее изображение через запятую;
    
     
    vaturice, vonov, meduy и 5 другим нравится это.
  10. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Девятая шпаргалка демонстрирует работу со спрайтами.
    CSS
    Код:
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .buttons li {
        background: url(sprite.png) no-repeat;
        display: inline-block;
        width: 123px;
        height: 32px;
        cursor: pointer;
    }
    
    .buttons .button1:hover {
        background-position: 0 -32px;
    }
    
    .buttons .button1:active {
        background-position: 0 -64px;
    }
    
    .buttons .button2 {
        background-position: -130px 0;
    }
    
    .buttons .button2:hover {
        background-position: -130px -32px;
    }
    
    .buttons .button2:active {
        background-position: -130px -64px;
    }
    
    .buttons .button3 {
        background-position: 0px -102px;
    }
    
    .buttons .button3:hover {
        background-position: 0px -134px;
    }
    
    .buttons .button3:active {
        background-position: 0px -166px;
    }
    html
    Код:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="9.css(спрайты).css">
        <title>Document</title>
    </head>
    <body>
        <ul class="buttons">
            <li class="button1"></li>
            <li class="button2"></li>
            <li class="button3"></li>
        </ul>
    </body>
    </html>
    sprite.png
     
    vaturice, vonov, meduy и 5 другим нравится это.
  11. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Float и clear fix
    CSS
    Код:
    body {
        font-family: Arial;
        color: #444;
    }
    
    .container {
        background: #ccc;
        border: 3px solid #777;
    }
    
    p {
        padding: 15px;
    }
    
    img {
        float: left; /* left/right*/
    }
    /*
    float - позволяет сделать обтекание элементов с какой либо стороны.
    left - разместить элементы слева так, чтобы другие обтекали их справа
    right - разместить элементы справа так, чтобы другие обтекали их слева
    */
    
    .text1 {
        float: left;
        width: 300px;
    }
    
    /*.text2 {
        clear: both; /* both/left/right
    }*/
    /*
    clear - позволяет очистить float
    both - полностью очистить float
    left - очистить только левый float
    right - очистить только правый float
    */
    
    /*.clear {  вспомогательный блочный!!! элемент clear для того, чтобы содержимое контейнера находилось внутри него
        clear: both;  без этого элемента контейнер будет вести себя так, будто внутри него ничего нет
    }*/
    
    .container::after{ /* cleatfix тоже самое, что и со вспомогательным элементом, только с чистым html*/
        content: '.'; /* используя псевдоэлемент*/
        display: block;
        clear: both;
        height: 0;
    }
    html
    Код:
    <!DOCTYPE html>
        <title>Document</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="main.css">
    
        <div class="container">
            <img src="3dtotal_logo_large.png" alt="">
            <p class="text1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, consequuntur, repudiandae, dicta corporis quod facere sequi reprehenderit sit maiores distinctio eos nulla labore? Explicabo, adipisci consequatur voluptas quidem atque laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, labore, iure officia ducimus in consequuntur reiciendis qui consequatur maiores sit harum rerum recusandae ab suscipit ullam excepturi omnis eius eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, rem, odio. Nostrum, voluptate, dolor nobis veritatis dicta molestias vitae rem accusamus repellendus dolores illo exercitationem unde aliquam sed quia quis.</p>
            <!--<p class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, consequuntur, repudiandae, dicta corporis quod facere sequi reprehenderit sit maiores distinctio eos nulla labore? Explicabo, adipisci consequatur voluptas quidem atque laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, labore, iure officia ducimus in consequuntur reiciendis qui consequatur maiores sit harum rerum recusandae ab suscipit ullam excepturi omnis eius eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, rem, odio. Nostrum, voluptate, dolor nobis veritatis dicta molestias vitae rem accusamus repellendus dolores illo exercitationem unde aliquam sed quia quis.</p>-->
            <!--<div class="clear"></div>-->
        </div>
    3dtotal_logo_large.png
     
    vaturice, vonov, meduy и 5 другим нравится это.
  12. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Практическая шпаргалка, демонстрирующая работу с тенями
    CSS
    Код:
    body {
        background: url(bg.jpg);
    }
    
    .button {
        display: inline-block;
        margin: 40px;
        width: 100px;
        height: 100px;
        background: url(bg.jpg);
        cursor: pointer;
    
        border-radius: 50%;
        -moz-border-radius: 50%;
        -weblit-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
    
        box-shadow: 0 3px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 3px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);
        -moz-box-shadow: 0 3px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);
        -ms-box-shadow: 0 3px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);
        -o-box-shadow: 0 3px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,.1), inset 0 0 20px rgba(0,0,0,.1);
    
    }
    
    .button:active {
        box-shadow: inset 0 0 20px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.4), inset 0 2px 0 rgba(0,0,0,.1);
        -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.4), inset 0 2px 0 rgba(0,0,0,.1);
        -moz-box-shadow: inset 0 0 20px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.4), inset 0 2px 0 rgba(0,0,0,.1);
        -ms-box-shadow: inset 0 0 20px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.4), inset 0 2px 0 rgba(0,0,0,.1);
        -o-box-shadow: inset 0 0 20px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.4), inset 0 2px 0 rgba(0,0,0,.1);
    }
    
    .button::after {
        content: '';
        width: 100px;
        height: 100px;
        display: block;
        opacity: .7;
    }
    
    .btn-photo::after {
        background: url(MD-camera-photo_0.png) center no-repeat;
    }
    
    .btn-settings::after {
        background: url(settings.png) center no-repeat;
    }
    
    .btn-tag::after {
        background: url(tag.png) center no-repeat;
    }
    
    .button:active::after {
        background-position: center 52%;
    }
    html
    Код:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="button btn-photo"></div>
        <div class="button btn-settings"></div>
        <div class="button btn-tag"></div>
    </body>
    </html>
    extra_clean_paper.png MD-camera-photo_0.png tag.png settings.png
     
    vaturice, vonov, meduy и 4 другим нравится это.
  13. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Всплывающие подсказки на CSS
    CSS
    Код:
    .container {
        width: 150px;
        height: 80px;
        background: #444;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        position: relative;
    }
    
    .container:after {
        content: '';
        position: absolute;
        width: 0px;
        height: 0px;
        border-top: 10px solid #444;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    
        bottom: -10px;
        left: 65px;
    }
    html
    Код:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="container"></div>
    </body>
    </html>
     
    vaturice, vonov, meduy и 4 другим нравится это.
  14. Mr__Mess

    Mr__Mess Moderator
    Модер

    Регистрация:
    23 авг 2015
    Сообщения:
    38
    Симпатии:
    109
    Объемный куб на CSS3, jquery только для привязки мышки. Лучше всего работает в хроме.
    CSS
    Код:
    body {
        background-color: #fff;
        font: 1em Tahoma, Arial;
    }
    
    #wrapper {
        -webkit-perspective: 900px;
        -moz-perspective: 900px;
        margin: 150px;
    }
    
    #cube {
        position: relative;
        width: 300px;
        height: 300px;
        -webkit-transform-origin: 50% 50% -150px;
        -moz-transform-origin: 50% 50% -150px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        cursor: pointer;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
    }
    
    .side {
        width: 300px;
        height: 300px;
        background: rgba(0,0,0,.3);
        background: -webkit-radial-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
        background: -moz-radial-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
        position: absolute;
        border: 10px solid #fff;
        border-radius: 10px;
        font-size: 5em;
        color: #fff;
        line-height: 300px;
        text-align: center;
        text-shadow: 0 1px 3px rgba(0,0,0,.4);
        box-shadow: 0 0 6px rgba(0,0,0,.5);
        -webkit-transform-origin: 50% 50% -150px;
        -moz-transform-origin: 50% 50% -150px;
    }
    
    #side1 {
        background: rgba(45,3,3,.3);
    }
    
    #side2 {
        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
        background: rgba(45,3,3,.4);
    }
    
    #side3 {
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        background: rgba(45,3,3,.5);
    }
    
    #side4 {
        -webkit-transform: rotateX(90deg);
        -moz-transform: rotateX(90deg);
        background: rgba(45,3,3,.6);
    }
    
    #side5 {
        -webkit-transform: rotateX(-90deg);
        -moz-transform: rotateX(-90deg);
        background: rgba(45,3,3,.7);
    }
    
    #side6 {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        background: rgba(45,3,3,.8);
    }
    html
    Код:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="cube">
                <div class="side" id="side1">1</div>
                <div class="side" id="side2">2</div>
                <div class="side" id="side3">3</div>
                <div class="side" id="side4">4</div>
                <div class="side" id="side5">5</div>
                <div class="side" id="side6">6</div>
    
            </div>
        </div>
        <script src="jquery-1.7.1.min.js"></script>
        <script>
            $(function(){
                $(document).mousemove(function(e){
                    $('#cube').css({
                        '-moz-transform':'rotate('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
                    });
                });
            });
        </script>
        <script>
            $(function(){
                $(document).mousemove(function(e){
                    $('#cube').css({
                        '-webkit-transform':'rotate('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
                    });
                });
            });
        </script>
    </body>
    </html>
    P.S. обязательно подключите в html файле библиотеку jquery. Я использовал jquery-1.7.1.min.js
    Под другие версии не пробовал
     
    vaturice, vonov, meduy и 4 другим нравится это.
  15. georg

    georg Новичок

    Регистрация:
    18 фев 2017
    Сообщения:
    17
    Симпатии:
    0
    Попробовал воспроизвести куб, получилось интересно, спасибо.
     

Поделиться этой страницей

iHax Community
Рейтинг@Mail.ru Яндекс.Метрика мониторинг сайтов
Форум программного обеспечения/
Загрузка...