Ответы пользователя HamSter

Как сделать, чтобы элементы внутри блока перекрывали бордер?

HamSter @HamSter007

HTML/CSS верстальщик

Примерно так:

CodePen

Но для адаптивности, все же, наверное, стоит разделить svg.

Ответ написан более трёх лет назад

Комментировать

Как стилизовать форму ввода?

HamSter @HamSter007

HTML/CSS верстальщик

Пример: codepen

Ответ написан более трёх лет назад

Комментировать

Как рисовать дизайн сайта, не ограничиваясь сеткой Bootstrap?

HamSter @HamSter007

HTML/CSS верстальщик

Рисую без сетки, все хорошо в плане дизайна, но не хорошо для верстальщика, который ворчит. Рисую с сеткой, получается какой то не уклюжий дизайн (не всегда безусловно, зависит от идеи), но верстальщик доволен.

Я сомневаюсь в Вашей компетентности, в Ваших дизайнерских способностях, если Вы задаете подобные вопросы.
Каждый дизайнер знает что модульная сетка может быть разной.
Креативный дизайнер не ограничивается сеткой bootstrap, но это обязательно какая-то сетка со своими вертикальными и горизонтальными ритмами.
Если соблюдены ритмы, размеры текста и шрифтов, то для верстальщика нет проблем.

Начните хотя бы со статей о сетках, например Что такое модульная сетка и для чего она нужна в в... , Модульная сетка макета с нуля

--------------------------------------------------------------------

Могу ли я рисовать без сетки, но при этом на этапе верстки, все это дело можно было бы подогнать под бутстрап?

Ответ: нет! Максимум изменить количество колонок, подогнать gutter'ы, но это уже заморочки для верстальщика.

НО, плох тот верстальщик, который зациклен на одном лишь bootstrap.
Хороший верстальщик, этот тот который в основном верстает кастомно - без использования подобных html фреймворков.
В таком случае любой дизайн можно сверстать без проблем.

И, возможно, что вам с верстальщиком стоит расстаться, чтобы не мучить друг друга! Либо научитесь идти на компромиссы и прислушиваться друг к другу!

И стоит ознакомиться хотя бы с основами верстки, а то с вот таким мнением:

верстальщик должен подстраиваться под тебя, а не ты под него. ты-творец, твори))

можете остаться наедине со своими "творениями"!

Ответ написан более трёх лет назад

5 комментариев

Насколько рационально делать простые сайты на GRID сетке?

HamSter @HamSter007

HTML/CSS верстальщик

Grid - инструмент позиционирования основных блоков страницы.

Flexbox - инструмент позиционирования элементов внутри блоков, расположенных с помощью Grid.

Т.е. Grid можно (и нужно) использовать совместно с Flexbox.

А вопрос целесообразности заключается лишь в кроссбраузерности caniuse и особых предпочтений заказчика (если они есть).

Ответ написан более трёх лет назад

Комментировать

Как поменять цвет у list-type ol списка?

HamSter @HamSter007

HTML/CSS верстальщик

Например еще так jsbin:

html:

<ol>
  <li><span>Lorem.</span></li>
</ol>

css:

ol {
  color: green;
}

ol span {
  color:#000
}

Смысл в том что списку задаем цвет, который будет у нумерации, а span задаем цвет текста.

Ответ написан более трёх лет назад

Комментировать

Где найти православный календарь для сайта на wordpress?

HamSter @HamSter007

HTML/CSS верстальщик

Стоит установить календарь с возможностью задавать свои даты + посмотреть все праздники на 2019 год и соответственно задать их.

Пример 1

Пример 2

Ответ написан более трёх лет назад

3 комментария

Как выглядит современный процесс верстки?

HamSter @HamSter007

HTML/CSS верстальщик

Меня, вероятно, закидают тапками, но я так же как и Вы и как Юпитер Макс верстаю старым дедовским методом)

Но есть и и другие современные методы.

+ С помощью сборщиков: gulp (уже устарел) , webpack.
Быстро собирают все файлы, минимизируют css\js файлы, оптимизируют картинки, установка необходимых бибилиотек и прочее.

+ С помощью препроцессоров: css - sass\scss\less, html - pug.

+ С помощью js фреймворков: vue, react, ...

Но все это подходит для каких-нибудь глобальных проектов, потому как одна только настройка такого сборщика займет много времени (чтобы там не говорили что раз настроил и пользуешься - это не так, каждый проект все равно приходится "донастраивать", обновлять и т.д).

Препроцессоры, как по мне, тоже не совсем удобные инструменты. Автопрефиксы есть в emmete любого редактора кода, т.е. уже не нужно писать\вставлять дополнительные sass\less ф-ии и прочие возможности препроцессора (миксины, экстенды, переменные, ... ) проще и быстрее написать ручками простым css)

Это все лично мое мнение.

Ответ написан более трёх лет назад

23 комментария

Как сверстать блок с треугольником?

HamSter @HamSter007

HTML/CSS верстальщик

Например: codepen

Ответ написан более трёх лет назад

Комментировать

Что в CSS означает знак ">"?

HamSter @HamSter007

HTML/CSS верстальщик

Если простыми словами, то:

> - наследование внутренних тегов
+ - наследование соседних тегов.

Почитайте о всех селекторах в css.

Ответ написан более трёх лет назад

Комментировать

Существует ли профессиональный верстальщик?

HamSter @HamSter007

HTML/CSS верстальщик

С придирчивым заказчиком, которому важен каждый пиксель, не каждый профессиональный верстальщик хочет в полной мере показывать свой профессионализм!!!

Обычно такие заказчики долго проверяют, выкатывают список с правками на 10 листов и платят копейки!

В таком случае, даже, тех денег за проект уже не хочется!

P.S: подобная тема уже поднималась тут.

Ответ написан более трёх лет назад

Комментировать

Как сделать декорацию ссылке?

HamSter @HamSter007

HTML/CSS верстальщик

Например: codepen

Ответ написан более трёх лет назад

Комментировать

Где почитать о том что значит *= в css?

HamSter @HamSter007

HTML/CSS верстальщик

www.w3schools.com
htmlbook.ru

Это означает, что html тег с атрибутом data-useragent который включает значение Android ( пример: <html data-useragent='Android-1' ... >, <html data-useragent='1-Android' ... >, <html data-useragent='kjgg Android hjhgg' ...> ...) будет с фоном цвета silver.

Ответ написан более трёх лет назад

Комментировать

Пропал Rising Talent после инактива, как вернуть?

HamSter @HamSter007

HTML/CSS верстальщик

Почитайте тут

Попробуйте пройти тест Upwork Readiness Test.

Ответ написан более трёх лет назад

Комментировать

Как повысить свой уровень верстки?

HamSter @HamSter007

HTML/CSS верстальщик

Проверяйте сайт по всему чему только можно:

Скорость: /pagespeed + gtmetrix

Валидация как HTML так и CSS

Кроссбраузерность: browserstack
Особое внимание к mac os, iphone, ipad!

На вместимость контента, например, huifikator

Pixel Perfect - расширение для chrome

Проверка на SEO: sitechecker.pro или др. ресурсы

+ Ко всему этому советую попасть на парочку каких-нибудь "дотошных" заказчиков, которые проверяют каждый пиксель, каждую букву, каждый процент скорости)))

Ответ написан более трёх лет назад

1 комментарий

Можно ли средствами Bootstrap-4 реализовать карусель блоков div без картинок?

HamSter @HamSter007

HTML/CSS верстальщик

Если о стандартной карусели (по 1 слайду), но именно с карточками, то вместо картинки вставляете карточку:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" >
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
  
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      
      
      <div class="card">
        <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
      
    </div>
    <div class="carousel-item">
      <div class="card">
        <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="card">
        <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

пример 1

-------------------------------------------------

Если же Вы хотите прокрутку по 3 блока, то стандартное решение .row и .col-4:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" >
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
  
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      
      
      <div class="row">
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card">
            <img class="card-img-top" src="https://dummyimage.com/286x180/ccc/fff" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

пример 2

----------------------------------------------------------

И вот еще на codepen готовые решения есть

Ответ написан более трёх лет назад

Комментировать

Какие свойства нужно задать?

HamSter @HamSter007

HTML/CSS верстальщик

img {max-width:100%; }

Ответ написан более трёх лет назад

1 комментарий

Можно ли объединить 2 бэкграунда в одну фигуру, чтобы к ней применялась одна непересекающаяся тень?

HamSter @HamSter007

HTML/CSS верстальщик

1. Такой костыльный вариант jsBin

2. Пример с svg

<svg xmlns="http://www.w3.org/2000/svg" viewPort="0 0 500 500" width="100%" height="100%">
    <defs>
      <filter id="f1" x="-50%" y="-50%" height="200%" width="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>

    <g filter="url(#f1)">
      <rect width="200" height="200" x="50%" y="50%" fill="#eee" style="transform:translate(-50px, -50px);"/>
      <circle r="100" cx="50%" cy="50%" fill="#eee" style="transform:translate(-50px, -50px);"/>
    </g>
</svg>

Ответ написан более трёх лет назад

Комментировать

Как лучше всего реализовать подобный элемент?

HamSter @HamSter007

HTML/CSS верстальщик

Как вариант, можно использовать обертку для картинки + псевдоэлементы :before и :after.

Сдвиг можно регулировать либо top и left, либо translate(X,Y).

Пример на jsbin

Ответ написан более трёх лет назад

Комментировать

Как сделать карточку товара ссылкой?

HamSter @HamSter007

HTML/CSS верстальщик

Можно задать карточке position:relative,
a ссылке - position:absolute;

Пример на jsbin

.card {
  position: relative;
}

.card-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

Ответ написан более трёх лет назад

Комментировать

Что должен знать верстальщик?

HamSter @HamSter007

HTML/CSS верстальщик

Верстальщик или frontend (html, css):

- CSS/CSS3
- HTML/HTML5
- Responsive
- Crossbrowser
- БЭМ
- SASS/LESS/PUG
- Gulp/Webpack
- Git
- Bootstrap3/4 + другие CSS фреймворки
- Базовые знания работы с PS, Ai, Scetch файлами

Верстальщик или frontend (html, css, js):
+ ко всему вышеперечисленному
- native js
- ES 5/6
- Javscript фреймворки (Vue, react, angular)
- ...

Чек лист верстки, хоть и 2011 год, но для многих и сейчас актуально.

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт