Ответы пользователя по тегу CSS
  • Flexbox - количество элементов в строке?

    bogdan_uman
    @bogdan_uman
    шлЫмазл неукЪ-поцЪ
    SLIM:

    .main
          .child
          .child
          .child
          .child
          .child


    CSS:
    .main {
      background-color: #e1e1e1;
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .child {
      margin: 5px;
      background-color: green;
      height: 20px;
      width: 30%;
    }


    Результат:

    78d38c90624f42a2964e9e6e16fe3960.png
    Ответ написан
    Комментировать
  • Какой лучше редактор использовать?

    bogdan_uman
    @bogdan_uman
    шлЫмазл неукЪ-поцЪ
    Visual Studio Code, ну и соответственно настроенный EsLint + StyleLint. Перепробовал в реальной работе и Brackets и RubyMine и Atom. Первый недофункциональный, второй перефункциональный, а третий просто глючный.
    Ответ написан
    Комментировать
  • В каком редакторе лучше верстать?

    bogdan_uman
    @bogdan_uman
    шлЫмазл неукЪ-поцЪ
    Как редактор то Atom неплохой. А как IDE то лучше что-то от JetBrains юзать например WebStorm.
    Для начинающего отлично подойдет Brackets, у него есть фича которой нет у других браузеров, это свой LivePreview который показывает область применения стиля CSS.
    Ответ написан
    Комментировать
  • Как сделать чтобы блоки выстраивались с право на лево?

    bogdan_uman
    @bogdan_uman
    шлЫмазл неукЪ-поцЪ
    ну если уж очень по простому, тогда нужно юзать CSS
    text-align: left;
    Возможно задача сложней и нужно использовать Flex
    Ответ написан
  • Как выйти за пределы container?

    bogdan_uman
    @bogdan_uman
    шлЫмазл неукЪ-поцЪ
    Ну вот на коленке написал
    CSS
    * {
      box-sizing: border-box;
    }
    
    .outher {
      margin: 30px;
      border: 2px solid #ccc;
      height: calc(100vh - 60px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .inner {
      background-color: green;
      flex-basis: 70px;
      margin: -40px;
    }


    SLIM
    doctype html
    html
      head
        title Slim Examples
        meta name="keywords" content="template language"
        link rel="stylesheet" href="table_image.css" 
      body
        .outher
          .inner


    Результат
    87433b0419d0448d82f0f8a0919586c0.png
    Ответ написан
    1 комментарий
  • Как сделать форму обратной связи (скрин внутри)?

    bogdan_uman
    @bogdan_uman
    шлЫмазл неукЪ-поцЪ
    Ну как бы клики можно ловить через элемент "a" и в css тогда уже черед block::target {}

    CSS
    #block {
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      position: fixed;
      visibility: hidden;
      background-color: #ccc;
    }
    
    #block:target {
      visibility: visible;
    }


    SLIM
    doctype html
    html
      head
        title Slim Examples
        meta name="keywords" content="template language"
        link rel="stylesheet" href="table_image.css" 
      body
        a *{href: '#block'} Show
        #block
          a *{href: '#'} Hide


    РЕЗУЛЬТАТ
    4f4ea977084c4d8c9d709cf18b6b20ad.png
    Ответ написан
    Комментировать
  • Как сделать скрытие открытие блока?

    bogdan_uman
    @bogdan_uman
    шлЫмазл неукЪ-поцЪ
    Тоже вариант на флексе, более лаконично
    SLIM
    doctype html
    html
      head
        title Slim Examples
        meta name="keywords" content="template language"
        link rel="stylesheet" href="table_image.css" 
      body
        #block1.block
          a *{href: '#block1'} Hide
        #block2.block
          a *{href: '#'} Show Block 1


    CSS
    body {
      display: flex;
      height: 100vh;
    }
    
    #block1 {
      flex: 0 0 30%;
      background-color: #ccc;
    }
    
    #block2 {
      flex-basis: 100%;
      background-color: #eee;
    }
    
    #block1:target {
      display: none;
    }


    Результат
    741dae23438d4ba59a5144f8a1b61f1b.png
    Ответ написан
    Комментировать
  • Как ресайзить изображения без потери пропорций?

    bogdan_uman
    @bogdan_uman
    шлЫмазл неукЪ-поцЪ
    Вот может так нужно
    SLIM
    doctype html
    html
      head
        title Slim Examples
        meta name="keywords" content="template language"
        link rel="stylesheet" href="table_image.css" 
      body
        table
          tr
            td 
              .img *{ style: "background-image: url('http://lorempixel.com/100/200/');" }
            td 
              .img *{ style: "background-image: url('http://lorempixel.com/100/300/');" }


    CSS
    .img {
      height: 100px;
      width: 100px;
      background-repeat:no-repeat;
      background-size: 100% 100% / contain;
    }


    68ca61b2352b4d7ebf39ba90f446e7c3.png
    Результат
    Ответ написан
    Комментировать
  • Как сверстать 2 одинаковые по ширине колонки?

    bogdan_uman
    @bogdan_uman
    шлЫмазл неукЪ-поцЪ
    На коленке набросал

    CSS
    body {
      display: flex;
      flex-direction: column;
    }
    
    .header, .footer {
      height: 50px;
      background-color: #ccc;
      text-align: center;
    }
    
    .header {
      margin-bottom: 10px;
    }
    
    .footer {
      margin-top: 10px;
    }
    
    
    .clm_main {
      display: flex;
      flex-direction: row;
    }
    
    .clm {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-grow: 1;
    }
    
    .clm:first-child {
      margin-right: 10px;
    }
    
    .block {
      flex-grow: 1;
      min-height: 50px;
      background-color: #eee;
      border: 1px solid black;
      text-align: center;
    }
    
    .block:not(:last-child) {
      margin-bottom: 10px;
    }


    SLIM
    doctype html
    html
      head
        title Slim Examples
        meta name="keywords" content="template language"
        link rel="stylesheet" href="block.css" 
      body
      .header
        | header
      .clm_main
        .clm
          .block
            | Block 1
          .block
            | Block 4
          .block
            | Block 6
        .clm
          .block
            | Block 2
          .block
            | Block 3
          .block
            | Block 5
          .block
            | Block 7
      .footer  
        | footer


    На выходе резиновый контент
    1bb87f9dae9f4f7281271655344361aa.png
    Ответ написан
    Комментировать
  • Как сделать table-layout: fixed и min-width?

    bogdan_uman
    @bogdan_uman Автор вопроса
    шлЫмазл неукЪ-поцЪ
    Отвечу сам себе, резиновую колонку можно сделать, но для этого нужно создать псевдоколонку которая и будет резиновой, и вторую колонку которая будет как раз и содержать ширину минимально-необходимую, и эти ячейки обьеденить.
    Ответ написан
    Комментировать
  • Как с помощью css создать таблицу по центру экрана?

    bogdan_uman
    @bogdan_uman
    шлЫмазл неукЪ-поцЪ
    Ну мне больше нравится вариант с flex
    28aaf2401dae448abfc3fbe53ff87dbf.png
    Вот и сама верстка на slim
    doctype html
    html
      head
        title Slim Examples
        meta name="keywords" content="template language"
        link rel="stylesheet" type="text/css" href="../session.css" media="screen"
      body
        / Вход пользователя
        #main_log_in
          form 
            span Вхід в портал
            div : input *{ type: :text, name: :username, placeholder: 'Користувач...' }
            div : input *{type: :password, name: :password, placeholder: 'Пароль...' }
            button


    а вот и стили на Sass
    $ffIcon: 'Glyphicons Halflings';
    
    @import 'application';
    
    #main_log_in {
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #666666;
    
      form {
        display: inline-block;
        width: 500px;
        border-radius: 3px;
        background-color: white;
    
        /* Заголовок */
        span {
          display: block;
          width: 100%;
          padding-left: 15px;
          line-height: 43px;
          font-size: 16px;
          background-color: #d9edf7;
          color: #31708f;
          border-radius: 3px 3px 0 0;
        }
    
        /* Поля ввода с иконами */
        div {
          margin: 20px 15px;
          position: relative;
          &:before { font-family: $ffIcon; position: absolute; top: 8px; left: 8px; color: #aaa; }
    
          &:nth-of-type(1):before { content: "\e008"; } /* Иконка для пользователя */
          &:nth-of-type(2):before { content: "\e139"; } /* Иконка для пароля */
    
          /* Поля ввода с иконами */
          input {
            width: 100%;
            height: 34px;
            border-radius: 3px;
            border: 1px solid #e7e7e7;
            cursor: pointer;
            padding-left: 30px;
            &:hover:enabled { border-color: #aaa; }
          }
        }
    
        /* Базовая кнопка */
        button {
          height: 34px;
          border-radius: 3px;
          margin: 20px 15px;
          border: 1px solid #2e6da4;
          background-color: #337ab7;
          color: white;
          cursor: pointer;
          &:hover:enabled { background-color: #286090; border-color: #204d74; };
          &:before { content: "Натисність для входу"; };
        }
      }
    }
    Ответ написан
    Комментировать